egret白鹭引擎入门（第一章）

最近，空下来准备研究一下用egret来做动画和游戏。

Egret是一套HTML5游戏开发解决方案，产品包含Egret Engine，Egret Wing，EgretVS，Res Depot，Texture Merger，TS Conversion，Egret Feather，Egret Inspector，DragonBones，Lakeshore等。而核心产品是Egret Engine，是一个基于TypeScript语言开发的一个HTML5游戏引擎，其余的大多是开发和辅助工具。

参考 官网 step by step进行安装 + 初步调试

项目创建好之后，我们进入index.html

然后找到对应的data-show-fps和data-show-log，然后将其的值改为true，方便我们观察到游戏运行的实时帧率

设置完之后，run后会是这样滴~

接下来，我们来进行Hello World的入门

找到src下的main.ts

再进入游戏创建场景的函数 createGameScene

加上这么一段：

然后点击 项目 >构建 ，构建成功后，点击 项目 >调试

这时候，我们的hello world dididi 就跑出来啦~

嗯... 是不是很简单，接下来继续

在H5+App领域，白鹭、Layabox、Cocos Creator各自的优劣是什么？

admin2周前 (01-14)JavaScript29

简单聊一下（直接贴PR的同学走点心，你们公司养你们市场部不是贴PR的！）

其实三者的优劣非常明显，看到

@王哲

这么坦率，我也说一下我的理解。

Cocos

优：

Cocos这么多年的市场地位在那里摆着，Cocos的技术底子在那里，所以Cocos还是非常值得信赖的。 Cocos Creator是一个非常好的产品，可以参考Unity ，至于为什么还是请参考Unity

劣：

尺有所长必有所短，往往自己的长处也就是自己的短处

Cocos IDE、Cocos Studio让开发者对于Cocos Creator 非常怀疑（万一哪天被干掉了，虽然@王哲说不会干掉，但是狼来了） Cocos布局H5算是非常早了，但是太早了（懂的人自然懂），后来遇到挫折一度搁浅，错过了发展的黄金时期，现在成熟度和Egret有些距离

Egret

优：

正是由于Cocos当初H5推进的一度搁浅让白鹭能够出现《围住神经猫》这个爆款。至于各个公司发的PR什么引擎适合小游戏，什么引擎适合重度游戏，都是忽悠不懂技术的人。引擎成熟到一定程度，基本上所有引擎的性能差别微乎其微，大家比的都是服务。不展开了，这是产品理念。 上边说了爆款，后边H5市场上最成功的几个H5游戏基本都是Egret开发的，比如挂机类《愚公移山》、传奇类《传奇世界》《决战沙城》、模拟经营类《猫来了》《猪来了》、回合制《梦道》、年度爆款《传奇来了》自然选择了Egret。 与此同时白鹭的H5工作流也越来越完善，目前来看依然是最成熟的H5引擎

劣：

上边说了Egret占据了非常好的时间点切入H5引擎市场，但是转眼间Egret引擎已经三岁了，而H5技术这三年的变化是非常大的，2014年你需要预判技术的发展走向，是选择as、js还是ts，你选择DOM、Canvas还是WebGL等等，没有谁是先知，你可能做对了99件事，但是一件事错了就需要弥补。比如2.5那次版本升级，从GUI转向EUI，很多开发者不解，但是需要做，而这些事Egret、Cocos已经经历了很多次。

Laya

优：

Laya的优势也非常明显，等Laya切入进来的时候H5市场已经非常明朗，先做Canvas然后准备WebGL 没有历史包袱，LayaAir满打满算还没有一年，按照前边Cocos和Egret走过的路快速走一遍，最重要的就是时间。Laya刚刚切入市场的时候推出了LayaBox，这个也是没有经验做了一个非常错误的决定，但是正是因为没有市场份额，所以去年中的时候直接砍掉了LayaBox也没有人会说什么，甚至大家都以为LayaAir就是LayaBox其实是完全不同的引擎。

劣：

时间太短，Cocos和Egret经过的路他没有走过，所以犯了推出LayaBox又砍掉的错误，还没有经历过Egret GUI转向EUI那种问题，因为LayaAir还不到一年，所以成熟度有待商榷。 工作流不完善，需要使用第三方工具自己去组建工作流 最大的劣势就是Cocos有原生行业霸主地位背书，Egret有H5最成功的商业项目背书，而Laya目前没有一个成功的商业项目（月流水1000w以上）

标签: 网页H5

Egret Engine（白鹭引擎）是白鹭时代推出的一款使用TypeScript语言构建的开源免费的移动游戏引擎。通过白鹭引擎，开发者可以快速地创建可以运行在手机App的WebView或者浏览器中的HTML5移动游戏，也可以编译输出成基于Android、iOS、Windows Phone的跨平台原生移动游戏。应用Egret引擎开发HTML5移动游戏，不但能让H5游戏具备牛逼的性能表现，并且效率很高。

项目目录如下：需要关心的有两个文件夹：launcher、src。

launcher 文件夹下面，需要关心的是 index.html文件，改文件是项目的入口。egret帮助建立的，自己可以自行修改里面内容，只要别把加载框架的部分干掉就行。

其中必要说明的是 Id 为 gameDiv 的<div>是游戏引擎用来 *** 作的地方。框架会在改<div>下面自动建立一个<canvas>，然后在这上面绘制游戏界面。可以自行控制gameDiv的样式，别删除或者修改ID就行。launcher文件夹下面暂时没有别的需要关注的了。

src 文件夹下面两个文件，后缀名为ts，是typescript 文件，其实就是javascript 的一个超集而已。其中loadingUI.ts ,暂时也不需要关心，这个是加载网页的时候让用户安心等待的一个提示界面。

下面就是最重要的Main.ts。

标注的两个方法，就是egret对html所干的事情。整个hello world分析就结束了。

egret采用的是typescript 语言，在入口（index.html）文件里面 *** 作 ID 为 gameDiv的标签（在改标签下面增加一个画布<canvas>）。项目启动交给了main.ts(改文件名字可更换)，main.ts会加载预先准备的资源，资源加载完成之后，开始绘制<canvas>里面的内容。

---