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

個人博客，歡迎訂閱

微博粉絲太少，求粉