update loading btn

assets/Scenes/home.fire

@@ -512,10 +512,16 @@
     "_children": [
       {
         "__id__": 11
+      },
+      {
+        "__id__": 13
       }
     ],
     "_active": true,
     "_components": [
+      {
+        "__id__": 15
+      },
       {
         "__id__": 16
       }
@@ -532,7 +538,7 @@
     "_contentSize": {
       "__type__": "cc.Size",
       "width": 300,
-      "height": 100
+      "height": 120
     },
     "_anchorPoint": {
       "__type__": "cc.Vec2",
@@ -552,7 +558,7 @@
         1,
         1,
         1,
-        1
+        0
       ]
     },
     "_eulerAngles": {
@@ -570,38 +576,31 @@
   },
   {
     "__type__": "cc.Node",
-    "_name": "Background",
-    "_objFlags": 512,
+    "_name": "Label",
+    "_objFlags": 0,
     "_parent": {
       "__id__": 10
     },
-    "_children": [
-      {
-        "__id__": 12
-      }
-    ],
+    "_children": [],
     "_active": true,
     "_components": [
       {
-        "__id__": 14
-      },
-      {
-        "__id__": 15
+        "__id__": 12
       }
     ],
     "_prefab": null,
     "_opacity": 255,
     "_color": {
       "__type__": "cc.Color",
-      "r": 255,
-      "g": 255,
-      "b": 255,
+      "r": 33,
+      "g": 14,
+      "b": 250,
       "a": 255
     },
     "_contentSize": {
       "__type__": "cc.Size",
-      "width": 350,
-      "height": 150
+      "width": 300,
+      "height": 100
     },
     "_anchorPoint": {
       "__type__": "cc.Vec2",
@@ -613,7 +612,7 @@
       "ctor": "Float64Array",
       "array": [
         0,
-        -20,
+        0,
         0,
         0,
         0,
@@ -621,7 +620,7 @@
         1,
         1,
         1,
-        0
+        1
       ]
     },
     "_eulerAngles": {
@@ -635,34 +634,69 @@
     "_is3DNode": false,
     "_groupIndex": 0,
     "groupIndex": 0,
-    "_id": "47HO3ZbotOO43aKp4rJVNV"
+    "_id": "96t7hyyopP6rYtOt/OAFxd"
+  },
+  {
+    "__type__": "cc.Label",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 11
+    },
+    "_enabled": true,
+    "_materials": [
+      {
+        "__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
+      }
+    ],
+    "_srcBlendFactor": 770,
+    "_dstBlendFactor": 771,
+    "_string": "ĐẬP",
+    "_N$string": "ĐẬP",
+    "_fontSize": 60,
+    "_lineHeight": 65,
+    "_enableWrapText": false,
+    "_N$file": {
+      "__uuid__": "63d032ad-e87d-42a0-84a8-137e2034682c"
+    },
+    "_isSystemFontUsed": false,
+    "_spacingX": 0,
+    "_batchAsBitmap": false,
+    "_styleFlags": 0,
+    "_underlineHeight": 0,
+    "_N$horizontalAlign": 1,
+    "_N$verticalAlign": 1,
+    "_N$fontFamily": "Arial",
+    "_N$overflow": 1,
+    "_N$cacheMode": 1,
+    "_id": "a1mHA4RBFJ248dwjl+kdCc"
   },
   {
     "__type__": "cc.Node",
-    "_name": "Label",
-    "_objFlags": 512,
+    "_name": "Loading",
+    "_objFlags": 0,
     "_parent": {
-      "__id__": 11
+      "__id__": 10
     },
     "_children": [],
     "_active": true,
     "_components": [
       {
-        "__id__": 13
+        "__id__": 14
       }
     ],
     "_prefab": null,
     "_opacity": 255,
     "_color": {
       "__type__": "cc.Color",
-      "r": 33,
-      "g": 14,
-      "b": 250,
+      "r": 255,
+      "g": 255,
+      "b": 255,
       "a": 255
     },
     "_contentSize": {
       "__type__": "cc.Size",
-      "width": 300,
+      "width": 100,
       "height": 100
     },
     "_anchorPoint": {
@@ -675,7 +709,7 @@
       "ctor": "Float64Array",
       "array": [
         0,
-        20,
+        2,
         0,
         0,
         0,
@@ -697,49 +731,14 @@
     "_is3DNode": false,
     "_groupIndex": 0,
     "groupIndex": 0,
-    "_id": "96t7hyyopP6rYtOt/OAFxd"
-  },
-  {
-    "__type__": "cc.Label",
-    "_name": "",
-    "_objFlags": 0,
-    "node": {
-      "__id__": 12
-    },
-    "_enabled": true,
-    "_materials": [
-      {
-        "__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
-      }
-    ],
-    "_srcBlendFactor": 770,
-    "_dstBlendFactor": 771,
-    "_string": "ĐẬP",
-    "_N$string": "ĐẬP",
-    "_fontSize": 60,
-    "_lineHeight": 65,
-    "_enableWrapText": false,
-    "_N$file": {
-      "__uuid__": "63d032ad-e87d-42a0-84a8-137e2034682c"
-    },
-    "_isSystemFontUsed": false,
-    "_spacingX": 0,
-    "_batchAsBitmap": false,
-    "_styleFlags": 0,
-    "_underlineHeight": 0,
-    "_N$horizontalAlign": 1,
-    "_N$verticalAlign": 1,
-    "_N$fontFamily": "Arial",
-    "_N$overflow": 1,
-    "_N$cacheMode": 1,
-    "_id": "a1mHA4RBFJ248dwjl+kdCc"
+    "_id": "23SoiyH9hB5q5Q70bGirrp"
   },
   {
     "__type__": "cc.Sprite",
     "_name": "",
     "_objFlags": 0,
     "node": {
-      "__id__": 11
+      "__id__": 13
     },
     "_enabled": true,
     "_materials": [
@@ -750,9 +749,9 @@
     "_srcBlendFactor": 770,
     "_dstBlendFactor": 771,
     "_spriteFrame": {
-      "__uuid__": "85bb5d50-034a-457e-9b4c-349c69f5b672"
+      "__uuid__": "133b7ec9-8788-4307-9fa1-dfd3968544aa"
     },
-    "_type": 1,
+    "_type": 0,
     "_sizeMode": 0,
     "_fillType": 0,
     "_fillCenter": {
@@ -764,34 +763,7 @@
     "_fillRange": 0,
     "_isTrimmedMode": true,
     "_atlas": null,
-    "_id": "d7RrxzZu5O26E+LNmx8Fyb"
-  },
-  {
-    "__type__": "cc.Widget",
-    "_name": "",
-    "_objFlags": 0,
-    "node": {
-      "__id__": 11
-    },
-    "_enabled": true,
-    "alignMode": 0,
-    "_target": null,
-    "_alignFlags": 45,
-    "_left": -25,
-    "_right": -25,
-    "_top": -5,
-    "_bottom": -45,
-    "_verticalCenter": 0,
-    "_horizontalCenter": 0,
-    "_isAbsLeft": true,
-    "_isAbsRight": true,
-    "_isAbsTop": true,
-    "_isAbsBottom": true,
-    "_isAbsHorizontalCenter": true,
-    "_isAbsVerticalCenter": true,
-    "_originalWidth": 100,
-    "_originalHeight": 40,
-    "_id": "e9GFN+nmpKgZ0AP+pmhqho"
+    "_id": "00sk/KT6RBSKQn7/VNkC5a"
   },
   {
     "__type__": "cc.Button",
@@ -871,10 +843,42 @@
       "__uuid__": "29158224-f8dd-4661-a796-1ffab537140e"
     },
     "_N$target": {
-      "__id__": 11
+      "__id__": 10
     },
     "_id": "f90tlUC7RA1YLuKG15c4Pu"
   },
+  {
+    "__type__": "cc.Sprite",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 10
+    },
+    "_enabled": true,
+    "_materials": [
+      {
+        "__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
+      }
+    ],
+    "_srcBlendFactor": 770,
+    "_dstBlendFactor": 771,
+    "_spriteFrame": {
+      "__uuid__": "85bb5d50-034a-457e-9b4c-349c69f5b672"
+    },
+    "_type": 1,
+    "_sizeMode": 0,
+    "_fillType": 0,
+    "_fillCenter": {
+      "__type__": "cc.Vec2",
+      "x": 0,
+      "y": 0
+    },
+    "_fillStart": 0,
+    "_fillRange": 0,
+    "_isTrimmedMode": true,
+    "_atlas": null,
+    "_id": "c81W8jWQ5CebeONYgoGQTR"
+  },
   {
     "__type__": "cc.Node",
     "_name": "beer-bottle-rolling-on-a-sidewalk-82234",

assets/Scenes/main.fire

@@ -665,9 +665,6 @@
       "__id__": 7
     },
     "_enabled": true,
-    "rollingSound": {
-      "__id__": 9
-    },
     "breakingSound": {
       "__id__": 13
     },
@@ -18259,7 +18256,7 @@
   {
     "__type__": "cc.Node",
     "_name": "Background",
-    "_objFlags": 512,
+    "_objFlags": 0,
     "_parent": {
       "__id__": 469
     },
@@ -18289,7 +18286,7 @@
     "_contentSize": {
       "__type__": "cc.Size",
       "width": 300,
-      "height": 120
+      "height": 110
     },
     "_anchorPoint": {
       "__type__": "cc.Vec2",
@@ -18328,7 +18325,7 @@
   {
     "__type__": "cc.Node",
     "_name": "Label",
-    "_objFlags": 512,
+    "_objFlags": 0,
     "_parent": {
       "__id__": 470
     },
@@ -18363,7 +18360,7 @@
       "ctor": "Float64Array",
       "array": [
         0,
-        10,
+        1.632,
         0,
         0,
         0,
@@ -18467,8 +18464,8 @@
     "_alignFlags": 45,
     "_left": 0,
     "_right": 0,
-    "_top": 0,
-    "_bottom": 0,
+    "_top": 5,
+    "_bottom": 5,
     "_verticalCenter": 0,
     "_horizontalCenter": 0,
     "_isAbsLeft": true,

assets/resources/load-icon-png-7957.png.meta

+{
+  "ver": "2.3.7",
+  "uuid": "2e4b1664-6b27-4287-a3e3-9e12940e70d8",
+  "importer": "texture",
+  "type": "sprite",
+  "wrapMode": "clamp",
+  "filterMode": "bilinear",
+  "premultiplyAlpha": false,
+  "genMipmaps": false,
+  "packable": true,
+  "width": 178,
+  "height": 178,
+  "platformSettings": {},
+  "subMetas": {
+    "load-icon-png-7957": {
+      "ver": "1.0.6",
+      "uuid": "133b7ec9-8788-4307-9fa1-dfd3968544aa",
+      "importer": "sprite-frame",
+      "rawTextureUuid": "2e4b1664-6b27-4287-a3e3-9e12940e70d8",
+      "trimType": "auto",
+      "trimThreshold": 1,
+      "rotated": false,
+      "offsetX": 0,
+      "offsetY": 0,
+      "trimX": 0,
+      "trimY": 0,
+      "width": 178,
+      "height": 178,
+      "rawWidth": 178,
+      "rawHeight": 178,
+      "borderTop": 0,
+      "borderBottom": 0,
+      "borderLeft": 0,
+      "borderRight": 0,
+      "subMetas": {}
+    }
+  }
+}
\ No newline at end of file

assets/resources/popup/Group 1321316338 (1).png.meta

@@ -17,15 +17,15 @@
       "uuid": "5779a8a5-b352-4394-976c-55de90c8d79d",
       "importer": "sprite-frame",
       "rawTextureUuid": "7a24c42a-1426-433f-ba40-edc0989e9546",
-      "trimType": "auto",
+      "trimType": "custom",
       "trimThreshold": 1,
       "rotated": false,
       "offsetX": 0,
-      "offsetY": 0,
+      "offsetY": 10,
       "trimX": 0,
       "trimY": 0,
       "width": 306,
-      "height": 130,
+      "height": 110,
       "rawWidth": 306,
       "rawHeight": 130,
       "borderTop": 0,

assets/resources/popup/Group 1321316338.png.meta

@@ -17,15 +17,15 @@
       "uuid": "85bb5d50-034a-457e-9b4c-349c69f5b672",
       "importer": "sprite-frame",
       "rawTextureUuid": "e24a8162-cc8b-4809-9345-7618c74724ab",
-      "trimType": "auto",
+      "trimType": "custom",
       "trimThreshold": 1,
       "rotated": false,
       "offsetX": 0,
-      "offsetY": 0.5,
+      "offsetY": 8.5,
       "trimX": 0,
       "trimY": 0,
       "width": 162,
-      "height": 73,
+      "height": 57,
       "rawWidth": 162,
       "rawHeight": 74,
       "borderTop": 0,

assets/resources/sprite2.png.meta

@@ -21,11 +21,11 @@
       "trimThreshold": 1,
       "rotated": false,
       "offsetX": 0,
-      "offsetY": 0,
+      "offsetY": -0.5,
       "trimX": 0,
-      "trimY": 0,
+      "trimY": 1,
       "width": 447,
-      "height": 529,
+      "height": 528,
       "rawWidth": 447,
       "rawHeight": 529,
       "borderTop": 0,

assets/scripts/UI/StartScreen.ts

@@ -11,8 +11,17 @@ export default class StartScreen extends cc.Component {
     @property(cc.AudioSource)
     private rollingSound: cc.AudioSource = null;
 
+    private _text: cc.Node = null;
+    private _loading: cc.Node = null;
+    private _btn: cc.Button = null;
+
     protected onLoad(): void {
         this.selectBtnNode.on('click', this.onSelectBtnClick, this);
+
+        this._btn = this.selectBtnNode.getComponent(cc.Button);
+        [this._text, this._loading] = this.selectBtnNode.children;
+        this._loading.active = false;
+
         cc.director.preloadScene('main');
 
         if (!cc.audioEngine.isMusicPlaying()) {
@@ -20,12 +29,21 @@ export default class StartScreen extends cc.Component {
         }
         eventTarget.on(PLAY_ROLLING_SOUND, this.playRollingSound, this);
     }
-    
+
     private playRollingSound() {
         this.rollingSound.play();
     }
 
     private onSelectBtnClick() {
+        this._text.active = false;
+        this._loading.active = true;
+        this._btn.interactable = false;
+
+        cc.tween(this._loading)
+            .repeatForever(cc.tween(this._loading).by(0.5, { angle: 90 }))
+            .start();
+
+        this.selectBtnNode
         cc.director.loadScene('main');
     }
 }