egret製作打地鼠類遊戲 iceBucketChallenge

iceBucketChallenge

---

項目介紹

iceBucketChallenge：類似打地鼠類的冰桶挑戰遊戲(ps:素材均來自網絡)，基於egret白鷺遊戲引擎開發，主要分爲2個大頁面，用EUI build相應的頁面，用tween來控制動畫，ts控制交互。

項目演示

項目功能結構

項目運行

$ egret build xxx(項目名)
$ egret startserver xxx(項目名) -a

項目搭建教程

該遊戲比較簡單，就隨便記錄一下大概步驟

1.EUI build頁面

遊戲最直觀呈現的就是頁面，egret給我們提供了一個wing的編輯器(個人感覺和vscode超級像)，wing方便我們對圖片和組件進行拖拽和build，具體就不再贅述這裏的教程，參考官網即可快速入門 —— EUI入門手冊

記住要點：拖拖拖點點點即可

示例圖：

---

2.tween製作動畫

這裏主要使用tween緩動來控制人頭上下出沒的動畫（簡單來說：控制‘地鼠’的出沒）

mask遮罩

在做人頭出沒的時候，用到遮罩

img.mask = g.getChildAt(0);

爲什麼要這麼使用？下面慢慢說。

什麼是遮罩？

遮罩是遊戲中非常常見的一個視覺處理手段。簡單來說：所謂的遮罩就是指定一個顯示對象哪些部分可以顯示，哪些部分不可以顯示。

推薦一個直觀的實踐辦法

光看文字，應該會覺得一頭霧水，可以嘗試在代碼中這麼玩一下：改變rect的高度和寬度，觀察這時候人頭出沒時的效果，這樣可以最直觀的瞭解到遮罩的意思。

---

3.發佈遊戲

當整個遊戲製作完成後，我們需要將它進行發佈，這裏只涉及H5方面發佈。
一句命令行而已的事：

$ egret publish xxx(項目名)

打包成功後，會出現一個bin-release的文件夾

然後把我框出來的1903....這個文件夾裏面的東西，拖到服務器上，然後對應訪問，就可以啦。

敲黑板劃重點

如果說，我們平時在自我測試環節，起一個本地服務，然後手機在同一個網絡下訪問本機ip地址就可以

這樣應該會比較方便，簡單介紹一下這個步驟：

簡單的http服務

首先安裝http-server模塊。

$ npm i -g http-server

運行發佈完成的包

$ cd bin-release/web/190311152632
$ ls
index.html  js  manifest.json  resource
$ hs -p 8088
Starting up http-server, serving ./
Available on:
 http://127.0.0.1:8088
 http://192.168.1.100:8088
Hit CTRL-C to stop the server

最後一級文件夾名字其實是時間戳。
這樣我們便可以在pc瀏覽器或者手機瀏覽器中查看遊戲了。

---

項目細究

踩過的小坑

在開發中，我因爲1個小錯誤，導致進度卡殼了一會兒，這裏記錄一下，以防下次重犯：

• eui中的佈局

egret.startTick思考

繪製人頭出沒的時候，考慮到用幀事件處理，這裏使用了egret.startTick和egret.stopTick。

startTick（停止對應的則是stopTick）全局函數將以60幀的速度去 -> 回調函數。

需要注意的是如果要使用 startTick 全局函數需要 Egret 2.5 以上的版本。Ticker 類將被廢棄。

在game.ts中的init fn中，我是這麼使用的：

egret.startTick(this.update, this);

startTick函數涉及到2個入參：

1. 回調函數，要求有返回值，如果返回true，將在回調函數執行完成之後立刻重繪，如果返回false，則不會重繪
2. this對象，通常傳入this即可

module模塊

es6中提到了一個module的概念，簡單來說：模塊就是一個獨立的文件，該文件內部的所有變量，外部無法獲取。如果你希望外部能夠讀取模塊內部的某個變量，就必須使用export關鍵字輸出該變量。

這次在ts中採用了一個新的寫法：

module GameUtil {
    export class Constant {
        public static score = 0;
    }
    export enum peopleEnemy {
        "person-fs_png" = 0,
        "person-lj_png",
        "person-ldh_png"
    }
    export enum peopleEnemyWet {
        "person-fs-wet_png" = 0,
        "person-lj-wet_png",
        "person-ldh-wet_png"
    }
}

泛型擴展

之前在一篇博客《typescript常用點》中提了一部分泛型，通過這個項目，抽象了一句更直白的話：
泛型：參數化的類型，一般用於限制集合的內容

toString拓展

toString() 函數返回一個表示該對象的字符串

• 數值

console.log((4).toString())  // '4'

• 字符串

console.log('nwd'.toString())  // 'nwd'

• 布爾值

console.log(true.toString()) // 'true'

• 對象 非數組

console.log({}.toString())  // [object Object]

• 對象 數組

console.log([4,6].toString()) // 4,6

• null和undefined

console.log(null.toString())  // Uncaught TypeError: Cannot read property 'toString' of null
console.log(undefined.toString())  // Uncaught TypeError: Cannot read property 'toString' of undefined

項目源碼

代碼中寫了很多註釋，基本都能看懂就不再贅述啦~

源碼地址