86 lines
3.1 KiB
TypeScript
86 lines
3.1 KiB
TypeScript
const { ccclass, property } = cc._decorator;
|
||
|
||
@ccclass
|
||
export default class GuideHand extends cc.Component {
|
||
@property(cc.Material)
|
||
rippleMaterial: cc.Material = null;
|
||
|
||
@property
|
||
swingAngle: number = 8;
|
||
|
||
@property
|
||
ringWidth: number = 0.1;
|
||
|
||
@property(cc.Vec2)
|
||
tipPosition: cc.Vec2 = cc.v2(-58, 148);
|
||
|
||
private baseAngle: number = 0;
|
||
private elapsed: number = 0;
|
||
private rippleDuration: number = 0;
|
||
private ripple: cc.Node = null;
|
||
private material: cc.Material = null;
|
||
|
||
onLoad() {
|
||
this.baseAngle = this.node.angle;
|
||
const ripple = this.ripple = new cc.Node("handRipple");
|
||
ripple.active = false;
|
||
ripple.parent = this.node.parent;
|
||
// 光圈放在手的后面，独立于手旋转，点击位置保持不动。
|
||
ripple.setSiblingIndex(this.node.getSiblingIndex());
|
||
const sprite = ripple.addComponent(cc.Sprite);
|
||
sprite.spriteFrame = this.node.getComponent(cc.Sprite).spriteFrame;
|
||
sprite.sizeMode = cc.Sprite.SizeMode.CUSTOM;
|
||
ripple.setContentSize(220, 220);
|
||
sprite.setMaterial(0, this.rippleMaterial);
|
||
this.material = sprite.getMaterial(0);
|
||
this.material.setProperty("ringWidth", this.ringWidth);
|
||
this.material.setProperty("center", [0.5, 0.5]);
|
||
// 对齐 ripple_shrink：第三圈延后 0.6 秒，扩散到半径 0.475 时完全淡出。
|
||
this.rippleDuration = 0.6 + 0.475 / Number(this.material.getProperty("waveSpeed", 0));
|
||
}
|
||
|
||
onEnable() {
|
||
this.elapsed = 0;
|
||
this.node.angle = this.baseAngle;
|
||
this.ripple.active = false;
|
||
this.material.setProperty("time", 0);
|
||
}
|
||
|
||
update(dt: number) {
|
||
const pressDuration = 0.24;
|
||
const releaseDuration = 0.32;
|
||
const cycleDuration = pressDuration + this.rippleDuration;
|
||
const previousTime = this.elapsed;
|
||
this.elapsed = (this.elapsed + dt) % cycleDuration;
|
||
if (this.elapsed < previousTime) this.ripple.active = false;
|
||
const progress = this.elapsed < pressDuration
|
||
? this.elapsed / pressDuration
|
||
: Math.max(0, 1 - (this.elapsed - pressDuration) / releaseDuration);
|
||
this.node.angle = this.baseAngle + this.swingAngle * (1 - Math.cos(progress * Math.PI)) / 2;
|
||
|
||
if (this.elapsed < pressDuration) {
|
||
this.ripple.active = false;
|
||
return;
|
||
}
|
||
if (!this.ripple.active) {
|
||
// 按下瞬间的指尖坐标；松手时光圈不跟着移动。
|
||
const angle = this.node.angle;
|
||
this.node.angle = this.baseAngle + this.swingAngle;
|
||
const tip = this.node.convertToWorldSpaceAR(this.tipPosition);
|
||
this.ripple.setPosition(this.node.parent.convertToNodeSpaceAR(tip));
|
||
this.node.angle = angle;
|
||
this.ripple.active = true;
|
||
}
|
||
this.material.setProperty("time", this.elapsed - pressDuration);
|
||
}
|
||
|
||
onDisable() {
|
||
this.node.angle = this.baseAngle;
|
||
if (cc.isValid(this.ripple)) this.ripple.active = false;
|
||
}
|
||
|
||
onDestroy() {
|
||
if (cc.isValid(this.ripple)) this.ripple.destroy();
|
||
}
|
||
}
|