update new hu spine

assets/resources/xoay_360_smoth/hu.atlas

+
+hu.png
+size: 5676,5676
+format: RGBA8888
+filter: Linear,Linear
+repeat: none
+Rotate_00
+  rotate: false
+  xy: 2, 4946
+  size: 793, 728
+  orig: 1080, 1920
+  offset: 129, 411
+  index: -1
+Rotate_01
+  rotate: false
+  xy: 1599, 4935
+  size: 805, 739
+  orig: 1080, 1920
+  offset: 123, 403
+  index: -1
+Rotate_02
+  rotate: false
+  xy: 3219, 4925
+  size: 816, 749
+  orig: 1080, 1920
+  offset: 117, 395
+  index: -1
+Rotate_03
+  rotate: false
+  xy: 4037, 4925
+  size: 816, 749
+  orig: 1080, 1920
+  offset: 117, 395
+  index: -1
+Rotate_04
+  rotate: false
+  xy: 4855, 4925
+  size: 816, 749
+  orig: 1080, 1920
+  offset: 123, 395
+  index: -1
+Rotate_05
+  rotate: false
+  xy: 775, 4188
+  size: 818, 749
+  orig: 1080, 1920
+  offset: 123, 395
+  index: -1
+Rotate_06
+  rotate: false
+  xy: 2359, 3428
+  size: 816, 750
+  orig: 1080, 1920
+  offset: 124, 394
+  index: -1
+Rotate_07
+  rotate: false
+  xy: 3177, 3422
+  size: 810, 750
+  orig: 1080, 1920
+  offset: 126, 394
+  index: -1
+Rotate_08
+  rotate: false
+  xy: 1595, 4183
+  size: 803, 750
+  orig: 1080, 1920
+  offset: 127, 394
+  index: -1
+Rotate_09
+  rotate: false
+  xy: 3901, 410
+  size: 794, 752
+  orig: 1080, 1920
+  offset: 129, 393
+  index: -1
+Rotate_10
+  rotate: false
+  xy: 4697, 410
+  size: 788, 752
+  orig: 1080, 1920
+  offset: 132, 393
+  index: -1
+Rotate_11
+  rotate: false
+  xy: 3116, 411
+  size: 783, 752
+  orig: 1080, 1920
+  offset: 135, 393
+  index: -1
+Rotate_12
+  rotate: false
+  xy: 2339, 417
+  size: 775, 752
+  orig: 1080, 1920
+  offset: 142, 393
+  index: -1
+Rotate_13
+  rotate: false
+  xy: 3985, 1917
+  size: 776, 751
+  orig: 1080, 1920
+  offset: 143, 394
+  index: -1
+Rotate_14
+  rotate: false
+  xy: 4763, 1917
+  size: 778, 751
+  orig: 1080, 1920
+  offset: 142, 394
+  index: -1
+Rotate_15
+  rotate: false
+  xy: 2, 1180
+  size: 776, 751
+  orig: 1080, 1920
+  offset: 141, 394
+  index: -1
+Rotate_16
+  rotate: false
+  xy: 2, 4194
+  size: 771, 750
+  orig: 1080, 1920
+  offset: 140, 395
+  index: -1
+Rotate_17
+  rotate: false
+  xy: 2, 3442
+  size: 768, 750
+  orig: 1080, 1920
+  offset: 140, 395
+  index: -1
+Rotate_18
+  rotate: false
+  xy: 1589, 3431
+  size: 768, 750
+  orig: 1080, 1920
+  offset: 141, 395
+  index: -1
+Rotate_19
+  rotate: false
+  xy: 3989, 3422
+  size: 776, 750
+  orig: 1080, 1920
+  offset: 133, 395
+  index: -1
+Rotate_20
+  rotate: false
+  xy: 780, 1174
+  size: 778, 751
+  orig: 1080, 1920
+  offset: 130, 394
+  index: -1
+Rotate_21
+  rotate: false
+  xy: 1560, 1174
+  size: 779, 751
+  orig: 1080, 1920
+  offset: 128, 394
+  index: -1
+Rotate_22
+  rotate: false
+  xy: 2341, 1171
+  size: 779, 751
+  orig: 1080, 1920
+  offset: 127, 394
+  index: -1
+Rotate_27
+  rotate: false
+  xy: 4767, 3422
+  size: 799, 750
+  orig: 1080, 1920
+  offset: 119, 394
+  index: -1
+Rotate_28
+  rotate: false
+  xy: 772, 2685
+  size: 807, 750
+  orig: 1080, 1920
+  offset: 112, 394
+  index: -1
+Rotate_29
+  rotate: false
+  xy: 2358, 2676
+  size: 813, 750
+  orig: 1080, 1920
+  offset: 108, 394
+  index: -1
+Rotate_30
+  rotate: false
+  xy: 2400, 4180
+  size: 816, 749
+  orig: 1080, 1920
+  offset: 108, 395
+  index: -1
+Rotate_31
+  rotate: false
+  xy: 3218, 4174
+  size: 817, 749
+  orig: 1080, 1920
+  offset: 111, 395
+  index: -1
+Rotate_32
+  rotate: false
+  xy: 4037, 4174
+  size: 818, 749
+  orig: 1080, 1920
+  offset: 116, 395
+  index: -1
+Rotate_33
+  rotate: false
+  xy: 4857, 4174
+  size: 817, 749
+  orig: 1080, 1920
+  offset: 122, 395
+  index: -1
+Rotate_34
+  rotate: false
+  xy: 772, 3437
+  size: 815, 749
+  orig: 1080, 1920
+  offset: 126, 395
+  index: -1
+Rotate_35
+  rotate: false
+  xy: 3173, 2670
+  size: 812, 750
+  orig: 1080, 1920
+  offset: 128, 394
+  index: -1
+Rotate_36
+  rotate: false
+  xy: 3987, 2670
+  size: 805, 750
+  orig: 1080, 1920
+  offset: 131, 394
+  index: -1
+Rotate_37
+  rotate: false
+  xy: 4794, 2670
+  size: 798, 750
+  orig: 1080, 1920
+  offset: 131, 394
+  index: -1
+Rotate_42
+  rotate: false
+  xy: 3122, 1165
+  size: 779, 751
+  orig: 1080, 1920
+  offset: 143, 394
+  index: -1
+Rotate_43
+  rotate: false
+  xy: 3903, 1164
+  size: 779, 751
+  orig: 1080, 1920
+  offset: 142, 394
+  index: -1
+Rotate_44
+  rotate: false
+  xy: 4684, 1164
+  size: 778, 751
+  orig: 1080, 1920
+  offset: 141, 394
+  index: -1
+Rotate_45
+  rotate: false
+  xy: 1581, 2679
+  size: 775, 750
+  orig: 1080, 1920
+  offset: 140, 395
+  index: -1
+Rotate_46
+  rotate: false
+  xy: 2, 2690
+  size: 768, 750
+  orig: 1080, 1920
+  offset: 140, 395
+  index: -1
+Rotate_47
+  rotate: false
+  xy: 2, 1938
+  size: 768, 750
+  orig: 1080, 1920
+  offset: 141, 395
+  index: -1
+Rotate_48
+  rotate: false
+  xy: 772, 1933
+  size: 772, 750
+  orig: 1080, 1920
+  offset: 137, 395
+  index: -1
+Rotate_49
+  rotate: false
+  xy: 780, 421
+  size: 777, 751
+  orig: 1080, 1920
+  offset: 131, 394
+  index: -1
+Rotate_50
+  rotate: false
+  xy: 1559, 421
+  size: 778, 751
+  orig: 1080, 1920
+  offset: 129, 394
+  index: -1
+Rotate_51
+  rotate: false
+  xy: 2, 427
+  size: 776, 751
+  orig: 1080, 1920
+  offset: 130, 394
+  index: -1
+Rotate_56
+  rotate: false
+  xy: 1546, 1927
+  size: 804, 750
+  orig: 1080, 1920
+  offset: 118, 394
+  index: -1
+Rotate_57
+  rotate: false
+  xy: 2352, 1924
+  size: 812, 750
+  orig: 1080, 1920
+  offset: 112, 394
+  index: -1
+Rotate_58
+  rotate: false
+  xy: 3166, 1918
+  size: 817, 750
+  orig: 1080, 1920
+  offset: 108, 394
+  index: -1
+Rotate_59
+  rotate: false
+  xy: 2406, 4931
+  size: 811, 743
+  orig: 1080, 1920
+  offset: 112, 400
+  index: -1
+Rotate_60
+  rotate: false
+  xy: 797, 4939
+  size: 800, 735
+  orig: 1080, 1920
+  offset: 120, 406
+  index: -1
+
+hu2.png
+size: 3160,3160
+format: RGBA8888
+filter: Linear,Linear
+repeat: none
+Rotate_23
+  rotate: false
+  xy: 2, 2405
+  size: 779, 752
+  orig: 1080, 1920
+  offset: 127, 393
+  index: -1
+Rotate_24
+  rotate: false
+  xy: 783, 2405
+  size: 786, 752
+  orig: 1080, 1920
+  offset: 126, 393
+  index: -1
+Rotate_25
+  rotate: false
+  xy: 1571, 2405
+  size: 791, 752
+  orig: 1080, 1920
+  offset: 126, 393
+  index: -1
+Rotate_26
+  rotate: false
+  xy: 2364, 2405
+  size: 793, 752
+  orig: 1080, 1920
+  offset: 126, 393
+  index: -1
+Rotate_38
+  rotate: false
+  xy: 2, 1651
+  size: 792, 752
+  orig: 1080, 1920
+  offset: 131, 393
+  index: -1
+Rotate_39
+  rotate: false
+  xy: 796, 1651
+  size: 790, 752
+  orig: 1080, 1920
+  offset: 133, 393
+  index: -1
+Rotate_40
+  rotate: false
+  xy: 1588, 1651
+  size: 785, 752
+  orig: 1080, 1920
+  offset: 138, 393
+  index: -1
+Rotate_41
+  rotate: false
+  xy: 2375, 1651
+  size: 778, 752
+  orig: 1080, 1920
+  offset: 144, 393
+  index: -1
+Rotate_52
+  rotate: false
+  xy: 2, 897
+  size: 777, 752
+  orig: 1080, 1920
+  offset: 132, 393
+  index: -1
+Rotate_53
+  rotate: false
+  xy: 781, 897
+  size: 784, 752
+  orig: 1080, 1920
+  offset: 131, 393
+  index: -1
+Rotate_54
+  rotate: false
+  xy: 1567, 897
+  size: 789, 752
+  orig: 1080, 1920
+  offset: 129, 393
+  index: -1
+Rotate_55
+  rotate: false
+  xy: 2358, 897
+  size: 796, 752
+  orig: 1080, 1920
+  offset: 125, 393
+  index: -1

