egret 是国内的一款优秀的开发游戏开发引擎，去年的时候曾经了解过，做过一个简单的demo，然后就不了了之了，因为实际工作是用不到的。
但是，近来工作中拿到别人拿给我看到的H5案例，很酷很炫的那种，一看源码，全是egret之类的游戏引擎来做的。其实不难理解，这类引擎都是通过canvas绘制界面，性能必然比DOM要好。试想一下这样的页面如果用DOM来做，恐怕做完之后也是卡顿的不要不要的：
本文只介绍最简单的egret，不是教程，具体的教程、API等参见手册。
工具流
我觉得egret和其他游戏引擎相比最强大的就是它的工具流，有设计师用的，有开发用的，一应俱全。可以在官网找到。
Egret Engine: egret游戏引擎，包括 Game、Tween、EUI、粒子系统等扩展库
Egret Wing: egret的IDE，可以自动构建、发布
Res Depot: egret的资源管理工具，如果不用它，你一定会很头大
Texture Merger: 可以合并纹理集，后面会说到
Egret Inspector: Chrome 调试工具
一般来说，使用上面的工具就可以开始开发我们的小游戏了。
其他几个工具可用可不用。
语言
egret并不是用的JS，而是TypeScript。TS是JS的超集，整体感觉很像Java，据说对C#程序员很友好。
class P2 extends egret.Sprite{
private man: Man;
static initX = -830;
public constructor(){
super();
}
}TS国内资料比较少，这是我找到的一份中文手册：
不需要先学习TS才能使用egret，完全可以边用egret边学习TS，毕竟TS里的很多东西是和JS一样的。
项目构建、发布
介绍完背景，就可以开始使用 egret 了。
使用Egret Wing新建一个项目 Hi，点击下一步
选择舞台宽度和高度以及适配方案，点击完成：
-
可以看到Hi项目的目录
src: 源代码目录，
Main.ts是入口文件libs: 项目中使用的库
resource: 项目中使用的资源（图片、音乐等）
egretProperties.json: 项目配置文件
index.html: 项目入口
构建项目：项目-构建并运行，可以看到最简单的egret项目。
发布：项目-发布，正式包就在
bin-release中
显示对象与显示容器
显示对象：能够参与渲染的对象，都继承自
DisplayObject，Shape是最简单的显示对象显示容器：显示对象的容器，继承自
DisplayObjectContainer，Sprite是最简单的显示容器
关系如下：
DisplayObject
|--- DisplayObjectContainer
|--- Sprite
|--- Stage 舞台
|--- Shape 矢量绘图
|--- Bitmap 位图
|--- TextField 文字显示对象都必须addChild在显示容器中才能够被显示。这里是最简单的例子：
class Main extends egret.DisplayObjectContainer {
public constructor() {
super();
var obj = new egret.Shape;
obj.graphics.beginFill(0x000000);
obj.graphics.drawRect(0,0,100,100);
obj.graphics.endFill();
obj.x = 100;
obj.y = 100;
this.addChild(obj);
}
}碰撞检测
游戏中经常需要知道两个物体是否接触，egret对于碰撞检测是很方便的。
var isHit = obj.hitTestPoint(x,y);事件
egret的事件机制与DOM类似，分为捕获阶段、目标阶段、冒泡阶段，也有自定义事件以及触发。
这个其实很好理解，不再多说。
动画
egret的动画系统也很方便：
egret.Tween.get(shp).to({
x: 40
},100)表示100ms内把x移动到40
资源管理
RES 是egret为开发者准备的一套功能完善的资源加载机制。开发者编写游戏时，无须关心资源加载的细节，只需要指定资源，并且在对应的位置中添加相应地执行代码即可。
在resource中，default.res.json是资源配置文件：
-
resources: 资源
name
type
url
-
groups: 资源组
name
keys
不用手写，使用
ResDepot工具即可轻松管理：
使用 b1_png 这张图的时候只要这样其他什么都不用管：
var b1 = new egret.Bitmap(RES.getRes('b1_png'))位图
var img = new egret.Bitmap;
img.texture = RES.getRes('pic_name');
this.addChild(img);getRes 返回的数据并不是位图，而是内容数据，也就是位图纹理，对应 egret.Texture。需要设置位图的texture属性为 getRes 返回的数据，图片才能显示。
纹理集
纹理集，其实就是CSS里的雪碧图。我们可以通过 Texture Merger 轻松制作管理。
比如我们可以用这样的图片:
可以『拼』成这样的动画：
实际上只要这样加载资源即可：
音乐
音乐的播放更加简单
var sound = RES.getRes('music_mp3');
var channel = sound.play()遗漏
egret的内容远远比上面的介绍多得多，还有粒子系统、龙骨骨骼引擎、3D系统、网络请求等等，可以制作出非常复杂、庞大的游戏。可以看 HTML游戏引擎深度测评 里对egret的介绍就知道现在egret能够做出什么样的游戏。
egret为游戏开发提供了完整的工具流，尤其是资源加载，我在开发的时候很舒服，只用关心游戏逻辑就好了。作为前端来说，掌握egret也算是一个课外实践了。总之，好处多多，赶紧使用吧。
献上我使用egret花了3天时间边学边做的项目：
http://huodong.mobilem.360.cn/0422/index.html
我的博客，欢迎订阅
微博粉丝太少，求粉
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。