更新小手，更新难度出现机制

2026-09-16 18:13:28 +08:00
parent c2f51a01ee
commit 60e58dfc46
23 changed files with 1491 additions and 1179 deletions
@@ -0,0 +1,85 @@
+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();
+    }
+}