【h5-egret】如何快速開發一個小遊戲

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.先跑起來。

1.開發工具：WebStorm

2.編譯運行：使用webstorm導入剛纔建立的項目，點擊左下角的Terminal，集成的cmd就能夠再webstorm內使用了。

輸入：egret build 項目名，就能夠編譯了。編譯完成後，輸入：egret startserver 項目名，運行項目。

若是您的目錄處於當前項目目錄下，能夠直接使用egret build命令進行編譯，使用run來運行。

而後會自動彈出網頁。默認的例子如圖，成功運行。

 

、

 

2.項目開始以前的準備

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

2.導入本身要使用的資源，放入resource\assets下，而後在resource.json下，參照以前的模式配置一下便可。

 

3.開始本身的項目開發

如今，咱們來作一個超級瑪麗撞金幣的小遊戲。例子傳送門：http://iamedison.sinaapp.com/

1.加載圖片到場景

官方自帶的例子幫忙封裝好了一個方法createBitmapByName(name:string)來建立bitmap對象，直接使用會方便省事。

參數是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了。

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

 

 

 

MT.Team