egret實戰教程之跳一跳(一)

尤水就下也發表於2019-03-19

引言

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

遊戲思路

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

第一步:

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

egret實戰教程之跳一跳(一)
要注意的一點是:這裡的方塊陰影只是假裝有個 3D 的效果,其實就是個圖片。寫程式碼的時候,方塊圖片的錨點不應該是圖片的中心點,而應該是圖中的方塊中心。

第二步:

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

egret實戰教程之跳一跳(一)
提示:靜態場景就是那些不會動的東西;會動的東西或重複的物體我們一般在後續會寫成一個類或者方法。

第三步:

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

第四步:

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

新建專案

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

egret實戰教程之跳一跳(一)
如果你在此時執行的話,將看不到任何效果,因為 createGameScene 函式裡面沒有做任何操作。

寫靜態場景

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

egret實戰教程之跳一跳(一)
egret實戰教程之跳一跳(一)
egret實戰教程之跳一跳(一)
從上圖中我們可以看到,新建一個 EUI 元件後,會生成兩個檔案,一個是 exml 檔案,一個是 ts 檔案,二者是一一對應的。其中 exml 用來寫 UI 介面,ts 用來寫對應頁面的邏輯。所以這一步我們只會動到 exml 檔案。
開啟 SceneBegin.exml,點選中間透明區域,在右側設定其寬高為 640 ✖ ️1136,具體操作如下圖:
egret實戰教程之跳一跳(一)
點選左側介面的資源皮膚(圖示裡面有個 E 的),從中選取背景並拖入到介面中,單擊右側皮膚中的快捷約束的最後一個按鈕,則可使背景鋪滿整個介面,具體操作如下圖:
egret實戰教程之跳一跳(一)
點選左側介面的元件皮膚(圖示有點像拼圖的),從中選取 Button 元件,加上 id 名並替換元件皮膚(也就是按鈕背景啦),具體操作如下圖:
egret實戰教程之跳一跳(一)
egret實戰教程之跳一跳(一)
這樣一來我們就將開始場景寫好了,怎麼樣,是不是很 easy 呢?
接下來只要用同樣的方式去寫遊戲場景和結束場景即可。由於我們這裡的結束介面是以彈層的形式覆蓋在遊戲介面上的,所以二者是寫在一起的。ok,話不多說,右擊 src 目錄下的 scene 資料夾,新建另一個 EUI 元件,取名叫 SceneGame。因為兩個場景是在寫一起的,所以我們需要對其進行分組(Group),一個 Group 寫遊戲場景,一個 Group 寫結束場景。那怎麼分組呢,也很簡單,找到編輯器左下角的佈局皮膚,將 Group 拖入到介面中,並自適應全屏即可,如下圖:
egret實戰教程之跳一跳(一)
再然後依葫蘆畫瓢即可,具體 exml 檔案效果圖如下:
egret實戰教程之跳一跳(一)
egret實戰教程之跳一跳(一)
現在開啟 src 目錄下的 Main.ts 檔案,並在 createGameScene 函式中把開始場景新增到舞臺中,然後執行一下你就能看到開始介面了,具體程式碼如下:

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

小結

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

相關文章