09

Author: Guoshaorui

egret/09-resource.md

@@ -5,19 +5,40 @@ Egret框架入门第一步 - 资源管理和屏幕适配
 
 先来看资源加载方面需要注意的一些事情，游戏开发之前您需要设计一下素材的目录结构，如果存在多套不同分辨率的资源，您可以使用assets/480/,assets/640/这样的方式来设计素材目录结构加以区分，如果只有一套资源，也可以不遵守assets/480/这样的规则，将prefix指向您自己的素材目录即可。
 
-```
-egret.ResourceLoader.prefix = "assets/480/";
-```
-
-加载的实现，推荐使用LoadingController:
-
-```
-var loadingController = new egret.LoadingController();
-```
-
-加载某个资源，将根据设定的ResourceLoader.prefix来获取，您不用重复传入完整路径，只需传入相对于资源根目录的路径。
-```
-loadingController.addResource("egret_icon.png", egret.ResourceLoader.DATA_TYPE_IMAGE);
+加载的实现，推荐使用RES模块:
+
+```
+//使用RES模块，侦听GROUP_COMPLETE事件和GROUP_PROGRESS事件，可以同步显示加载进度，并继续执行加载完成后的逻辑
+RES.addEventListener(RES.ResourceEvent.GROUP_COMPLETE,this.onResourceLoadComplete,this);
+RES.addEventListener(RES.ResourceEvent.GROUP_PROGRESS,this.onResourceProgress,this);
+RES.loadConfig("resources/resource.json","resources/");//加载资源配置文件
+RES.loadGroup("preload");//加载某个资源group
+```
+
+然后将您需要加载的资源，都配置在resource.json中即可，注意路径是相对RES.loadConfig中传递的第二个参数而言的。
+```
+{
+"resources":
+    [
+        {"name":"bgImage","type":"img","url":"assets/bg.jpg"},
+        {"name":"egretIcon","type":"img","url":"assets/egret_icon.png"},
+        {"name":"description","type":"json","url":"config/description.json"},
+        {"name":"icons","type":"sheet","url":"assets/icons.json"},
+        {"name":"monkey_png","type":"img","url":"assets/monkey.png"},
+        {"name":"monkey_json","type":"json","url":"assets/monkey.json"},
+        {"name":"bitmapFont","type":"font","url":"assets/font.fnt"}
+    ],
+
+"groups":
+    [
+        {"name":"preload","keys":"bgImage,egretIcon"},
+        {"name":"demo2","keys":"egretIcon,icons"},
+        {"name":"demo3","keys":"monkey_png,monkey_json"},
+        {"name":"demo4","keys":"bitmapFont"},
+        {"name":"demo7","keys":"egretIcon"},
+        {"name":"demo8","keys":"egretIcon"}
+    ]
+}
 ```
 
 然后来看一下如何设置屏幕适配的策略，首先，先获取所在环境的容器：
@@ -50,6 +71,8 @@ egret.StageDelegate.getInstance().setDesignSize(480, 800, policy);
 ```
 class Demo9 {
 
+    /**加载进度界面*/
+    private loadingView:LoadingUI;
     /**测试用的位图*/
     private logo:egret.Bitmap;
 
@@ -69,22 +92,27 @@ class Demo9 {
         egret.StageDelegate.getInstance().setDesignSize(480, 800, policy);
 
         //--------------------资源加载
-        //设置素材的根目录，如果存在多套不同分辨率的资源，您可以使用assets/480/,assets/640/这样的方式来设计素材目录结构加以区分，
-        //如果只有一套资源，也可以不遵守assets/480/这样的规则，将prefix指向您自己的素材目录即可
-        egret.ResourceLoader.prefix = "assets/480/";
-        var loadingController = new egret.LoadingController();
-        //资源加载，将根据设定的ResourceLoader.prefix来获取，您不用重复传入完整路径，只需传入相对于资源根目录的路径
-        loadingController.addResource("egret_icon.png", egret.ResourceLoader.DATA_TYPE_IMAGE);
-        //设置加载显示
-        loadingController.setLoadingView(new LoadingUI());
-        loadingController.addEventListener(egret.ResourceLoader.LOAD_COMPLETE, this.onResourceLoadComplete, this);
-        loadingController.load();
+        //使用RES模块，侦听GROUP_COMPLETE事件和GROUP_PROGRESS事件，可以同步显示加载进度，并继续执行加载完成后的逻辑
+        RES.addEventListener(RES.ResourceEvent.GROUP_COMPLETE,this.onResourceLoadComplete,this);
+        RES.addEventListener(RES.ResourceEvent.GROUP_PROGRESS,this.onResourceProgress,this);
+        //如果存在多套不同分辨率的资源，您可以使用assets/480/,assets/640/这样的方式来设计素材目录结构加以区分，
+        RES.loadConfig("resources/resource.json","resources/");//加载资源配置文件
+        RES.loadGroup("preload");//加载某个资源group
+
+        //-------------------设置加载进度界面
+        this.loadingView  = new LoadingUI();
+        this.loadingView.addToStage();
+    }
+    /**preload资源组加载进度*/
+    private onResourceProgress(event:RES.ResourceEvent):void {
+        this.loadingView.onProgress(event.itemsLoaded,event.itemsTotal);
     }
     /**显示*/
     private onResourceLoadComplete():void {
+        this.loadingView.removeFromStage();
         var stage = egret.MainContext.instance.stage;//获取Stage引用
         this.logo = new egret.Bitmap();//创建位图
-        this.logo.texture = egret.TextureCache.getInstance().getTexture("egret_icon.png");//设置纹理
+        this.logo.texture = RES.getRes("egretIcon");//设置纹理
         stage.addChild(this.logo);//添加到显示列表
     }
 

egret/demo/HelloEgret/assets/480/icons.json

@@ -1,5 +1,28 @@
 /**
- * Created by apple on 14-2-27.
+ * Copyright (c) 2014,Egret-Labs.org
+ * All rights reserved.
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are met:
+ *
+ *     * Redistributions of source code must retain the above copyright
+ *       notice, this list of conditions and the following disclaimer.
+ *     * Redistributions in binary form must reproduce the above copyright
+ *       notice, this list of conditions and the following disclaimer in the
+ *       documentation and/or other materials provided with the distribution.
+ *     * Neither the name of the Egret-Labs.org nor the
+ *       names of its contributors may be used to endorse or promote products
+ *       derived from this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY EGRET-LABS.ORG AND CONTRIBUTORS "AS IS" AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+ * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ * DISCLAIMED. IN NO EVENT SHALL EGRET-LABS.ORG AND CONTRIBUTORS BE LIABLE FOR ANY
+ * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+ * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+ * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+ * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
 egret_h5 = {};
@@ -8,32 +31,18 @@ egret_h5.prefix = "";
 
 egret_h5.loadScript = function (list, callback) {
     var loaded = 0;
-    if (navigator.userAgent.indexOf("Trident/5") > -1) {
-        //ie9
-        var loadNext = function () {
-            egret_h5.loadSingleScript(egret_h5.prefix + list[loaded], function () {
-                loaded++;
-                if (loaded >= list.length) {
-                    callback();
-                }
-                else {
-                    loadNext();
-                }
-            })
-        };
-        loadNext();
-    }
-    else {
-        list.forEach(function (f, i) {
-
-            egret_h5.loadSingleScript(egret_h5.prefix + f, function () {
-                loaded++;
-                if (loaded >= list.length) {
-                    callback();
-                }
-            })
-        });
-    }
+    var loadNext = function () {
+        egret_h5.loadSingleScript(egret_h5.prefix + list[loaded], function () {
+            loaded++;
+            if (loaded >= list.length) {
+                callback();
+            }
+            else {
+                loadNext();
+            }
+        })
+    };
+    loadNext();
 }
 
 egret_h5.loadSingleScript = function (src, callback) {
@@ -50,21 +59,17 @@ egret_h5.loadSingleScript = function (src, callback) {
 }
 
 egret_h5.startGame = function () {
-    var canvas = document.getElementById(ns_egret.StageDelegate.canvas_name);
-    context = ns_egret.MainContext.instance;
-    context.rendererContext = new ns_egret.HTML5CanvasRenderer(canvas);
-    context.netContext = new ns_egret.HTML5NetContext();
-    context.soundContext = new ns_egret.HTML5SoundContext();
-    context.touchContext = new ns_egret.TouchContext(canvas);
-    context.deviceContext = new ns_egret.HTML5DeviceContext();
-    context.stage = new ns_egret.Stage(canvas.width,canvas.height);
-
-    ns_egret.ResourceLoader.prefix = "assets/480/";
-    ns_egret.RendererContext.CONTENT_SCALE_FACTOR = 1;
-
-//    ns_egret.StageDelegate.getInstance().setResolutionPolicy(1);
-//    ns_egret.StageDelegate.getInstance().setFrameSize(480,400);
-//    ns_egret.StageDelegate.getInstance().setDesignSize(480,400,2);
+    var canvas = document.getElementById(egret.StageDelegate.canvas_name);
+    context = egret.MainContext.instance;
+    context.rendererContext = new egret.HTML5CanvasRenderer(canvas);
+    context.soundContext = new egret.HTML5SoundContext();
+    context.touchContext = new egret.HTML5TouchContext(canvas);
+    context.deviceContext = new egret.HTML5DeviceContext();
+    context.netContext = new egret.HTML5NetContext();
+    context.stage = new egret.Stage(canvas.width, canvas.height);
+;
+    egret.TextureCache.getInstance().prefix = "assets/480/";
+    egret.RendererContext.CONTENT_SCALE_FACTOR = 1;
     context.run();
 
     if (app && app.startGame) {

egret/demo/HelloEgret/launcher/egret_loader.js

@@ -2,7 +2,6 @@
 <html>
 <head>
     <meta charset="utf-8">
-    <meta name="baidu-tc-cerfication" content="bb5e4ac079a479fb5ddcd76557a48ed3"/>
     <title>HelloWorld</title>
     <meta name="viewport"
           content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no,target-densitydpi=device-dpi"/>
@@ -23,20 +22,23 @@
             margin: 0;
             height: 100%;
         }
+        html {
+            -ms-touch-action: none; /* Direct all pointer events to JavaScript code. */
+        }
     </style>
 </head>
 <body>
 <div style="display:inline-block;width:100%; height:100%;margin: 0 auto; background: black; position:relative;"
      id="gameDiv">
     <canvas id="gameCanvas" width="480" height="800" style="background-color: #000000"></canvas>
 </div>
-<script src="../egret/src/egret_file_list.js"></script>
+<script src="bin-debug/lib/egret_file_list.js"></script>
 <script src="launcher/egret_loader.js"></script>
-<script src="src/game_file_list.js"></script>
+<script src="bin-debug/src/game_file_list.js"></script>
 
 <script>
-    egret_h5.preloadScript(egret_file_list, "../egret/src/");
-    egret_h5.preloadScript(game_file_list, "src/");
+    egret_h5.preloadScript(egret_file_list, "bin-debug/lib/");
+    egret_h5.preloadScript(game_file_list, "bin-debug/src/");
     egret_h5.startLoading();
 </script>
 </body>