82 lines
3.7 KiB
TypeScript
82 lines
3.7 KiB
TypeScript
import RainbowScroll from "./prop/RainbowScroll";
|
||
|
||
const { ccclass, property } = cc._decorator;
|
||
|
||
/** C 方案只覆盖底色，方块及其附件仍使用原节点。 */
|
||
@ccclass
|
||
export default class RainbowOldVisual extends cc.Component {
|
||
@property([cc.SpriteFrame])
|
||
shapeFrames: cc.SpriteFrame[] = [];
|
||
|
||
@property([cc.SpriteFrame])
|
||
maskFrames: cc.SpriteFrame[] = [];
|
||
|
||
apply(block: any): void {
|
||
const icon: cc.Node = block.node.getChildByName("icon");
|
||
const frame = this.shapeFrames[block.block_Info.block];
|
||
const maskFrame = this.maskFrames[block.block_Info.block];
|
||
const bg = this.node.getChildByName("bg");
|
||
const mask = this.node.getChildByName("mask");
|
||
|
||
this.node.setPosition(icon.position);
|
||
this.node.setAnchorPoint(icon.getAnchorPoint());
|
||
this.node.setContentSize(icon.getContentSize());
|
||
this.node.setScale(icon.scaleX, icon.scaleY);
|
||
this.node.angle = icon.angle;
|
||
this.node.setSiblingIndex(icon.getSiblingIndex());
|
||
|
||
const sprite = bg.getComponent(cc.Sprite);
|
||
sprite.sizeMode = cc.Sprite.SizeMode.CUSTOM;
|
||
sprite.trim = false;
|
||
sprite.spriteFrame = frame;
|
||
mask.getComponent(cc.Mask).spriteFrame = maskFrame;
|
||
this.alignFrame(bg, frame, icon);
|
||
// 共用 bg 的原画布布局，保留 mask 图片中的内收边距。
|
||
this.alignFrame(mask, frame, icon);
|
||
this.fitColors(mask);
|
||
const scroll = this.node.getComponent(RainbowScroll);
|
||
if (scroll) scroll.refreshGeometry();
|
||
icon.active = false;
|
||
}
|
||
|
||
/** Mask 按原画布绘制，Sprite 默认按裁剪矩形绘制，先还原透明边距。 */
|
||
private alignFrame(node: cc.Node, frame: cc.SpriteFrame, icon: cc.Node): void {
|
||
const rect = frame.getRect();
|
||
const original = frame.getOriginalSize();
|
||
const offset = frame.getOffset();
|
||
const sx = icon.width / rect.width;
|
||
const sy = icon.height / rect.height;
|
||
const left = -icon.anchorX * icon.width - (offset.x + (original.width - rect.width) / 2) * sx;
|
||
const bottom = -icon.anchorY * icon.height - (offset.y + (original.height - rect.height) / 2) * sy;
|
||
node.setAnchorPoint(0.5, 0.5);
|
||
node.setContentSize(original.width * sx, original.height * sy);
|
||
node.setPosition(left + node.width / 2, bottom + node.height / 2);
|
||
node.setScale(1, 1);
|
||
}
|
||
|
||
/** 两张镜像大纹理首尾相接；每一张都足以覆盖遮罩沿滚动轴的投影。 */
|
||
private fitColors(mask: cc.Node): void {
|
||
const colors = [mask.getChildByName("color1"), mask.getChildByName("color2")];
|
||
const radians = colors[0].angle * Math.PI / 180;
|
||
const cos = Math.cos(radians), sin = Math.sin(radians);
|
||
const direction = cc.v2(-sin, cos);
|
||
const width = Math.abs(mask.width * cos) + Math.abs(mask.height * sin) + 2;
|
||
const length = Math.abs(mask.width * sin) + Math.abs(mask.height * cos) + 2;
|
||
colors.forEach(color => {
|
||
const scale = Math.max(1, width / (color.width * Math.abs(color.scaleX)),
|
||
length / (color.height * Math.abs(color.scaleY)));
|
||
color.setScale(color.scaleX * scale, color.scaleY * scale);
|
||
});
|
||
let end = length / 2;
|
||
colors.forEach(color => {
|
||
const colorLength = color.height * Math.abs(color.scaleY);
|
||
const center = end - colorLength / 2;
|
||
const ox = (0.5 - color.anchorX) * color.width * color.scaleX;
|
||
const oy = (0.5 - color.anchorY) * color.height * color.scaleY;
|
||
color.setPosition(direction.x * center - (cos * ox - sin * oy),
|
||
direction.y * center - (sin * ox + cos * oy));
|
||
end -= colorLength;
|
||
});
|
||
}
|
||
}
|