egret引擎初探

[riskers]

egret 是国内的一款优秀的开发游戏开发引擎，去年的时候曾经了解过，做过一个简单的demo，然后就不了了之了，因为实际工作是用不到的。

但是，近来工作中拿到别人拿给我看到的H5案例，很酷很炫的那种，一看源码，全是egret之类的游戏引擎来做的。其实不难理解，这类引擎都是通过canvas绘制界面，性能必然比DOM要好。试想一下这样的页面如果用DOM来做，恐怕做完之后也是卡顿的不要不要的：

• http://vcreation.kx.is/chinajoy2015/

本文只介绍最简单的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国内资料比较少，这是我找到的一份中文手册：

• TypeScript Handbook

不需要先学习TS才能使用egret，完全可以边用egret边学习TS，毕竟TS里的很多东西是和JS一样的。

项目构建、发布

介绍完背景，就可以开始使用 egret 了。

1. 使用Egret Wing新建一个项目 Hi，点击下一步

   

2. 选择舞台宽度和高度以及适配方案，点击完成：

   

3. 可以看到Hi项目的目录

   

   • src: 源代码目录，Main.ts 是入口文件
   • libs: 项目中使用的库
   • resource: 项目中使用的资源（图片、音乐等）
   • egretProperties.json: 项目配置文件
   • index.html: 项目入口

4. 构建项目：项目-构建并运行，可以看到最简单的egret项目。

5. 发布：项目-发布，正式包就在 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

---

向我捐助 | 关于我 | 工作机会

---