FindGoods
項目介紹
FindGoods:找禮物的一個小營銷遊戲(仿360),基於egret白鷺遊戲引擎開發,主要分爲2個大頁面,用EUI build相應的頁面,用tween來控制動畫,ts來管理之間的交互(比如pop-up的彈出和關閉,物品isClick的狀態等)
項目演示
部分截圖
項目功能結構
項目運行
$ egret build xxx(項目名)
$ egret startserver xxx(項目名) -a
項目搭建教程
接下來篇幅可能較長,主要會手把手教學——如何搭建這麼個可愛的遊戲項目。
1.EUI build頁面
遊戲最直觀呈現的就是頁面,egret給我們提供了一個wing的編輯器(個人感覺和vscode超級像),wing方便我們對圖片和組件進行拖拽和build,具體就不再贅述這裏的教程,參考官網即可快速入門 —— EUI入門手冊
記住要點:拖拖拖點點點即可
示例圖:
2.tween製作動畫
當我們用EUI搭建好大概的頁面的時候,我們會發現有些動畫應該怎麼製作呢?比如開始頁面中轉動的musicCD和搖晃的掃把和簸箕。
其實很簡單,用tween就能夠輕易的處理,寫法有種類jQuery的寫法,用到的屬性也不外於xy座標或者css3中提到。
這裏列舉一下,通過tween如何讓MusicCD旋轉起來:
let tw = egret.Tween;
// musicImg rotation
tw.get(this.musicImg, {
loop: true
}).to({
rotation: 36
}, 3000);
同理,根據這樣的模式,我們處理晃動的掃把和簸箕。
接下來,講解一下動畫的man和girl是怎麼做出來的
man的動畫,通過這段代碼實現,用於這裏不太好放video,如果想參考效果,建議查看上方項目演示video。
let tw = egret.Tween;
// man arm animation
tw.get(this.mHand, {
loop: true
}).to({
rotation: 16
}, 800)
.to({
rotation: 15
}, 200)
.wait(1000)
.to({
rotation: 0
}, 1000)
.wait(500);
// man calf animation
tw.get(this.mCalf, {
loop: true
}).to({
x: 60.31,
y: 170.16,
rotation: 18
}, 800)
.to({
rotation: 16
}, 200)
.wait(1000)
.to({
x: 56.83,
y: 180.73,
rotation: 2
}, 1000)
.wait(500)
// man smog animation
tw.get(this.smokeGroup, {
loop: true
}).to({
x: 56,
y: 0,
alpha: 1
}, 1000)
.wait(300)
.to({
alpha: 0
}, 1000)
.to({
x: 54.33,
y: 8.98
})
girl的動畫同man,參考寫出即可。
3.遊戲邏輯
這個遊戲邏輯相對來說挺簡單的,它是這麼一個步驟流程:
- 點擊主頁面中的物品(ps:某些物品下面藏有禮物)
- 如果找到房間內藏有禮物的物品,這時候會彈出一個彈框,彈框內部會出現你找到了什麼禮物(ps:這裏會發生一個request進行請求,禮物是根據response來進行填充)
- 同時,主頁面上方的剩餘值會對應減少,紅色矩陣顯示也會對應縮短
- 最後,當剩餘值爲0,也就是用戶找到了所有的禮物,代表
通關
注意:
這裏建立了一個全局的gameData來管理找到禮物的個數。
這裏提到request,如果不想用node自己搭建服務器來寫api接口,可以使用easy-mock
來進行簡單的搭建,具體用法可自行google
補充:
關於easy-mock的使用入門*,推薦幾篇blog,寫的特別通俗易懂:
4.發佈遊戲
當整個遊戲製作完成後,我們需要將它進行發佈,這裏只涉及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瀏覽器或者手機瀏覽器中查看遊戲了。
項目細究
踩過的小坑
在開發中,我因爲2個小錯誤,導致進度卡殼了一會兒,這裏記錄一下,以防下次重犯:
-
拼寫問題
- 由於第一次寫rotation的時候,打快了,少寫了一個t,導致編輯器記住了這個關鍵詞,然後每次要敲rotation的時候,都提示rotaion,最後在tween緩動那裏,排查了一會兒問題(爲啥不動呀),最後才發現是拼寫問題
-
group點擊穿透
- 主頁面,點擊物品:在監聽touchEvent中的tap事件的時候,發現currentTarget一直是group,而不是自定義組件myImage,導致後續操作失敗,最後發現是在exml中對應group中少加了一句:touchThrough = "true",導致,點擊無法穿透,只能觸發最上一層。
- 如果不在exml中加這個也行,直接在ts中寫this.group.touchThrough = true
這裏順便擴展一下,group中的touch相關屬性:
this.group.touchEnabled = false; //禁用可觸摸屬性
this.group.touchThrough = true; //啓用點擊穿透屬性
this.group.touchChildren = false; //禁用可觸摸子類屬性
注意
:遇到設置後依然無法點擊穿透的情況,可以檢查是否有其他父組件擋住了自己所要操作的group,此時更改父group的點擊穿透屬性即可。
Loading拓展思考
在做loading頁的時候,有一個疑問loading中的promiseTaskReporter和onProcess是怎麼關聯起來的,查了一些資料後,發現它的流程是這樣的:
加載進度
遊戲資源加載過程中,通常都會存在一個loading進度條,或者能夠表示加載進度的展示方法。在新的RES模塊中,讀取加載進度也非常的方便。在RES
模塊中,新增了一個名爲PromiseTaskReporter
的接口(該接口聲明於assetsmanager.d.ts中),藉助這個接口,我們可以實現讀取加載進度的效果。
PromiTaskReporter接口包含2個方法(os: 自行選擇實現):
-
onProgress
:該方法類似於以前的GROUP_PROGRESS
事件,用於讀取加載進度 -
onCancel
:取消
使用時,你可以創建一個對象或者一個類,來實現PromiseTaskReporter
接口,並在loadGroup
加載組時,將其實例化對象作爲參數傳遞進去。項目中代碼如下:
class LoadingUI extends egret.Sprite implements RES.PromiseTaskReporter {
public onProgress(current: number, total: number): void
let percent: number = Math.round(current / total * 100);
this.percent.text = `${percent}%`;
// 進度條
this.bar.graphics.beginFill(0x4C947A, 1);
this.bar.graphics.drawRect(50, 150, 3 * percent, 12);
this.bar.graphics.endFill();
}
}
因爲升級了RES模塊,所以當時出現了這些困擾,這裏記錄一篇blog,詳細講解了RES全新模塊—— Egret全新RES模塊詳解
項目源碼
代碼中寫了很多註釋,基本都能看懂就不再贅述啦~