1.環境搭建

安裝教程傳送門：http://edn.egret.com/cn/index.php?g=&m=article&a=index&id=207&terms1_id=20&terms2_id=22

安裝包下載：http://www.egret.com/egretengine

一鍵安裝完成。

開啟cmd驗證是否完成：輸入命令：egret，如安裝正確的則如下圖所示。

如果顯示未配置環境變數，找到修復安裝。點選修復安裝後Egret 會幫你修復被破壞的環境變數和命令列程式。

MAC：

大體的流程與win下無大差別。

2.建立專案

WIN（Mac類似）:

不懂得請戳: http://edn.egret.com/cn/index.php?g=&m=article&a=index&id=211&terms1_id=20&terms2_id=23

1.建立一個我們需要使用的專案的資料夾，比如我在F盤建立一個code資料夾。

2.使用cmd進入到code資料夾目錄下，如圖所示：

3.命令 egret create 專案名，建立專案。

在生成的專案資料夾中我們會看到四個子資料夾。

3.開發

1.先跑起來。

2.編譯執行：使用webstorm匯入剛才建立的專案，點選左下角的Terminal，整合的cmd就可以再webstorm內使用了。

輸入：egret build 專案名，就可以編譯了。編譯完成後，輸入：egret startserver 專案名，執行專案。

如果您的目錄處於當前專案目錄下，可以直接使用egret build

然後會自動彈出網頁。預設的例子如圖，成功執行。

2.專案開始之前的準備

1.開啟Main.ts檔案，將createGameScene中的內容全部刪除，並將createGameScene方法後邊的所有方法刪除。

2.匯入自己要使用的資源，放入resource\assets下，然後在resource.json下，參照之前的模式配置一下即可。

3.開始自己的專案開發

現在，我們來做一個超級瑪麗撞金幣的小遊戲。例子傳送門：http://iamedison.sinaapp.com/

1.載入圖片到場景

官方自帶的例子幫忙封裝好了一個方法createBitmapByName(

引數是resource.json下配置好的圖片名稱，直接傳入即可。

建立背景來作為例子：

var bg: egret.Bitmap =this.createBitmapByName("bgImage");

this.addChild(sky);

然後我們可以設定他的寬度和高度以及x,y值來調整需要的效果:

this.stage.stageWidth 是螢幕可看見的寬度

var stageW: number = this.stage.stageWidth;

var stageH: number = this.stage.stageHeight;
sky.width = stageW;
sky.height = stageH;

sky.x = 0;

sky.y = 0;

然後把背景給弄起來，看圖：

現在可以其他靜態顯示的圖都創建出來，如圖所示：

這樣，我們的整個遊戲介面就出來了。

2.開啟主角mario的點選事件

設定物件可以點選：mario.touchEnabled=true;

註冊點選事件：

mario.addEventListener( egret.TouchEvent.TOUCH_TAP, this.startAnimation, this );

引數分別是：事件型別，回撥函式，還有回撥的物件。事件的型別如圖所示：

然後我們要讓主角跳躍起來，我這邊做一個模擬跳躍的效果，設定y軸來讓他跳躍起來。然後我們要用到一個叫做緩動動畫的東西：

egret.Tween.removeTweens(this._mario);
var tw = egret.Tween.get(this._mario,{loop:false});

緩動的效果也很多：

var easeObj = egret.Ease.sineOut;
tw.to({x:stageW / 2 - 20,y:stageH / 2 - 90},20,easeObj).wait(20)

.to({x:stageW / 2 - 20,y:stageH / 2 - 70},20,easeObj).wait(20);

上面程式碼做的就是y軸上移然後再下移（這邊的原點是在左上角的），跳躍的效果就出來了。

然後我們可以用類似的原理來處理撞擊石頭出金幣的效果，加上一個石頭移動的緩動動畫，再加上一個金幣出現的緩動動畫。

金幣移動到點之後觸發回撥函式，移除金幣：tw2.call(this.complete, this,[coin]);

private complete(coin:egret.Bitmap)
{
    this.removeChild(coin);

    coin = null;

}

來個效果圖：

3.計時和分數

開啟一個定時器（單位毫秒）：

var timer:egret.Timer = new egret.Timer(1000,10);timer.addEventListener(egret.TimerEvent.TIMER,this.timerFunc,this);timer.start();

建立文字：

var colorLabel: egret.TextField = new egret.TextField();
colorLabel.textColor = 0xffffff;
colorLabel.textAlign = "center";
colorLabel.text = "0";
colorLabel.size = 20;
this.addChild(colorLabel);

然後統計10秒內，點選多少次。效果如圖所示：

4.編譯釋出

編譯：在Terminal裡面先編譯一次，egret build，修改改都需要編譯一次，因為他需要把ts轉換成js。

釋出：命令egret publish，然後就會自動編譯了，在對應資料夾就可以找到釋出版，如圖所示：

將launcher、resource、index.html拷貝到伺服器上就OK了。

一個簡單的小遊戲就這麼完成了。

關於螢幕適配，請參考我的另一個帖子：http://bbs.egret.com/forum.php?mod=viewthread&tid=10232&page=1#pid55606

本文僅供參考，有問題可以交流。