引言
如果你對 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,並修改預設路徑(它會自己建立一個目錄),具體操作如下圖所示:
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…