egret製作猜拳遊戲

iceBucketChallenge

---

README | 中文

項目介紹

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核心顯示類

需要重新梳理一下這些類，以便下次寫的時候，有點混

類	描述
DisplObject	顯示對象基類，所有顯示對象均繼承自此類
DisplObjectContainer	顯示對象容器接口，所有顯示對象容器均實現此接口
Bitmap	位圖，用來顯示圖片
Shape	用來顯示矢量圖，可以用裏面的方法繪製矢量圖形
TextField	文本類
BitmapText	位圖文本類
Sprite	帶有矢量繪製功能的顯示容器
Stage	舞臺類

這裏面的startscene，使用繼承sprite，而沒用displaObjeContainer，在這裏簡單列出它們之間的繼承關係：
egret.Sprite -> egret.DisplayObjectContainer -> egret.DisplayObject

同時，提一點：shape與sprite的diff：

• shape：顯示對象，一般用於繪製圖形
• sprite：顯示容器，在此基礎上可以添加子容器 + 顯示對象，一般用於create可以裝載content的遊戲層或者遊戲對象

http://blog.sina.com.cn/s/blog_6b80d2ca0102vjx4.html

egret中事件處理

我們在遊戲中涉及到按鈕的一些交互效果，比如：點擊開始遊戲，進入遊戲頁面；點擊Rank icon，彈出rank的彈框。

以上這些都會涉及倒egret的事件處理，我先簡單羅列事件處理的一個基本流程：

• step1： 註冊偵聽器listener
• step2：發送事件
• step3：偵聽事件
• step4：移除事件偵聽器

這裏我用startScene中點擊開始遊戲的事件處理，做一個簡單事例：

startscene .ts:

// init fn
private init(){
  ...
  // 註冊listener 
  rank_btn.addEventListener(egret.TouchEvent.TOUCH_BEGIN, this.rank_btnCallback, this);
  ...
}

// start_btnCallback fn
private start_btnCallback(evt:egret.TouchEvent):void {
  ...
  //  派發事件
  let event:GameEvent = new GameEvent(GameEvent.GAME_GO);
  this.dispatchEvent(event);
  ...
}

main.ts:

private createGameScene() {
  ....   
  //偵聽事件
  startScene.addEventListener(GameEvent.GAME_GO, this.go, this);
  startScene.addEventListener(GameEvent.GAME_BLEED, this.startrank, this);
}
private go(){
  // 手動回收偵聽器
  this.removeEventListener(GameEvent.GAME_GO, this.go, this);
  this.removeChildren();
  ...
}

注意：這裏存在一個問題：

在顯示對象容器裏的子顯示對象上增加了事件偵聽器（addEventListener），如果通過父級顯示對象的removeChild移除了這個容器，那麼有必要在egret.Event.REMOVED_FROM_STAGE事件裏手動刪除所有子對象註冊的事件偵聽器嗎（removeEventListener）？還是說引擎會自動處理？

答案是：如果沒有引用的話就會回收，但是爲了保證一定回收最好手動移除，不然可能造成內存泄露

egret中的默認事件類型包括Focus（焦點）、Geolocation（定位）、HTTPS、IOError、Motion（手勢）、Orientation（旋轉與方向）、Progress、StageOrientation、Text、Timer、Touch

egret中的事件機制是一套比較標準的事件處理架構。
簡單來說，數據的提供者只需要在意發出數據對象，以及確保數據對象是egret.event類或者子類的實例即可，這種數據對象，也就是事件event。

下面梳理2個概念：

• event dispatcher：事件發送者
• event listener：事件偵聽者

默認值寫法：
bulles: boolean = false

file1：const
file2：boy
1.生成事件對象
let dateEvent： dataevent = new DateEvent(dateEvent.date)
2.發送請求時間
dispatchevent
file3：girl
getDate fn： evt：DateEvent
file4：main

項目源碼

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

源碼地址