完成首页

assets/Scene/Home/Home.ts

@@ -1,14 +1,19 @@
-import BackHomeBtn from "./BackHomeBtn";
-const {ccclass, property} = cc._decorator;
+import BackHomeBtn from './BackHomeBtn';
+const { ccclass, property } = cc._decorator;
+const LOAD_SCENE_MIN_SEC: number = 1.2;
 enum sceneList {
-  "Infinite_bg_scroll" = "背景无限滚动",
-  "Joystick" = "遥控杆",
-  "Coin_fly_to_wallet" = "金币落袋",
-  "Magnifying_mirror" = "放大镜"
+  'Infinite_bg_scroll' = '背景无限滚动',
+  'Joystick' = '遥控杆',
+  'Coin_fly_to_wallet' = '金币落袋',
+  'Magnifying_mirror' = '放大镜'
 }
 
 @ccclass
 export default class Home extends cc.Component {
+  @property(cc.Node)
+  loadingNode: cc.Node = null;
+  @property(cc.ProgressBar)
+  loadingProgress: cc.ProgressBar = null;
   @property(cc.Node)
   scrollContent: cc.Node = null;
   @property(cc.Prefab)
@@ -23,42 +28,83 @@ export default class Home extends cc.Component {
   }
 
   judgeJump() {
-    const sceneName = this.getQueryStringByName("sceneName");
-    const isSameVisit = window["isSameVisit"];
+    const sceneName = this.getQueryStringByName('sceneName');
+    const isSameVisit = window['isSameVisit'];
 
     if (!sceneName) return;
     if (isSameVisit) return;
 
     if (sceneList[sceneName]) {
-      window["isSameVisit"] = true;
+      window['isSameVisit'] = true;
       this.loadScene(sceneName);
     }
   }
 
   getQueryStringByName(name) {
-    let result = window.location.search.match(new RegExp("[\?\&]" + name+ "=([^\&]+)","i"));
-    return result == null || result.length < 1 ? "" : result[1];
+    let result = window.location.search.match(new RegExp('[?&]' + name + '=([^&]+)', 'i'));
+    return result == null || result.length < 1 ? '' : result[1];
   }
 
   initScrollItem() {
     for (let key in sceneList) {
       let scrollItem = cc.instantiate(this.scrollItemPrefab);
 
-      scrollItem.getChildByName("label").getComponent(cc.Label).string = sceneList[key];
-		  scrollItem.on(cc.Node.EventType.TOUCH_END, () => {
-        cc.tween(scrollItem)
-          .to(0.1, { scale: 1.05 })
-          .to(0.1, { scale: 1 })
-          .start();
-        this.loadScene(key);
-      }, this);
+      scrollItem.getChildByName('label').getComponent(cc.Label).string = sceneList[key];
+      scrollItem.on(
+        cc.Node.EventType.TOUCH_END,
+        () => {
+          cc.tween(scrollItem)
+            .to(0.1, { scale: 1.05 })
+            .to(0.1, { scale: 1 })
+            .start();
+          this.loadScene(key);
+        },
+        this
+      );
 
       this.scrollContent.addChild(scrollItem);
     }
   }
 
+  beginLoad: boolean = false;
+  finishLoadFlag: boolean = false;
+  loadTime: number = 0;
+  loadSceneName: string = '';
   loadScene(key) {
-    cc.director.loadScene(key);
-    BackHomeBtn.instance.toggleActive(true);
+    if (this.beginLoad) return;
+    this.loadingProgress.progress = 0;
+    this.loadingNode.active = true;
+    this.beginLoad = true;
+    this.loadSceneName = key;
+
+    cc.director.preloadScene(
+      key,
+      (completedCount, totalCount) => {
+        // 还是做假进度条吧，缓存之后太快了，一闪而过的体验不好
+        // this.loadingProgress.progress = completedCount / totalCount;
+      },
+      (error, asset) => {
+        if (!error) {
+          this.finishLoadFlag = true;
+        } else {
+          this.loadingNode.active = false;
+          this.beginLoad = false;
+          this.loadTime = 0;
+        }
+      }
+    );
+  }
+
+  update(dt) {
+    if (!this.beginLoad) return;
+
+    if (this.loadTime >= LOAD_SCENE_MIN_SEC && this.finishLoadFlag) {
+      this.loadingProgress.progress = 1;
+      BackHomeBtn.instance.toggleActive(true);
+      cc.director.loadScene(this.loadSceneName);
+    } else {
+      this.loadTime += dt;
+      this.loadingProgress.progress = Math.min(this.loadTime / LOAD_SCENE_MIN_SEC, this.finishLoadFlag ? 1 : 0.9);
+    }
   }
 }

