孙广东 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 interfacethis.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() 函数。

可视化编程

毕竟是国人的工具，文档都是中文

http://edn.egret.com/cn/docs/page/1027

http://edn.egret.com/cn/docs/page/936

实战教程：（必看）

http://bbs.egret.com/thread-1878-1-1.html

创建项目选择 EUI 项目：

创建可视化界面

Exml 被绑定到 Ts 文件中使用。（注意名字不要一样！）

本身就是XML

不足的地方有很多，创建的时候应该自动生成 *.Exml 和 *.ts 才好，并且绑定关系自动生成！。还有在界面上可以指定事件才好，或者双击的时候跳转到 *.ts 的事件处理位置上。

资源编辑器

来自 <http://developer.egret.com/cn/github/egret-docs/Wing/editor/resdepot/index.html>

将资源分组，设置九宫格等

EXML可视化编辑器

来自 <http://developer.egret.com/cn/github/egret-docs/Wing/editor/exml/index.html>

白鹭引擎开发H5游戏（项目结构）相关推荐

如何将白鹭引擎开发的游戏通过Egret Native发布到 GooglePlay平台
GooglePlay 平台是很多开发者在海外发布游戏的第一选择,本文将介绍如何将白鹭引擎开发的游戏通过Egret Native 发布到 GooglePlay 平台. 发布前期准备 1.科学上网,登录G ...
Layabox引擎开发H5打地鼠游戏（一）
第一节构造打地鼠界面创建项目并导入资源: 制作打地鼠界面: 加载资源并显示界面: 代码及相关资源下载创建项目并导入资源创建项目本项目没有用到下图文件夹原有的组件,将图片全部删除导入图片制 ...
开发H5游戏引擎的选择：Egret或Laya？
一.H5游戏开发的引擎介绍开发H5游戏的引擎有很多,比如egret.laya.cocos-js等等.这里主要是分析的是egret和laya,因为我们团队是从as3转过来的.所以天然地在有as3基因的 ...
Egret白鹭引擎开发微信小游戏之保存图片到相册
玩家在玩小游戏的过程中,很多时候想要保存一下当前的截图.或者保存游戏内精美的画面到相册,一方面是为了记录在游戏中的美好时刻,另一方面则是能够更好地和朋友们分享我在这游戏中获得的荣耀和快乐,因为我们就会 ...
白鹭引擎开发飞机大战详尽教程（四控制飞机移动）
简介本教程是以飞机大战小游戏作为白鹭的入门,详细的按笔者的开发思路,一步步讲解游戏的开发步骤,内容基本涵盖了白鹭引擎提供的能力,包括界面可视化开发.事件派发.粒子播放(爆炸效果).龙骨帧动画. ...
白鹭引擎开发飞机大战详尽教程（三创建飞机）
简介本教程是以飞机大战小游戏作为白鹭的入门,详细的按笔者的开发思路,一步步讲解游戏的开发步骤,内容基本涵盖了白鹭引擎提供的能力,包括界面可视化开发.事件派发.粒子播放(爆炸效果).龙骨帧动画. ...
白鹭引擎开发微信小游戏： API 调用教程文档
如何在 Egret 中调用小游戏 API 在 Egret 中是可以直接调用小游戏的 API 的,这篇文档简要介绍如何在 Egret 中使用小游戏的 API. 新增 platform.ts 文件在 ...
白鹭引擎开发微信小游戏新手教程文档
开发环境准备 • Egret Launcher 1.0.32 以上版本(包括 1.0.32) • 白鹭引擎 5.1.2 以上版本(包括 5.1.2) • 准备最新版微信开发者工具.下 ...
白鹭引擎能用java吗_白鹭引擎开发3D项目（一）
一.打开Egret Launcher安装Egret 5.3.2引擎. 进入白鹭引擎GitHub(https://github.com/egret-labs/egret-core)下载Egret5.3. ...

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

可视化编程

白鹭引擎开发H5游戏（项目结构）相关推荐

最新文章

热门文章