1

egret/index.html

@@ -37,6 +37,7 @@
     <script src="libs/security.js"></script>
     <script src="libs/downloadApp.js"></script>
     <script>
+        window['development']=true;
         var gameId = 1;
         var CFG = {
             appInfo: {

egret/libs/new_wx/MainBase.ts

@@ -84,12 +84,6 @@ export default class MainBase extends eui.UILayer {
         DataManager.ins.gameCfgData = window['CFG'];
         DataManager.ins.gameCfgData.gameInfo.gameId = window["gameId"];
 
-        setTimeout(() => {
-            console.log('stageHeight', this.stage.stageHeight);
-            console.log('height', this.stage.height);
-        }, 2000);
-
-
         layers.init(this);
         Loading.init(layers.topLayer);
         PanelCtrl.instance.init(layers.popupLayer);
@@ -99,6 +93,8 @@ export default class MainBase extends eui.UILayer {
 
         this.registerModules();
 
+        this.loadFirstScreen();
+        this.loadAtlas();
         this.getData();
         RES.setMaxLoadingThread(10);
         this.runGame().catch(e => {
@@ -106,6 +102,45 @@ export default class MainBase extends eui.UILayer {
         })
     }
 
+    loadAtlas() {
+        if (!window['development']) {
+            const urlJSON = getResPath() + "resource/TextureMerger/loading.json";
+            const request = new egret.HttpRequest();
+            request.open(urlJSON, egret.HttpMethod.GET);
+            request.send();
+
+            const url = getResPath() + "resource/TextureMerger/loading.png";
+            const imageLoader = new egret.ImageLoader();
+            imageLoader.load(url);
+        }
+    }
+
+    _firstBgLoaded = false;
+    loadFirstScreen() {
+        this.loadFirstBG((bitmap: egret.Bitmap) => {
+            const t = Date.now() - window['__startTime__'];
+            console.log(`首屏显示时间：${t}ms`);
+            layers.addFirstBackground(bitmap);
+            this._firstBgLoaded = true;
+            this.check();
+        });
+    }
+
+    loadFirstBG(callback) {
+        const onImageLoaded = (e: egret.Event) => {
+            const imageLoader: egret.ImageLoader = e.currentTarget;
+            const bitmapData: egret.BitmapData = imageLoader.data;
+            const texture = new egret.Texture();
+            texture._setBitmapData(bitmapData);
+            const bitmap = new egret.Bitmap(texture);
+            callback(bitmap);
+        }
+        const imageLoader = new egret.ImageLoader();
+        imageLoader.once(egret.Event.COMPLETE, onImageLoaded, this);
+        const url = getResPath() + "resource/assets/startScene/bg.jpg"
+        imageLoader.load(url);
+    }
+
     private async runGame() {
         await this.loadResource()
         this.createGameScene();
@@ -133,12 +168,25 @@ export default class MainBase extends eui.UILayer {
         })
     }
 
-
     /**
      * 创建场景界面
      * Create scene interface
      */
+    _startSceneReady = false;
     protected createGameScene() {
-        SceneCtrl.instance.change(ModuleTypes.START_SCENE);
+        SceneCtrl.instance.change(ModuleTypes.START_SCENE, null, () => {
+            this._startSceneReady = true;
+            this.check();
+        });
+    }
+
+    check() {
+        if (this._startSceneReady && this._firstBgLoaded) {
+            layers.removeFirstBackground();
+            const t = Date.now() - window['__startTime__'];
+            console.log(`start scene显示时间：${t}ms`);
+            //开始场景图集和开始场景背景全部加载完成并显示
+        }
+
     }
 }
\ No newline at end of file

egret/libs/new_wx/components/Alert.ts

@@ -6,7 +6,7 @@ export default class Alert extends Panel {
         this.data.btnTxt = btnTxt || '确定';
     }
 
-    protected get skinKey() { return 'Alert' }
+     get skinKey() { return 'Alert' }
 
     protected get closeBtns(): eui.Button[] {
         return [this['closeBtn']]

egret/libs/new_wx/components/ComponentBase.ts

@@ -4,6 +4,9 @@ export default class ComponentBase extends eui.Component {
     constructor() {
         super();
         this.data = {};
+    }
+
+    loadSkin() {
         this.skinName = getSkinPath(this.skinKey);
         if (this.skin) {
             this.onSkinComplete();
@@ -20,7 +23,7 @@ export default class ComponentBase extends eui.Component {
 
     }
 
-    protected get skinKey() { return null }
+    get skinKey():string { return null }
 
     protected onSkinComplete() {
         this.initEvents();

egret/libs/new_wx/components/HTMLRulePanel.ts

@@ -53,5 +53,5 @@ export default class HTMLRulePanel extends Panel {
         }
     }
 
-    protected get skinKey() { return 'Rule' }
+     get skinKey() { return 'Rule' }
 }
\ No newline at end of file

egret/libs/new_wx/components/Loading.ts

@@ -10,6 +10,7 @@ export default class Loading extends ComponentBase {
         super();
         this.horizontalCenter = 0;
         this.verticalCenter = 0;
+        this.loadSkin();
     }
 
     show() {
@@ -38,5 +39,5 @@ export default class Loading extends ComponentBase {
         this.data.speed += 5;
     }
 
-    protected get skinKey() { return 'Loading' }
+     get skinKey() { return 'Loading' }
 }

egret/libs/new_wx/components/OptionsPanel.ts

@@ -33,5 +33,5 @@ export default class OptionsPanel extends Panel {
         return `第${data['scopeOrigin']}名`;
     }
 
-    protected get skinKey() { return 'Options' }
+     get skinKey() { return 'Options' }
 }
\ No newline at end of file

egret/libs/new_wx/components/PlaySceneBase.ts

@@ -18,5 +18,5 @@ export default class PlaySceneBase extends Scene {
 
         }, this.score)
     }
-    protected get skinKey() { return 'Play' }
+     get skinKey() { return 'Play' }
 }
\ No newline at end of file

egret/libs/new_wx/components/PrizePanel.ts

@@ -53,7 +53,7 @@ export default class PrizePanel extends Panel {
 
     img: eui.Image;
     useBtn: eui.Button;
-    protected get skinKey() { return 'Prize' }
+     get skinKey() { return 'Prize' }
 
     protected get closeBtns(): eui.Button[] {
         return [this['closeBtn']]

egret/libs/new_wx/components/RankPanel.ts

@@ -91,5 +91,5 @@ export default class RankPanel extends Panel {
     }
 
 
-    protected get skinKey() { return 'Rank' }
+     get skinKey() { return 'Rank' }
 }
\ No newline at end of file

egret/libs/new_wx/components/RulePanel.ts

@@ -21,5 +21,5 @@ export default class RulePanel extends Panel {
         this.labContent.textFlow = (new HtmlTextParser).parser(DataManager.ins.getRuleData.ruleText);
     }
 
-    protected get skinKey() { return 'Rule' }
+     get skinKey() { return 'Rule' }
 }
\ No newline at end of file

egret/libs/new_wx/components/StartSceneBase.ts

@@ -93,5 +93,5 @@ export default class StartSceneBase extends Scene {
         PanelCtrl.instance.show(ModuleTypes.RANK_PANEL);
     }
 
-    protected get skinKey() { return 'Start' }
+     get skinKey() { return 'Start' }
 }
