update popup spritea

assets/main.fire

@@ -708,8 +708,8 @@
     },
     "_contentSize": {
       "__type__": "cc.Size",
-      "width": 300,
-      "height": 100
+      "width": 350,
+      "height": 150
     },
     "_anchorPoint": {
       "__type__": "cc.Vec2",
@@ -729,7 +729,7 @@
         1,
         1,
         1,
-        1
+        0
       ]
     },
     "_eulerAngles": {
@@ -763,9 +763,9 @@
     "_opacity": 255,
     "_color": {
       "__type__": "cc.Color",
-      "r": 0,
-      "g": 0,
-      "b": 0,
+      "r": 255,
+      "g": 255,
+      "b": 255,
       "a": 255
     },
     "_contentSize": {
@@ -783,7 +783,7 @@
       "ctor": "Float64Array",
       "array": [
         0,
-        0,
+        20,
         0,
         0,
         0,
@@ -856,7 +856,7 @@
     "_srcBlendFactor": 770,
     "_dstBlendFactor": 771,
     "_spriteFrame": {
-      "__uuid__": "f0048c10-f03e-4c97-b9d3-3506e1d58952"
+      "__uuid__": "85bb5d50-034a-457e-9b4c-349c69f5b672"
     },
     "_type": 1,
     "_sizeMode": 0,
@@ -883,10 +883,10 @@
     "alignMode": 0,
     "_target": null,
     "_alignFlags": 45,
-    "_left": 0,
-    "_right": 0,
-    "_top": 0,
-    "_bottom": 0,
+    "_left": -25,
+    "_right": -25,
+    "_top": -25,
+    "_bottom": -25,
     "_verticalCenter": 0,
     "_horizontalCenter": 0,
     "_isAbsLeft": true,
@@ -910,12 +910,12 @@
     "_normalMaterial": null,
     "_grayMaterial": null,
     "duration": 0.1,
-    "zoomScale": 1.2,
+    "zoomScale": 0.9,
     "clickEvents": [],
     "_N$interactable": true,
     "_N$enableAutoGrayEffect": false,
-    "_N$transition": 2,
-    "transition": 2,
+    "_N$transition": 3,
+    "transition": 3,
     "_N$normalColor": {
       "__type__": "cc.Color",
       "r": 230,
@@ -959,7 +959,7 @@
       "a": 200
     },
     "_N$normalSprite": {
-      "__uuid__": "f0048c10-f03e-4c97-b9d3-3506e1d58952"
+      "__uuid__": "85bb5d50-034a-457e-9b4c-349c69f5b672"
     },
     "_N$pressedSprite": {
       "__uuid__": "e9ec654c-97a2-4787-9325-e6a10375219a"
@@ -1041,8 +1041,8 @@
     },
     "_contentSize": {
       "__type__": "cc.Size",
-      "width": 1000,
-      "height": 1000
+      "width": 900,
+      "height": 900
     },
     "_anchorPoint": {
       "__type__": "cc.Vec2",
@@ -1054,7 +1054,7 @@
       "ctor": "Float64Array",
       "array": [
         0,
-        -11.053,
+        27.843,
         0,
         0,
         0,
@@ -1184,8 +1184,8 @@
     },
     "_contentSize": {
       "__type__": "cc.Size",
-      "width": 1000,
-      "height": 1400
+      "width": 900,
+      "height": 1600
     },
     "_anchorPoint": {
       "__type__": "cc.Vec2",
@@ -1197,7 +1197,7 @@
       "ctor": "Float64Array",
       "array": [
         0,
-        0,
+        100,
         0,
         0,
         0,
@@ -1237,7 +1237,7 @@
     "_srcBlendFactor": 770,
     "_dstBlendFactor": 771,
     "_spriteFrame": {
-      "__uuid__": "a23235d1-15db-4b95-8439-a2e005bfff91"
+      "__uuid__": "0f972c20-d61c-4c5d-9da5-6f9a2c285ed8"
     },
     "_type": 0,
     "_sizeMode": 0,
@@ -1291,7 +1291,7 @@
       "ctor": "Float64Array",
       "array": [
         0,
-        618.846,
+        568.403,
         0,
         0,
         0,
@@ -1426,7 +1426,7 @@
     "_srcBlendFactor": 770,
     "_dstBlendFactor": 771,
     "_spriteFrame": {
-      "__uuid__": "90004ad6-2f6d-40e1-93ef-b714375c6f06"
+      "__uuid__": "199d20ef-0166-4a69-8a95-79172ece4918"
     },
     "_type": 0,
     "_sizeMode": 0,
@@ -1484,7 +1484,7 @@
       "ctor": "Float64Array",
       "array": [
         0,
-        -600,
+        -553.325,
         0,
         0,
         0,
@@ -1561,7 +1561,7 @@
         1,
         1,
         1,
-        1
+        0
       ]
     },
     "_eulerAngles": {
@@ -1595,9 +1595,9 @@
     "_opacity": 255,
     "_color": {
       "__type__": "cc.Color",
-      "r": 0,
-      "g": 0,
-      "b": 0,
+      "r": 255,
+      "g": 255,
+      "b": 255,
       "a": 255
     },
     "_contentSize": {
@@ -1615,7 +1615,7 @@
       "ctor": "Float64Array",
       "array": [
         0,
-        0,
+        10,
         0,
         0,
         0,
@@ -1688,7 +1688,7 @@
     "_srcBlendFactor": 770,
     "_dstBlendFactor": 771,
     "_spriteFrame": {
-      "__uuid__": "f0048c10-f03e-4c97-b9d3-3506e1d58952"
+      "__uuid__": "5779a8a5-b352-4394-976c-55de90c8d79d"
     },
     "_type": 1,
     "_sizeMode": 0,
@@ -1742,12 +1742,12 @@
     "_normalMaterial": null,
     "_grayMaterial": null,
     "duration": 0.1,
-    "zoomScale": 1.2,
+    "zoomScale": 0.9,
     "clickEvents": [],
     "_N$interactable": true,
     "_N$enableAutoGrayEffect": false,
-    "_N$transition": 2,
-    "transition": 2,
+    "_N$transition": 3,
+    "transition": 3,
     "_N$normalColor": {
       "__type__": "cc.Color",
       "r": 230,
@@ -1791,7 +1791,7 @@
       "a": 200
     },
     "_N$normalSprite": {
-      "__uuid__": "f0048c10-f03e-4c97-b9d3-3506e1d58952"
+      "__uuid__": "5779a8a5-b352-4394-976c-55de90c8d79d"
     },
     "_N$pressedSprite": {
       "__uuid__": "e9ec654c-97a2-4787-9325-e6a10375219a"
@@ -1858,8 +1858,8 @@
     },
     "_contentSize": {
       "__type__": "cc.Size",
-      "width": 462.01,
-      "height": 540.78
+      "width": 400,
+      "height": 400
     },
     "_anchorPoint": {
       "__type__": "cc.Vec2",
@@ -1870,8 +1870,8 @@
       "__type__": "TypedArray",
       "ctor": "Float64Array",
       "array": [
-        -218.995,
-        229.61,
+        -150,
+        150,
         0,
         0,
         0,
@@ -1962,8 +1962,8 @@
     },
     "_contentSize": {
       "__type__": "cc.Size",
-      "width": 462.01,
-      "height": 540.78
+      "width": 400,
+      "height": 400
     },
     "_anchorPoint": {
       "__type__": "cc.Vec2",
@@ -1974,8 +1974,8 @@
       "__type__": "TypedArray",
       "ctor": "Float64Array",
       "array": [
-        243.015,
-        229.61,
+        250,
+        150,
         0,
         0,
         0,
@@ -2066,8 +2066,8 @@
     },
     "_contentSize": {
       "__type__": "cc.Size",
-      "width": 462.01,
-      "height": 540.78
+      "width": 400,
+      "height": 400
     },
     "_anchorPoint": {
       "__type__": "cc.Vec2",
@@ -2078,8 +2078,8 @@
       "__type__": "TypedArray",
       "ctor": "Float64Array",
       "array": [
-        -218.995,
-        -311.16999999999996,
+        -150,
+        -250,
         0,
         0,
         0,
@@ -2170,8 +2170,8 @@
     },
     "_contentSize": {
       "__type__": "cc.Size",
-      "width": 462.01,
-      "height": 540.78
+      "width": 400,
+      "height": 400
     },
     "_anchorPoint": {
       "__type__": "cc.Vec2",
@@ -2182,8 +2182,8 @@
       "__type__": "TypedArray",
       "ctor": "Float64Array",
       "array": [
-        243.015,
-        -311.16999999999996,
+        250,
+        -250,
         0,
         0,
         0,
@@ -2256,7 +2256,7 @@
     "node": {
       "__id__": 21
     },
-    "_enabled": true,
+    "_enabled": false,
     "_materials": [
       {
         "__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
@@ -2291,20 +2291,20 @@
     "_enabled": true,
     "_layoutSize": {
       "__type__": "cc.Size",
-      "width": 1000,
-      "height": 1000
+      "width": 900,
+      "height": 900
     },
-    "_resize": 0,
+    "_resize": 2,
     "_N$layoutType": 3,
     "_N$cellSize": {
       "__type__": "cc.Size",
-      "width": 40,
-      "height": 40
+      "width": 400,
+      "height": 400
     },
     "_N$startAxis": 0,
-    "_N$paddingLeft": 50,
+    "_N$paddingLeft": 100,
     "_N$paddingRight": 0,
-    "_N$paddingTop": 0,
+    "_N$paddingTop": 100,
     "_N$paddingBottom": 0,
     "_N$spacingX": 0,
     "_N$spacingY": 0,
@@ -3071,7 +3071,7 @@
         1,
         1,
         1,
-        1
+        0
       ]
     },
     "_eulerAngles": {
@@ -3105,9 +3105,9 @@
     "_opacity": 255,
     "_color": {
       "__type__": "cc.Color",
-      "r": 0,
-      "g": 0,
-      "b": 0,
+      "r": 255,
+      "g": 255,
+      "b": 255,
       "a": 255
     },
     "_contentSize": {
@@ -3125,7 +3125,7 @@
       "ctor": "Float64Array",
       "array": [
         0,
-        0,
+        10,
         0,
         0,
         0,
@@ -3198,7 +3198,7 @@
     "_srcBlendFactor": 770,
     "_dstBlendFactor": 771,
     "_spriteFrame": {
-      "__uuid__": "f0048c10-f03e-4c97-b9d3-3506e1d58952"
+      "__uuid__": "5779a8a5-b352-4394-976c-55de90c8d79d"
     },
     "_type": 1,
     "_sizeMode": 0,
@@ -3252,12 +3252,12 @@
     "_normalMaterial": null,
     "_grayMaterial": null,
     "duration": 0.1,
-    "zoomScale": 1.2,
+    "zoomScale": 0.9,
     "clickEvents": [],
     "_N$interactable": true,
     "_N$enableAutoGrayEffect": false,
-    "_N$transition": 2,
-    "transition": 2,
+    "_N$transition": 3,
+    "transition": 3,
     "_N$normalColor": {
       "__type__": "cc.Color",
       "r": 230,
@@ -3301,7 +3301,7 @@
       "a": 200
     },
     "_N$normalSprite": {
-      "__uuid__": "f0048c10-f03e-4c97-b9d3-3506e1d58952"
+      "__uuid__": "5779a8a5-b352-4394-976c-55de90c8d79d"
     },
     "_N$pressedSprite": {
       "__uuid__": "e9ec654c-97a2-4787-9325-e6a10375219a"

assets/scripts/GamePlay/HuController.ts

@@ -7,20 +7,47 @@ export default class HuController extends cc.Component {
     private spine: sp.Skeleton = null;
 
     private _isRotate: boolean = false;
+    private _pointStart: cc.Vec2;
 
     protected onLoad(): void {
         this.spine = this.node.getComponent(sp.Skeleton);
         this.setRotateAnim();
 
-        this.node.on(cc.Node.EventType.TOUCH_START, this.toggleAnim, this);
-        // this.spine.setCompleteListener((trackEntry) => {
-        //     cc.log("Animation completed: " + trackEntry.animation.name);
-        // });
+        // this.node.on(cc.Node.EventType.TOUCH_START, this.toggleAnim, this);
+        this.node.on(cc.Node.EventType.TOUCH_START, this.onTouchStart, this);
+        this.node.on(cc.Node.EventType.TOUCH_END, this.onTouchEnd, this)
+        this.node.on(cc.Node.EventType.TOUCH_MOVE, this.onTouchMove, this)
+
+        // this.spine.setCompleteListener((trackEntry) => this.setRotateAnim());
+
+    }
+
+    private onTouchStart(event: cc.Event.EventTouch): void {
+        this._pointStart = event.getLocation();
+        this.spine.timeScale = 0;
+    }
+
+    private onTouchEnd(): void {
+        // this.spine.setAnimation(1, "Rotate", false);
+        this.spine.timeScale = 0;
+    }
+
+    private onTouchMove(event: cc.Event.EventTouch): void {
+        const newPoint = event.getLocation();
+        const distance = newPoint.x - this._pointStart.x;
+        if (Math.abs(distance) < 5) {
+            this.spine.timeScale = 0;
+            return;
+        }
+
+        console.log('distance', distance)
+        this._pointStart = newPoint;
+        this.spine.timeScale = distance > 0 ? -0.5 : 0.5;
     }
 
     private setRotateAnim(): void {
-        this.spine.setAnimation(1, "Rotate", true);
-        this.spine.timeScale = 0.5;
+        this.spine.setAnimation(1, "Rotate", false);
+        this.spine.timeScale = 0.2;
     }
 
     private pauseAnim(): void {
@@ -28,8 +55,8 @@ export default class HuController extends cc.Component {
     }
 
     private unPauseAnim(): void {
-        this.spine.timeScale = 0.5;
-        this.node.scaleX *= -1;
+        this.spine.timeScale = 0.2;
+        // this.node.scaleX *= -1;
     }
 
     private toggleAnim(): void {