assets/scripts/GamePlay/HuController.ts

@@ -7,11 +7,16 @@ export default class HuController extends cc.Component {
     private spine: sp.Skeleton = null;
 
     private _isRotate: boolean = false;
-    private _pointStart: cc.Vec2;
+    private _pointStart: cc.Vec2 = null;
+    private _x: number = 0;
+    private _y: number = 0;
+    private _z: number = 0;
+    private _count = 0;
+    private _isShake = false;
 
     protected onLoad(): void {
         this.spine = this.node.getComponent(sp.Skeleton);
-        this.setRotateAnim();
+        // this.setRotateAnim();
 
         // this.node.on(cc.Node.EventType.TOUCH_START, this.toggleAnim, this);
         this.node.on(cc.Node.EventType.TOUCH_START, this.onTouchStart, this);
@@ -19,16 +24,66 @@ export default class HuController extends cc.Component {
         this.node.on(cc.Node.EventType.TOUCH_MOVE, this.onTouchMove, this)
 
         this.spine.setCompleteListener(() => this.setRotateAnim());
+        this.scheduleOnce(() => this.testDevice, 1);
+
+    }
+
+    private testDevice() {
+        window.addEventListener("devicemotion", (event) => {
+            if (!event.accelerationIncludingGravity) {
+                return;
+            }
 
+            const x = event.accelerationIncludingGravity.x;
+            const y = event.accelerationIncludingGravity.y;
+            const z = event.accelerationIncludingGravity.z;
+
+            if (x - this._x > 5 || y - this._y > 5 || z - this._z > 5) {
+                if (this._isShake) {
+                    this._count++;
+                }
+            }
+
+            if (x - this._x < -5 || y - this._y < -5 || z - this._z < -5) {
+                if (!this._isShake) {
+                    this._count++;
+                }
+            }
+
+            if (this._count > 0) {
+                this.scheduleOnce(() => {
+                    this._count = 0;
+                }, 1.5)
+            }
+
+            if (this._count > 5) {
+                this._count = 0;
+                cc.tween(this.node)
+                    .to(0.2, { position: cc.v3(20, 0, 0) })
+                    .to(0.2, { position: cc.v3(-20, 0, 0) })
+                    .to(0.2, { position: cc.v3(20, 0, 0) })
+                    .to(0.2, { position: cc.v3(-20, 0, 0) })
+                    .to(0.2, { position: cc.v3(0, 0, 0) })
+                    .start();
+            }
+
+
+            this._x = x;
+            this._y = y;
+            this._z = z;
+        });
     }
 
     private onTouchStart(event: cc.Event.EventTouch): void {
+        if (!this._pointStart) {
+            this.setRotateAnim();
+        }
         this._pointStart = event.getLocation();
         this.spine.timeScale = 0;
     }
 
     private onTouchEnd(): void {
-        this.spine.timeScale = 0;
+        this.scheduleOnce(() => this.spine.timeScale = 0, 0.5);
     }
 
     private onTouchMove(event: cc.Event.EventTouch): void {
@@ -40,12 +95,12 @@ export default class HuController extends cc.Component {
         }
 
         this._pointStart = newPoint;
-        this.spine.timeScale = distance > 0 ? -0.5 : 0.5;
+        this.spine.timeScale = distance > 0 ? -1 : 1;
     }
 
     private setRotateAnim(): void {
         this.spine.setAnimation(1, "Rotate", false);
-        this.spine.timeScale = 0.2;
+        this.spine.timeScale = this._pointStart ? 0 : 0.5;
     }
 
     private pauseAnim(): void {
@@ -53,7 +108,7 @@ export default class HuController extends cc.Component {
     }
 
     private unPauseAnim(): void {
-        this.spine.timeScale = 0.2;
+        this.spine.timeScale = 0.5;
     }
 
     private toggleAnim(): void {

assets/scripts/GamePlay/Main.ts

@@ -4,6 +4,11 @@ const { ccclass, property } = cc._decorator;
 @ccclass
 export default class Main extends cc.Component {
     private _bg: cc.Sprite = null;
+    private _x: number = 0;
+    private _y: number = 0;
+    private _z: number = 0;
+    private _count = 0;
+    private _isShake = false;
     
     protected onLoad(): void {
 
@@ -42,11 +47,7 @@ export default class Main extends cc.Component {
         }, 2)
     }
 
-    private _x: number = 0;
-    private _y: number = 0;
-    private _z: number = 0;
-    private _count = 0;
-    private _isShake = false;
+
 
     private testDevice() {
         window.addEventListener("devicemotion", (event) => {