參考：https://juejin.im/post/5c90b4175188252d7a5c4c15
引言
如果你對 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…