assets/Scene/Home/Texture/avatar.png.meta

@@ -1,20 +1,20 @@
 {
   "ver": "2.3.4",
-  "uuid": "1c14c2d0-c971-4bca-a2be-8458a3083f70",
+  "uuid": "faefe167-15a3-45f1-8281-920ba11dd0f6",
   "type": "sprite",
   "wrapMode": "clamp",
   "filterMode": "bilinear",
   "premultiplyAlpha": false,
   "genMipmaps": false,
   "packable": true,
-  "width": 474,
-  "height": 316,
+  "width": 1350,
+  "height": 1350,
   "platformSettings": {},
   "subMetas": {
-    "th": {
+    "avatar": {
       "ver": "1.0.4",
-      "uuid": "c569c4d9-3ae8-496d-ac64-40c32782c594",
-      "rawTextureUuid": "1c14c2d0-c971-4bca-a2be-8458a3083f70",
+      "uuid": "ee4860e7-78d7-4f1a-a1e2-e2c9201ef1b0",
+      "rawTextureUuid": "faefe167-15a3-45f1-8281-920ba11dd0f6",
       "trimType": "auto",
       "trimThreshold": 1,
       "rotated": false,
@@ -22,10 +22,10 @@
       "offsetY": 0,
       "trimX": 0,
       "trimY": 0,
-      "width": 474,
-      "height": 316,
-      "rawWidth": 474,
-      "rawHeight": 316,
+      "width": 1350,
+      "height": 1350,
+      "rawWidth": 1350,
+      "rawHeight": 1350,
       "borderTop": 0,
       "borderBottom": 0,
       "borderLeft": 0,

assets/Scene/Home/Texture/ewm.jpg.meta

@@ -1,20 +1,20 @@
 {
   "ver": "2.3.4",
-  "uuid": "3f716868-44f8-4ff2-9f85-72917cc049da",
+  "uuid": "b7a2debd-36ee-4af0-abf4-1fbde3a8cb9a",
   "type": "sprite",
   "wrapMode": "clamp",
   "filterMode": "bilinear",
   "premultiplyAlpha": false,
   "genMipmaps": false,
   "packable": true,
-  "width": 78,
-  "height": 67,
+  "width": 258,
+  "height": 258,
   "platformSettings": {},
   "subMetas": {
-    "npm_1": {
+    "ewm": {
       "ver": "1.0.4",
-      "uuid": "d4d6a44a-040e-442d-ab8f-1fa461cafd87",
-      "rawTextureUuid": "3f716868-44f8-4ff2-9f85-72917cc049da",
+      "uuid": "802b4004-09af-4e51-9f68-21dbc96a0e02",
+      "rawTextureUuid": "b7a2debd-36ee-4af0-abf4-1fbde3a8cb9a",
       "trimType": "auto",
       "trimThreshold": 1,
       "rotated": false,
@@ -22,10 +22,10 @@
       "offsetY": 0,
       "trimX": 0,
       "trimY": 0,
-      "width": 78,
-      "height": 67,
-      "rawWidth": 78,
-      "rawHeight": 67,
+      "width": 258,
+      "height": 258,
+      "rawWidth": 258,
+      "rawHeight": 258,
       "borderTop": 0,
       "borderBottom": 0,
       "borderLeft": 0,

settings/builder.json

@@ -13,7 +13,7 @@
   "includeSDKBox": false,
   "inlineSpriteFrames": true,
   "inlineSpriteFrames_native": true,
-  "mergeStartScene": false,
+  "mergeStartScene": true,
   "optimizeHotUpdate": false,
   "md5Cache": true,
   "encryptJs": true,

tsconfig.json

@@ -14,4 +14,4 @@
     "build",
     "settings"
   ]
-}
+}