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

引言

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

遊戲思路

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

第一步:

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

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

第二步:

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

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

第三步:

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

第四步:

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

新建項目

話很少說,讓咱們開始策馬奔騰吧(說好的開車呢😂)!
一、新建一個名叫 jump 的項目並用 Egret Wing 3 編輯器打開
二、在 resource/assets 目錄下新建一個 data 文件夾,並把資源放入其中(包括圖片和音頻)
三、打開 src 目錄下的 Main.ts 文件,刪除 createGameScene 函數裏面的內容 this

若是你在此時運行的話,將看不到任何效果,由於 createGameScene 函數裏面沒有作任何操做。

寫靜態場景

這步咱們將經過 EUI 來完成,不須要寫一行代碼,賊TM爽。首先在 src 目錄下新建一個名叫 scene 的文件夾,右擊該文件夾新建一個 EUI 組件,取名叫 SceneBegin,並修改默認路徑(它會本身建立一個目錄),具體操做以下圖所示: spa

從上圖中咱們能夠看到,新建一個 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…3d

相關文章
相關標籤/搜索