IT博客汇 | [原]白鹭引擎开发H5游戏（项目结构）

[原]白鹭引擎开发H5游戏（项目结构）

u010019717发表于 2016-12-12 09:29:11

孙广东 2016.12.8

http://blog.csdn.net/u010019717

主要使用 EgretWing （是白鹭扩展的 VisualStudio Code）

新建项目中选择

生成的项目的结构：

src	是TypeScript源码目录
resource	是我们项目中的资源路径，一般我们把图片音频等素材放置asset目录下，json等配置文件放置config目录下，default.res.json是我们用于加载资源的json配置文件，一般不修改名字，后面会讲到怎么使用。
egretProperties	是我们这个项目的一些配置记录信息，一般我们不需要动它。而index.html就是我们游戏的主界面文件。
index.html	我们可以看到游戏界面所需的js，都自动生成并引用好了。这一部分我们不需要也不能手动去修改。
bin-debug	是调试环境编译出来的js
libs	是文件包的引用目录
template	主要是app用到的runtime

　　但是你可以在style标签中修改背景色或者在div属性值中修改配置参数，如渲染的帧率（一般我们设成60，如果是计算量大的，我们再适当降低），在这里我们可以重新修改刚刚新建游戏时的适配模式、宽高、旋转等；

　　将data-show-fps和data-show-log设成true，我们就可以看到游戏运行的实时帧率了。

　　帧率可以检测游戏运行的流畅度（性能），渲染数量越多，同时计算量越大，性能就越差，掉帧就越多。所以帧率越高，则表示性能越好，流畅度高。

egret.runEgret({})的运行方法，在这里，你可以修改egret的渲染模式，默认是"webgl"。但是如果你需要用到跨域图片资源或者有大量的图片和文字，你最好还是使用"canvas"模式，避免跨域报错和性能问题。

主要熟悉 visualstudio code 就可以很容易上手。点击调试菜单按键或者 F5 就可以运行了。运行窗口中也有切花分辨率和横竖屏切换等！

1、首先要知道入口类：

在index.html页面中声明了入口类（data-entry-class），所以当页面加载完之后，就会自动执行Main类中的构造函数。

　　并且在这个类构建完成后，会自动添加到舞台（stage）。

2、由于Main继承自白鹭的基本容器egret.DisplayObjectContainer并且会自动添加到舞台中，所以在初始化阶段给Main绑定了添加到舞台事件，用于启动界面。

public constructor() {

super();

this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage,this);

}

3、Main被添加到舞台，触发旗下的onAddToStage方法。

运行开到的应该是两个界面一个 Loading 和 Main , 只不过 Loading 太快了。

    private onAddToStage(event:egret.Event) {
        //设置加载进度界面
        //Config to load process interface
        this.loadingView = new LoadingUI();
        this.stage.addChild(this.loadingView);

4、加载配置文件，加载完成后，执行onConfigComplete方法

　　　　移除CONFIG_COMPLETE配置完成事件，分别绑定资源组加载完成（GROUP_COMPLETE）执行的方法、

　　资源组加载出错（GROUP_LOAD_ERROR）、资源文件加载进度（GROUP_PROGRESS）要执行的方法、资源项加载出错（ITEM_LOAD_ERROR）要执行的方法。接着正式开始执行RES.loadGroup（）并加载资源组（默认preload）里面的资源。

    privateonConfigComplete(event:RES.ResourceEvent):void {
       RES.removeEventListener(RES.ResourceEvent.CONFIG_COMPLETE,this.onConfigComplete, this);
       RES.addEventListener(RES.ResourceEvent.GROUP_COMPLETE,this.onResourceLoadComplete, this);
       RES.addEventListener(RES.ResourceEvent.GROUP_LOAD_ERROR,this.onResourceLoadError, this);
       RES.addEventListener(RES.ResourceEvent.GROUP_PROGRESS,this.onResourceProgress, this);
       RES.addEventListener(RES.ResourceEvent.ITEM_LOAD_ERROR,this.onItemLoadError, this);
        RES.loadGroup("preload");
    }

5、正在加载资源，触发RES.ResourceEvent.GROUP_PROGRESS并执行onResourceProgress方法

　　　　在这个过程中，会不断地调用LoadingUI中的公共方法setProgress(event.itemsLoaded,event.itemsTotal);

　　GROUP_PROGRESS事件会返回当前已加载的数量event.itemsLoaded，以及加载资源的总数event.itemsTotal，我们可以利用这两个数值进行一些进度的显示。

6、资源组加载完成，触发RES.ResourceEvent.GROUP_COMPLETE并执行onResourceLoadComplete方法

　　　　将loading页面移出舞台，移除之前绑定的一些加载事件，并且执行createGameScene()方法。

7、开始绘制游戏场景

createGameScene() 函数。