完成首页

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.meta

@@ -0,0 +1,6 @@
+{
+  "ver": "1.0.1",
+  "uuid": "7b81d4e8-ec84-4716-968d-500ac1d78a54",
+  "isGroup": false,
+  "subMetas": {}
+}

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

@@ -0,0 +1,36 @@
+{
+  "ver": "2.3.4",
+  "uuid": "faefe167-15a3-45f1-8281-920ba11dd0f6",
+  "type": "sprite",
+  "wrapMode": "clamp",
+  "filterMode": "bilinear",
+  "premultiplyAlpha": false,
+  "genMipmaps": false,
+  "packable": true,
+  "width": 1350,
+  "height": 1350,
+  "platformSettings": {},
+  "subMetas": {
+    "avatar": {
+      "ver": "1.0.4",
+      "uuid": "ee4860e7-78d7-4f1a-a1e2-e2c9201ef1b0",
+      "rawTextureUuid": "faefe167-15a3-45f1-8281-920ba11dd0f6",
+      "trimType": "auto",
+      "trimThreshold": 1,
+      "rotated": false,
+      "offsetX": 0,
+      "offsetY": 0,
+      "trimX": 0,
+      "trimY": 0,
+      "width": 1350,
+      "height": 1350,
+      "rawWidth": 1350,
+      "rawHeight": 1350,
+      "borderTop": 0,
+      "borderBottom": 0,
+      "borderLeft": 0,
+      "borderRight": 0,
+      "subMetas": {}
+    }
+  }
+}

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

@@ -0,0 +1,36 @@
+{
+  "ver": "2.3.4",
+  "uuid": "e39bafdb-a71e-4fd7-8450-1fa436d9c50a",
+  "type": "sprite",
+  "wrapMode": "clamp",
+  "filterMode": "bilinear",
+  "premultiplyAlpha": false,
+  "genMipmaps": false,
+  "packable": true,
+  "width": 200,
+  "height": 200,
+  "platformSettings": {},
+  "subMetas": {
+    "back": {
+      "ver": "1.0.4",
+      "uuid": "714299b3-6ffd-4ba5-a166-296176854549",
+      "rawTextureUuid": "e39bafdb-a71e-4fd7-8450-1fa436d9c50a",
+      "trimType": "auto",
+      "trimThreshold": 1,
+      "rotated": false,
+      "offsetX": 3,
+      "offsetY": 3,
+      "trimX": 23,
+      "trimY": 7,
+      "width": 160,
+      "height": 180,
+      "rawWidth": 200,
+      "rawHeight": 200,
+      "borderTop": 0,
+      "borderBottom": 0,
+      "borderLeft": 0,
+      "borderRight": 0,
+      "subMetas": {}
+    }
+  }
+}

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

@@ -0,0 +1,36 @@
+{
+  "ver": "2.3.4",
+  "uuid": "2451b5cb-c23f-44c9-99c7-49da350ca9b1",
+  "type": "sprite",
+  "wrapMode": "clamp",
+  "filterMode": "bilinear",
+  "premultiplyAlpha": false,
+  "genMipmaps": false,
+  "packable": true,
+  "width": 345,
+  "height": 132,
+  "platformSettings": {},
+  "subMetas": {
+    "btn": {
+      "ver": "1.0.4",
+      "uuid": "847da4e2-76e3-4ff9-9314-713438721842",
+      "rawTextureUuid": "2451b5cb-c23f-44c9-99c7-49da350ca9b1",
+      "trimType": "auto",
+      "trimThreshold": 1,
+      "rotated": false,
+      "offsetX": 0,
+      "offsetY": 0.5,
+      "trimX": 0,
+      "trimY": 0,
+      "width": 345,
+      "height": 131,
+      "rawWidth": 345,
+      "rawHeight": 132,
+      "borderTop": 61.5,
+      "borderBottom": 59.5,
+      "borderLeft": 114,
+      "borderRight": 127,
+      "subMetas": {}
+    }
+  }
+}

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

@@ -0,0 +1,36 @@
+{
+  "ver": "2.3.4",
+  "uuid": "b7a2debd-36ee-4af0-abf4-1fbde3a8cb9a",
+  "type": "sprite",
+  "wrapMode": "clamp",
+  "filterMode": "bilinear",
+  "premultiplyAlpha": false,
+  "genMipmaps": false,
+  "packable": true,
+  "width": 258,
+  "height": 258,
+  "platformSettings": {},
+  "subMetas": {
+    "ewm": {
+      "ver": "1.0.4",
+      "uuid": "802b4004-09af-4e51-9f68-21dbc96a0e02",
+      "rawTextureUuid": "b7a2debd-36ee-4af0-abf4-1fbde3a8cb9a",
+      "trimType": "auto",
+      "trimThreshold": 1,
+      "rotated": false,
+      "offsetX": 0,
+      "offsetY": 0,
+      "trimX": 0,
+      "trimY": 0,
+      "width": 258,
+      "height": 258,
+      "rawWidth": 258,
+      "rawHeight": 258,
+      "borderTop": 0,
+      "borderBottom": 0,
+      "borderLeft": 0,
+      "borderRight": 0,
+      "subMetas": {}
+    }
+  }
+}

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

@@ -0,0 +1,36 @@
+{
+  "ver": "2.3.4",
+  "uuid": "8e1ba190-72f0-4014-9bd1-03fd704b1ae2",
+  "type": "sprite",
+  "wrapMode": "clamp",
+  "filterMode": "bilinear",
+  "premultiplyAlpha": false,
+  "genMipmaps": false,
+  "packable": true,
+  "width": 2,
+  "height": 2,
+  "platformSettings": {},
+  "subMetas": {
+    "singleColor": {
+      "ver": "1.0.4",
+      "uuid": "0f531716-c3f6-47e8-be65-4248dfca78d8",
+      "rawTextureUuid": "8e1ba190-72f0-4014-9bd1-03fd704b1ae2",
+      "trimType": "auto",
+      "trimThreshold": 1,
+      "rotated": false,
+      "offsetX": 0,
+      "offsetY": 0,
+      "trimX": 0,
+      "trimY": 0,
+      "width": 2,
+      "height": 2,
+      "rawWidth": 2,
+      "rawHeight": 2,
+      "borderTop": 0,
+      "borderBottom": 0,
+      "borderLeft": 0,
+      "borderRight": 0,
+      "subMetas": {}
+    }
+  }
+}