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

引言

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

遊戲思路

通常遊戲開發可大致分爲如下四個步驟，這裏主要針對 H5 小遊戲：

第一步：

準備資源。這部分沒什麼好說的，準備好素材就是了🤷‍♀️🤷‍♂️，通常就是圖片和音頻。當前跳一跳項目中用到的素材有（以下圖所示）：

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

第二步：

寫遊戲場景。什麼是場景呢，其實就是 UI 界面。通常咱們能夠把遊戲分紅（至少）3 個場景，分別是開始場景、遊戲場景和結束場景（以下圖所示）。而後利用 egret 的 EUI 功能（可視化佈局），咱們能夠很容易的建立靜態場景（要有場景的意識），不用寫一句代碼（開心😄），界面就有了，真的是好容易，誰用誰知道！🎉🎉🎉

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

第三步：

寫遊戲邏輯。這部分就是遊戲的核心了，人與人之間的差異也就在這😢。一般來講首尾兩個場景交互較少，只要在按鈕上添加幾個事件監聽就行了，而遊戲場景中的邏輯纔是咱們真正要施展才華（寫 bug）的地方。

第四步：

多玩多調試。這步也不用多說，就是多點點，各類騷操做，多管齊下，bug 總能與你不期而遇，擦出不離不棄的火花🔥。

新建項目

話很少說，讓咱們開始策馬奔騰吧（說好的開車呢😂）！
一、新建一個名叫 jump 的項目並用 Egret Wing 3 編輯器打開
二、在 resource/assets 目錄下新建一個 data 文件夾，並把資源放入其中（包括圖片和音頻）
三、打開 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…