\ No newline at end of file

egret/libs/new_wx/ctrls/panelCtrl.ts

 import { ModuleTypes } from "../types/sceneTypes";
 import Panel from "../components/Panel";
+import Loading from "../components/Loading";
 export default class PanelCtrl {
     private _parent: egret.Sprite;
     private _mask: egret.Sprite;
@@ -13,14 +14,27 @@ export default class PanelCtrl {
     }
 
     show(type: ModuleTypes, data?) {
-        this.addMask();
         const cls = this._panelClassMap[type];
         const panel: Panel = new cls(data);
+        this.addMask();
+        if (!window['development']) {
+            Loading.instace.show();
+            RES.getResByUrl(`${panel.skinKey.toLowerCase()}_json`, (sheet: egret.SpriteSheet) => {
+                Loading.instace.hide();
+                this.showAfterLoadAtlas(panel, data);
+            }, this, RES.ResourceItem.TYPE_SHEET);
+        } else {
+            this.showAfterLoadAtlas(panel, data);
+        }
+        return panel;
+    }
+
+    showAfterLoadAtlas(panel: Panel, data) {
+        panel.loadSkin();
         this._current = panel;
         panel.start(data);
         this.add(panel);
         egret.Tween.get(panel).set({ y: -200 }).to({ y: 0 }, 500, egret.Ease.getBackOut(2));
-        return panel;
     }
 
     addMask() {
@@ -31,7 +45,7 @@ export default class PanelCtrl {
             this._mask.graphics.drawRect(0, 0, 750, 1624);
             this._mask.graphics.endFill();
         }
-        this._mask.alpha=1;
+        this._mask.alpha = 1;
         this._parent.addChild(this._mask);
     }
     removeMask() {

egret/libs/new_wx/ctrls/sceneCtrl.ts

 import { ModuleTypes } from "../types/sceneTypes";
 import Scene from "../components/Scene";
+import Loading from "../components/Loading";
 export default class SceneCtrl {
     private _parent: egret.Sprite;
     private _currentScene: Scene;
+    private _mask: egret.Sprite;
 
     static _instance: SceneCtrl;
     static get instance() {
@@ -12,15 +14,41 @@ export default class SceneCtrl {
         this._parent = parent;
     }
 
-    change(type: ModuleTypes) {
+    change(type: ModuleTypes, data?, onComplete?: Function) {
+        const cls = this._sceneClassMap[type];
+        const scene: Scene = new cls();
+        if (!window['development']) {
+            Loading.instace.show();
+            RES.getResByUrl(`${scene.skinKey.toLowerCase()}_json`, (sheet: egret.SpriteSheet) => {
+                Loading.instace.hide();
+                this.showAfterLoadAtlas(scene, data, onComplete);
+            }, this, RES.ResourceItem.TYPE_SHEET);
+        } else {
+            this.showAfterLoadAtlas(scene, data, onComplete);
+        }
+    }
+
+    showAfterLoadAtlas(scene: Scene, data, onComplete: Function) {
         if (this._currentScene) {
             this._currentScene.destroy();
             this._parent.removeChild(this._currentScene);
         }
-        const cls = this._sceneClassMap[type];
-        const scene: Scene = new cls();
+        scene.loadSkin();
         scene.start();
         this.addToStage(scene);
+        onComplete && onComplete();
+    }
+
+    addMask() {
+        if (!this._mask) {
+            this._mask = new egret.Sprite();
+            this._mask.touchEnabled = true;
+            this._mask.graphics.beginFill(0, .7);
+            this._mask.graphics.drawRect(0, 0, 750, 1624);
+            this._mask.graphics.endFill();
+        }
+        this._mask.alpha = 1;
+        this._parent.addChild(this._mask);
     }
 
     private addToStage(scene: Scene) {

egret/libs/new_wx/views/layers.ts

@@ -2,16 +2,36 @@ class Layers extends eui.UILayer {
     private _topLayer: egret.Sprite;
     private _popupLayer: egret.Sprite;
     private _sceneLayer: egret.Sprite;
+    private _bottomLayer: egret.Sprite;
     init(root: eui.UILayer) {
         root.addChild(this);
         this._topLayer = new egret.Sprite();
         this._popupLayer = new egret.Sprite();
         this._sceneLayer = new egret.Sprite();
+        this._bottomLayer = new egret.Sprite();
+        this.addChild(this._bottomLayer);
         this.addChild(this._sceneLayer);
         this.addChild(this._popupLayer);
         this.addChild(this._topLayer);
     }
 
+    _removeTag: number;
+    _bg: egret.Bitmap;
+    addFirstBackground(bitmap: egret.Bitmap): any {
+        if (!this._removeTag) {
+            this._bg = bitmap;
+            this._bottomLayer.addChild(bitmap);
+        }
+    }
+
+    removeFirstBackground(): any {
+        this._removeTag = 1;
+        if (this._bg) {
+            this._bottomLayer.removeChild(this._bg);
+            this._bg = null;
+        }
+    }
+
     get topLayer() { return this._topLayer }
     get popupLayer() { return this._popupLayer }
     get sceneLayer() { return this._sceneLayer }

egret/resource/TextureMerger/loading.tmproject

+{"options":{"layoutMath":"2","sizeMode":"2n","useExtension":1,"layoutGap":1,"extend":0},"projectName":"loading","version":5,"files":["../assets/loading/bg.png","../assets/loading/progress.png"]}
\ No newline at end of file

egret/resource/TextureMerger/options.tmproject

+{"options":{"layoutMath":"2","sizeMode":"2n","useExtension":1,"layoutGap":1,"extend":0},"projectName":"options","version":5,"files":["../assets/option/line2.png","../assets/option/prizeBg.png","../assets/option/X-1.png","../assets/option/line.png"]}
\ No newline at end of file

egret/resource/default.res.json

@@ -6,7 +6,7 @@
 		},
 		{
 			"keys": "line2_png,prizeBg_png,X-1_png,line_png",
-			"name": "option"
+			"name": "options"
 		},
 		{
 			"keys": "alertbg_png",
@@ -27,6 +27,10 @@
 		{
 			"keys": "X_png,ruleBg_png",
 			"name": "rule"
+		},
+		{
+			"keys": "bg_png,progress_png",
+			"name": "loading"
 		}
 	],
 	"resources": [
@@ -209,6 +213,16 @@
 			"url": "assets/playscene/testbtn.png",
 			"type": "image",
 			"name": "testbtn_png"
+		},
+		{
+			"url": "assets/loading/bg.png",
+			"type": "image",
+			"name": "bg_png"
+		},
+		{
+			"url": "assets/loading/progress.png",
+			"type": "image",
+			"name": "progress_png"
 		}
 	]
 }
\ No newline at end of file

egret/resource/default.thm.json

@@ -3,6 +3,7 @@
 	"autoGenerateExmlsList": true,
 	"exmls": [
 		"resource/skins/AlertSkin.exml",
+		"resource/skins/LoadingSkin.exml",
 		"resource/skins/OptionItemSkin.exml",
 		"resource/skins/OptionsSkin.exml",
 		"resource/skins/PlaySkin.exml",

egret/resource/skins/LoadingSkin.exml

+<?xml version="1.0" encoding="utf-8"?>
+<e:Skin class="loadingSkin" width="750" height="1206" xmlns:e="http://ns.egret.com/eui" xmlns:w="http://ns.egret.com/wing" xmlns:tween="egret.tween.*">
+	<w:Declarations>
+	</w:Declarations>
+	<e:Image y="288" source="bg_png" horizontalCenter="0"/>
+	<e:Image id="waitImg" source="progress_png" y="380" anchorOffsetX="28" anchorOffsetY="28" horizontalCenter="0" rotation="{data.speed}"/>
+</e:Skin>
\ No newline at end of file