egret實戰教程之跳一跳（一）

引言

如果你對 egret 一點了解都沒有，建議你看一下我之前寫的一篇入門教程（一看就會的egret入門教程）。如果你瞭解一點，那就讓我們愉快地開車吧???。

遊戲思路

一般遊戲開發可大體分為以下四個步驟，這裡主要針對 H5 小遊戲：

第一步：

準備資源。這部分沒什麼好說的，準備好素材就是了?‍♀️?‍♂️，一般就是圖片和音訊。當前跳一跳專案中用到的素材有（如下圖所示）：

要注意的一點是：這裡的方塊陰影只是假裝有個 3D 的效果，其實就是個圖片。寫程式碼的時候，方塊圖片的錨點不應該是圖片的中心點，而應該是圖中的方塊中心。

第二步：

寫遊戲場景。什麼是場景呢，其實就是 UI 介面。一般我們可以把遊戲分成（至少）3 個場景，分別是開始場景、遊戲場景和結束場景（如下圖所示）。然後利用 egret 的 EUI 功能（視覺化佈局），我們可以很容易的建立靜態場景（要有場景的意識），不用寫一句程式碼（開心?），介面就有了，真的是好容易，誰用誰知道！???

提示：靜態場景就是那些不會動的東西；會動的東西或重複的物體我們一般在後續會寫成一個類或者方法。

第三步：

寫遊戲邏輯。這部分就是遊戲的核心了，人與人之間的差別也就在這?。通常來說首尾兩個場景互動較少，只要在按鈕上新增幾個事件監聽就好了，而遊戲場景中的邏輯才是我們真正要施展才華（寫 bug）的地方。

第四步：

多玩多除錯。這步也不用多說，就是多點點，各種騷操作，多管齊下，bug 總能與你不期而遇，擦出不離不棄的火花?。

新建專案

話不多說，讓我們開始策馬奔騰吧（說好的開車呢?）！
1、新建一個名叫 jump 的專案並用 Egret Wing 3 編輯器開啟
2、在 resource/assets 目錄下新建一個 data 資料夾，並把資源放入其中（包括圖片和音訊）
3、開啟 src 目錄下的 Main.ts 檔案，刪除 createGameScene 函式裡面的內容

如果你在此時執行的話，將看不到任何效果，因為 createGameScene 函式裡面沒有做任何操作。

寫靜態場景

這步我們將通過 EUI 來完成，不需要寫一行程式碼，賊TM爽。首先在 src 目錄下新建一個名叫 scene 的資料夾，右擊該資料夾新建一個 EUI 元件，取名叫 SceneBegin，並修改預設路徑（它會自己建立一個目錄），具體操作如下圖所示：

從上圖中我們可以看到，新建一個 EUI 元件後，會生成兩個檔案，一個是 exml 檔案，一個是 ts 檔案，二者是一一對應的。其中 exml 用來寫 UI 介面，ts 用來寫對應頁面的邏輯。所以這一步我們只會動到 exml 檔案。
開啟 SceneBegin.exml，點選中間透明區域，在右側設定其寬高為 640 ✖ ️1136，具體操作如下圖：

點選左側介面的資源皮膚（圖示裡面有個 E 的），從中選取背景並拖入到介面中，單擊右側皮膚中的快捷約束的最後一個按鈕，則可使背景鋪滿整個介面，具體操作如下圖：

點選左側介面的元件皮膚（圖示有點像拼圖的），從中選取 Button 元件，加上 id 名並替換元件皮膚（也就是按鈕背景啦），具體操作如下圖：

這樣一來我們就將開始場景寫好了，怎麼樣，是不是很 easy 呢？
接下來只要用同樣的方式去寫遊戲場景和結束場景即可。由於我們這裡的結束介面是以彈層的形式覆蓋在遊戲介面上的，所以二者是寫在一起的。ok，話不多說，右擊 src 目錄下的 scene 資料夾，新建另一個 EUI 元件，取名叫 SceneGame。因為兩個場景是在寫一起的，所以我們需要對其進行分組（Group），一個 Group 寫遊戲場景，一個 Group 寫結束場景。那怎麼分組呢，也很簡單，找到編輯器左下角的佈局皮膚，將 Group 拖入到介面中，並自適應全屏即可，如下圖：

再然後依葫蘆畫瓢即可，具體 exml 檔案效果圖如下：

現在開啟 src 目錄下的 Main.ts 檔案，並在 createGameScene 函式中把開始場景新增到舞臺中，然後執行一下你就能看到開始介面了，具體程式碼如下：

protected createGameScene(): void {
    this.addChild(new SceneBegin());
}
複製程式碼

小結

至此，我們的靜態場景就全部寫完了，哦不?，我們並沒有寫程式碼，僅僅是貼圖和貼文字而已。當中的精髓就在於拖，把左側皮膚的資源或控制元件熟練地拖入到介面中，然後在右側皮膚設定其屬性（寬高或 xy 值等），只要你能熟練地移動滑鼠（相信你有著強大的右手?），神馬靜態場景都不在話下。
其實本篇分享的內容並不多，但是再寫下去文章就太長了，大家也木有興趣看下去，所以就分成兩篇來寫，下一篇我們將會詳細地講述跳一跳的具體遊戲邏輯（這是重點?️），乾貨滿滿哦，期待你的閱讀，回見???。
跳一跳原始碼地址：github.com/lgq627628/e…