白鹭引擎游戏开发

• 前言
• 三大引擎对比
  • 开发语言
  • 可扩展性
  • 性能
  • 开发工具链
  • 文档资源
  • 小结
• 开始动手
  • 开始前的准备
  • eui
  • Main
  • 小结
• 开发中遇到的问题
  • 粒子库
  • 资源管理

白鹭引擎（egret），是一款知名度比较高的H5游戏引擎，可以开发H5小游戏。

前言

由于公司业务需要，不得不硬着头皮，开始写H5游戏（主要运用于手机端），之前对于游戏开发完全是陌生领域，突然要开发游戏了，只能说一脸懵逼。

然后，我就开始调研，H5游戏都用的哪些游戏引擎，大致搜索了一下，主要以下几种：

• Egret
• LayaBox
• Cocos2d-js

其它还有一写引擎，但不是主攻游戏的，比如three.js等等，就暂时不提了。

纯小白，也不知道哪个好，就去早对比资料，选择一个入手

三大引擎对比

开发语言

H5游戏引擎主要三大语言：JavaScript,TypeScript,ActionScript3

其中ActionScript3是flash游戏的主要语言，但是，我也不会它，所以，只要关注 JavaScript,TypeScript即可。

游戏是一个复杂的项目，使用ts开发会更加有优势，所以我个人更加偏向于使用TS进行开发，而cocos2d-js不支持ts，先给个差评

可扩展性

说是H5游戏，其实后续还要求移植到微信小游戏中。当然，其它可能还有 3d需求，vr需求等等

很好，这三款都是可以支持微信小游戏的开心。这一轮，还是cocos2d-js 相对差一点。

性能

H5游戏，最苦恼的就是性能问题，手机上，各种配置都有，有低配有高配，还有各种浏览器，自身提供的js引擎性能也是有高有底。如果性能不行，总是被用户投诉也是非常尴尬的事情。

这里看来还是 Cocos2d-js 最差，LayaBox 性能最好

开发工具链

很幸运，Egret、Layabox、Cocos2d-JS这三个引擎，在工具链方面都提供足够全面的支撑。

其中Layabox 的工具链最完善，Egret也提供了一系列工具

文档资源

三款引擎官方文档都齐全，相对来说，Cocos2d-JS目前支持力度不行。

小结

基本上可以排除Cocos2d-JS了，就是在Egret与Layabox二选一，不过我个人感觉，Layabox 更加面向 flash 游戏开发者转型，我反正是做小游戏，而且不关心flash，也没有flash基础，还是使用名气更加大的Egret好了。

开始动手

引擎也选择好了，就开始动手撸代码了。

开始前的准备

https://www.egret.com/ 高大上的官网，直接下载引擎Egret Engine.

安装之后，双击打开，下载工具Egret Wing3(IDE)、Texture Merger(帧动画制作工具). 别的软件暂时没啥用（主要是我水平渣）

eui

创建工程的时候，有点傻眼，好多选择，最终考虑到我们的游戏设计师出生于网页设计，大量类似网页的元素存在，还是勾上eui好了。

简单介绍一下eui，其实eui在我看来就是模拟HTML的dom。

因为是在canvas中，所以本身没有dom，这样游戏中的一些弹窗，滚动浏览一类的东西，需要自己做，omg，不会。。。 所以最终借助EUI这种东西，写一个叫exml，没错其实就是xml，只是egret进行定制版本而已。。。

简单的说，就是你写 xml来作为dom节点，egret内置几种类型，来模拟常见的几种HTML标签，当然只是比较类似，做不到一模一样，也没有css，但是可以用js进行类似css的样式调整。有点像react native中使用jsx来进行布局，调整样式。

所以，我这样的一直是纯H5前端开发的，还是老老实实选上eui。方便属性很多。

Main

做游戏和一般的前端开发不一样，有一个主函数入口，一起都从 main 函数开始（有点类似c++）

白鹭引擎也是从Main函数开始创建，进行场景进入与切换。

小结

白鹭引擎本身提供了几个库，可以直接用它的api写代码了，不需要了解canvas的底层api了，渲染、性能等等，它都帮你解决了。

开发中遇到的问题

粒子库

白鹭引擎没有提供粒子库，所以需要使用第三方的库，而第三方的库，导入项目，确实麻烦，各种修改之后才成功。

资源管理