2 egret 飛行遊戲（v0.1 上）

1前言

1.1 預覽效果

1.2 功能

版本 v0.1

• "開始遊戲"切換場景
• 英雄和敵人發射子彈
• 敵人血量為0時消失
• 滑鼠或者觸屏來移動英雄
• 英雄血掉為0後遊戲結束，可以選擇"再來一局"

2 準備資料

2.1 軟體以及工具

Egret Launcher 已安裝, 引擎 stable随便一個版本已安裝,工具裡的下面幾個

名稱	備注
Res Depot	Res Depot 是 Egret 遊戲的可視化資源管理工具，能夠輕松高效地管理海量遊戲素材和配置檔案資源。
Texture Merger	Texture Merger 是一款紋理集打包工具，能批量将零散碎圖合并為大圖紋理集，提升遊戲性能。
Lakeshore	Lakeshore 是一款免費無需程式設計的遊戲創作工具，通過Lakeshore可以輕松實作自己的遊戲創作夢想。

2.2 參考文檔

Lakeshore使用者手冊

Lakeshore 打開後的歡迎頁面的 飛行遊戲

3 操作步驟

3.1 拷貝飛行遊戲的素材

點選飛行遊戲，選擇要拷貝的目錄，找個地方儲存下，一會兒要從這裡拷貝素材

打開之前儲存的路徑，然後先複制下裡面的素材 （目錄 launcher\resource\userAsset）

這裡的image下是飛行遊戲所有的圖檔，sound下是遊戲用到的聲音。

3.1.1 素材檔案裡的fnt

Laskshore中使用的位圖字型是由一張png的圖檔集和一個fnt配置檔案組成的。其中png圖檔集中包括了所有會使用到的位圖，fnt配置檔案裡描述了這些位圖應該怎麼從png圖檔集中切分出來。

建議使用Egret TextureMerger來制作Lakeshore使用的位圖字型

參考資料

位圖字型

3.1.2 對照項目

Laskshore 可以打開飛行項目做參考，再建立一個項目來測試.

不過切換頁籤會有點小不過，每次都是預設第一個場景，記得切換場景。

3.2 先來個背景加個按鈕

項目自定義尺寸，名字随意，511x762（記住這個尺寸，後面很多用這個來參考），為了參考友善一點，懶得計算時直接從另一邊拷貝參數。。

一個場景，主要是層和事件。切換到層，然後勾選 網格，吸附，輔助線。（後面介紹三個的功能）

• 網格 沒啥說的，一堆正方形的小格子。
• 吸附 沒找到定義，測了有吸附和沒吸附時，沿着輔助線或者邊界移動。吸附會自動對齊邊界或者輔助線。 參考 AI的對齊 AI中對齊的方法有哪些 移動圖形的時候就會自動吸附到網格邊緣
• 輔助線 參考 在PS中怎麼設定輔助線

3.2.1 先給層改個名字

切換到層，然點選層裡預設的對象Layerxxx，右邊屬性框起個名字，比如 背景層。。

圖，或者說，這裡叫精靈。

3.2.2 素材庫加點素材

要點選插入素材（點插入素材上的圖示，不用點插入素材那邊的下三角），先把素材庫加上。

先加img和sound兩個檔案夾。選中對應的目錄，然後點添加素材，找到對應的檔案夾，全選加入。

同理聲音也加入素材庫。之後确定是點不了的，要選個素材才能繼續。

3.3.3 背景層加個背景圖檔bgGrey.png

選擇img下的bgGrey來作為起始頁面的背景圖檔，點選确定。

之後在編輯器裡随便找個位置點一下。

圖沒對上不要緊，反正可以調坐标。。

511x762,一半就是 255.50 ,381,點中圖檔，然後改下X軸坐标和Y軸坐标。

這時候可以預覽下。。反正就1張圖沒啥好看的，略過。。。

層下面，點開背景層左邊的下三角，然後選中AISprite108,右邊屬性框名稱改個名。。比如 背景圖，不截圖了。。自己改

3.3.4 現在要加個标題了

建立一個層，名稱改為UI層（依舊是右邊屬性卡改名稱）

選中UI層，然後點插入素材，下三角裡的暫時用不到。。還是素材上的圖示吧，選擇img下的title圖檔

老樣子，編輯器裡，随便找個位置，滑鼠左鍵點一下。。位置沒關系。。我們還是可以繼續改坐标。。寬高懶得改了，隻改改x以及y坐标。

511x762,一半就是 255.50 ,381。預設放到場景外，就按兩個圖檔高度來算

坐标	值
x	511/2 =255.50 原始坐标
y	0-91*2=-182 原始坐标

場景加載完，開始标題動畫，移動到場景高度為15%,自己找個位置就行。。

坐标	值
x	511/2 =255.50 場景加載後的坐标
y	0+762*0.15=114.3 場景加載後的坐标

先設定場景外的标題坐标 255.50,-182,順便把名字改了，比如 标題。。

現在預覽一下肯定是看不到标題。。畢竟标題在場景外。。接下來就得把标題移到場景裡了。。要加動畫。。

3.3.5 給标題加個動畫（場景加載完）

前面提到 。。一個場景，主要是層和事件。。現在就改來處理事件了。。

