egret引擎初探

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

个人博客，欢迎订阅

微博粉丝太少，求粉