切換後的效果

前面提到 “場景加載完成”，這個是系統事件。。。點選建立事件

下一步之後，選擇 場景初始化完成

3.3.6 動畫類型(Tweens)(可跳過）

動畫，這裡是用tweens.js 來實作的。。動畫的類型。。。。飛行遊戲裡用的bounceOut…指數衰減的反彈緩動，先快後慢。。

Linear：線性勻速運動效果；

Quadratic：二次方的緩動（t^2）；

Cubic：三次方的緩動（t^3）；

Quartic：四次方的緩動（t^4）；

Quintic：五次方的緩動（t^5）；

Sinusoidal：正弦曲線的緩動（sin(t)）；

Exponential：指數曲線的緩動（2^t）；

Circular：圓形曲線的緩動（sqrt(1-t^2)）；

Elastic：指數衰減的正弦曲線緩動；

Back：超過範圍的三次方緩動（(s+1)t^3 – st^2）；

Bounce：指數衰減的反彈緩動。

每個效果都分三個緩動方式，分别是：

easeIn：從0開始加速的緩動，也就是先慢後快；

easeOut：減速到0的緩動，也就是先快後慢；

easeInOut：前半段從0開始加速，後半段減速到0的緩動

參考連結

Tween.js 動畫效果

tween_sparktable

3.3.7 給标題加個動畫（使用bounceOut）

接下來 給标題加個動畫，移動到指定的位置。

場景加載完，開始标題動畫，移動到場景高度為15%,自己找個位置就行。。

坐标	值
x	511/2 =255.50 場景加載後的坐标
y	0+762*0.15=114.3 場景加載後的坐标

點選動作，選擇精靈标題，然後下一步，選擇執行緩動，輸入動畫名稱比如t1，坐标，選擇動畫效果。

現在預覽，出來的就是一個背景，下載下傳後，标題從上方移入場景。

萬裡長征第一步。。背景加個标題處理完了。。現在加按鈕。。

3.3.8 加開始遊戲按鈕

• 切換回場景（事件表左邊的>按鈕）
• 選中UI層
• 插入素材（依舊是圖示）
• 選擇素材庫下的img目錄，然後選擇strat，點确定。。
• 場景随便找個位置點一下，還是按鈕位置可以調的。不用擔心。。

按鈕動畫跟标題不一樣，是放大加個旋轉。。

具體就是從1,1變回原始圖檔寬高（177x59）,旋轉一圈360，動畫 Elastic：指數衰減的正弦曲線緩動；由快到慢。。。ElasticOut

先改寬高1,1然後再改坐标，y坐标按場景的75%來算（标題15%,這裡湊個75%），接收點選事件（還要切換到另外一個場景），效果如下所示

坐标	值
x	511/2 =255.50
y	0+762*0.75=571.50

按鈕加事件，以目前1,1的按鈕是沒法看了，等标題動畫的事件完成後，再開始按鈕的動畫。

• 點選場景右邊的>
• 建立事件-标題-下一步
• 緩動播放完成-下一步
• 動效名稱，剛才标題的動畫名稱，這裡為t1

  

  

  

标題動畫完成後，該處理按鈕的動畫了

• 在标題對應的一行後，點選添加動作。注意不要點到其他行。。不然動作就不是在标題動畫完成後廚房的了。。
• 精靈選擇開始遊戲，下一步
• 執行緩動，下一步
• 輸入動效名稱，這裡用t2來辨別
• 按鈕從1,1還原到原始按鈕寬高177,59
• 按鈕旋轉360
• 動畫曲線類型 ElasticOut

預覽效果就是，背景圖，先下來标題，然後旋轉出現按鈕。。

3.3.9 先加個新場景

• 最左邊，從層切換回場景
• 中間，從事件表切換到場景
• 點選建立一個場景，改名 名字要求 每個單詞首字母大寫。。比如 GameScene

  

• 插入素材裡的img下的bg圖檔，點确定
• 随便在場景裡點一下，圖檔坐标參考上面的。。511x762,一半就是 255.50 ,381,點中圖檔，然後改下X軸坐标和Y軸坐标。
• 最左邊從場景切換到層，修改層名稱，以及背景

最終效果如下

3.3.10 按鈕點選事件跳轉到新場景

• 最左邊切換到場景（如果已經是場景請忽略）
• 選中第一個場景（起始場景）
• 中間的場景切換為事件表（如果已經是事件表請忽略）

• 建立事件
• 精靈選擇開始遊戲，下一步
• 選擇觸摸事件 黨按下時，下一步
• 在開始遊戲對應的一行後點選添加動作
• 選擇 system，下一步
• 選擇 系統 跳轉到指定場景，下一步
• 選擇場景名為 GameScene，确定

這時點選預覽，除了，移動下來的标題，旋轉出現的開始遊戲，點選開始遊戲可以跳轉到下一個場景。

如果點選開始遊戲沒效果，請檢查 開始遊戲 屬性 是否設定了 允許點選事件。如果沒問題，再檢查跳轉場景是否是在 開始按鈕 按下事件那一行。。

3.3.11 目前的預覽效果先放個gif

遊戲裡英雄以及敵人下一篇再處理