egret是一個(gè)H5游戲引擎,而且用的人少,社區(qū)也不完善.學(xué)習(xí)egret的時(shí)候遇到不少困難,好在最終都能解決.這個(gè)引擎的公司已經(jīng)跑路了,相信以后egret會慢慢退出歷史舞臺.

本文記錄了我個(gè)人學(xué)習(xí)egret中的一些知識點(diǎn),以及使用egret+EUIEditor進(jìn)行小游戲開發(fā)的整個(gè)過程

1.知識點(diǎn)

1.1 skin

skin是一個(gè)游戲組件配置文件,用來以規(guī)范的方式預(yù)制一些組件,這包括:決定他們的位置,位置約束關(guān)系,各種可以預(yù)配置的屬性. 加載skin以后,通過一些方法,可以將指定的類和skin綁定,綁定以后,在類中直接聲明和skin中的組件形同類型和ID的變量,就可以將變量與skin中的組件綁定.

想要使用skin,需要在創(chuàng)建項(xiàng)目的時(shí)候選擇"eui"項(xiàng)目,制作skin需要用到插件"Egret UI Editor".Editor的使用方法和綁定skin的流程會在之后給出

editor界面和一個(gè)典型的skin,它由一些組件組成

1.2 egret事件

egret的事件和傳統(tǒng)的事件系統(tǒng)沒有區(qū)別:發(fā)送事件是一個(gè)向上級拋出信息的過程,在父級對子物體加監(jiān)聽可以實(shí)現(xiàn)事件的傳遞.想要傳遞事件,我們在一個(gè)對象內(nèi)部發(fā)送事件,然后在它的父對象中通過引用對子對象加監(jiān)聽,這樣父對象就可以根據(jù)子對象的事件來處理邏輯,如果要多級傳遞,那么就在父對象的事件處理邏輯中發(fā)送消息給祖父對象,以此類推.

egret自帶的事件類位于egret.Event中,這里定義了一系列事件類型參數(shù),它們都是字符串類型.和UI有關(guān)的事件則一般在eui.UIEvent中

1.3 eui.DisplayObject和節(jié)點(diǎn)樹

幾乎所有能夠呈現(xiàn)在界面上的組件都繼承這個(gè)類或者它的子類,繼承它的容器類DisplayObjectContainer及其子類則更加常用.可以把它看作一個(gè)UI節(jié)點(diǎn)樹上的節(jié)點(diǎn),有了節(jié)點(diǎn),才能在節(jié)點(diǎn)上放東西,才能最終展示出來.子節(jié)點(diǎn)的一些屬性(比如位置)受到父節(jié)點(diǎn)影響.

節(jié)點(diǎn)樹的最上層是stage,它位于主函數(shù)Main.ts中,它就是游戲的展示界面

將物體添加到節(jié)點(diǎn)樹上可以在任何一個(gè)節(jié)點(diǎn)中用addchild()添加,這樣做就是把被添加的物體變成當(dāng)前節(jié)點(diǎn)的子節(jié)點(diǎn)

1.4 Main.ts

項(xiàng)目的入口類.新建的項(xiàng)目自帶這個(gè)文件,其中由很多亂七八糟的東西,其中有一些是不需要的.如果簡單理一下主函數(shù)邏輯,那就是:createChildren()->runGame()->loadResource()&createGameScene()->分別處理加載資源組的邏輯和初始化游戲場景的邏輯,對于初學(xué)者來說,關(guān)注createGameScene()就好,在這里可以添加需要的展示物體,直接this.addchild()就可以,或者是this.stage.addchild().在示例項(xiàng)目中,createGameScene()里面寫了大量的展示物體調(diào)整代碼,這些邏輯應(yīng)該寫在一個(gè)單獨(dú)的類里面.

1.5List

對于游戲中點(diǎn)陣的實(shí)現(xiàn),我最終選用了List組件.和大多數(shù)UI系統(tǒng)的List一樣,它提供一個(gè)布局,并定義一個(gè)作為基本單位的圖形組件,也提供了一些接口允許對其中任何一個(gè)單位進(jìn)行操作和交互判定.在Eui中,List的基本單位叫ItemRenderer,一般用一個(gè)繼承這個(gè)類的類作為List的ItemRenderer,也可以直接將一個(gè)皮膚設(shè)置為ItemRenderer.

List的另一個(gè)重要成員是dataProvider,它是存放List數(shù)據(jù)提供者的成員.ItemRenderer是顯示單元的數(shù)據(jù),dataProvider是顯示的單元的內(nèi)容的數(shù)據(jù).一般來說,可以用一個(gè)eui.ArrayCollection封裝你的數(shù)據(jù),在我的項(xiàng)目里,數(shù)據(jù)是由繼承ItemRenderer的類組成的數(shù)組構(gòu)成,根據(jù)renderer和provider,List將每一個(gè)元素按照布局顯示出來

需要特別注意的是,List強(qiáng)制使用布局,而布局強(qiáng)制限定每個(gè)元素的位置,所以要是想設(shè)計(jì)特定的布局(在我的項(xiàng)目里表現(xiàn)為六邊形網(wǎng)格),你必須封裝ItemRenderer,然后將實(shí)際的呈示單元作為繼承類的一個(gè)成員,List可以正常識別到這個(gè)呈示單元的.

2.從0開始的Egret小游戲開發(fā)流程

2.1 項(xiàng)目基本配置

• 創(chuàng)建新項(xiàng)目

選擇eui項(xiàng)目,勾選需要的組件,編輯參數(shù),這些參數(shù)都很清晰明了,不必多說

進(jìn)入項(xiàng)目,推薦使用vscode或者Egret插件Egret Wing編寫代碼.

項(xiàng)目中有一些自帶的腳本和配置文件資源文件等,不用管他們

• 添加需要的素材

將游戲素材放進(jìn)resource/assets文件夾,自己的素材可以在目錄下面新建文件夾.

進(jìn)入Main.ts,刪除createGameScene的內(nèi)容和LoadTheme(好像是叫這個(gè))等用不到的代碼.到此,初始配置完成

2.2 UI Editor制作皮膚

進(jìn)入Editor,,左上角資源管理器是你的資源文件(resource)的文件夾視圖,如果你的資源管理器里面沒有你的素材,右鍵-項(xiàng)目設(shè)置-添加資源和皮膚的路徑

在右邊的資源庫中添加素材到中間的舞臺,組合出需要的skin.點(diǎn)擊這些組件,右邊有他們的屬性,左下角則是當(dāng)前skin的配置信息.注意,常用屬性中的ID就是一會在類中用來組件和變量綁定的標(biāo)識符,建議都起一個(gè)名字

保存以后在你保存的目錄下面可以看到和皮膚同名的exml文件,它其實(shí)就是皮膚配置文件.你也可以不使用Editor而是直接手寫exml,它們沒有區(qū)別

2.3皮膚綁定

創(chuàng)建一個(gè)類,繼承eui.component(它也是繼承自DisplayObjectContainer),在其中直接定義和組件ID同名的變量,然后在構(gòu)造時(shí)將skinName屬性設(shè)置成exml文件所在的位置,在綁定完畢后即可直接使用.注意,有必要使用加載事件等方式確保調(diào)用在綁定結(jié)束后才開始,否則會報(bào)錯(cuò)(因?yàn)槭褂昧宋闯跏蓟淖兞?

2.4編寫UI邏輯

這里我使用事件系統(tǒng)編寫UI邏輯.首先有一個(gè)寫成單例的場景管理類UIManager,它存放和管理所有用到的場景,并提供一個(gè)場景加載函數(shù).因?yàn)樗撬袌鼍暗纳霞?而觸發(fā)場景切換的邏輯一般都在子場景中的組件,所以在子類或?qū)O類調(diào)用切換場景的方法肯定是邏輯錯(cuò)誤的,所以我們使用事件層層傳遞.

以失敗場景舉例,失敗場景中的按鈕添加一個(gè)監(jiān)聽,被點(diǎn)擊時(shí)發(fā)送一個(gè)包含場景切換信息的事件,在UIManager中,對失敗場景加了監(jiān)聽,所以能讀取到這個(gè)事件,并獲取事件的信息,然后加載對應(yīng)場景

MyUIEvent是我封裝了egret.Event,然后添加了需要的信息

UIManager這里我最開始犯了一個(gè)工程問題:使用單例的類一般有兩種情況,一種是作為頂層的管理類,另一種是作為底層的工具類.我希望UIManager作為一個(gè)管理類,而對loadScene,卻像一個(gè)底層的工具類接口,所有組件都直接調(diào)用它,這顯然是不合適的

2.5 使用List實(shí)現(xiàn)點(diǎn)陣和其交互邏輯

首先準(zhǔn)備一個(gè)作為List單位的節(jié)點(diǎn)GameNode和作為作為List數(shù)據(jù)源的節(jié)點(diǎn)管理者NodeManager

GameNode繼承了ItemRenderer,并且有一些屬性由于邏輯處理,dataChanged方法是繼承來的,用于在數(shù)據(jù)初始化和更新的時(shí)候進(jìn)行一些操作,我這里是讓偶數(shù)行的點(diǎn)偏移一定位置,實(shí)現(xiàn)六邊形網(wǎng)格的效果.

對于具體的呈示器,我通過綁定皮膚設(shè)置了每個(gè)單位的樣式,實(shí)際移動也是移動它的位置,因?yàn)镚ameNode本身作為ItemRenderer受限于布局,是不能移動位置的.

接下來是交互邏輯,GameNode只有改變自身點(diǎn)的能力,這個(gè)方法被管理者調(diào)用,sendMessage用于發(fā)送事件

2.6 游戲GamePlay部分的邏輯

類GameScene負(fù)責(zé)游戲GamePlay界面的所有邏輯.

首先是一些數(shù)據(jù)和構(gòu)造函數(shù).這些數(shù)據(jù)主要就是用來操控游戲元素的,以及和Skin綁定的元素.需要注意的是這個(gè)dataMatrix,設(shè)計(jì)數(shù)據(jù)矩陣的目的是分離數(shù)據(jù)層和實(shí)體層,這樣實(shí)體層只需要new出來一次,而每次數(shù)據(jù)更新和邏輯判斷(比如貓判斷下一個(gè)落點(diǎn))都只使用這個(gè)數(shù)據(jù)數(shù)組.然后根據(jù)dataMatrix更新實(shí)體就可以

初始化和更新的方法,每次想要重置關(guān)卡,只需要調(diào)用initData()

更新邏輯和事件系統(tǒng),接受到節(jié)點(diǎn)發(fā)出的事件,GameScene開始走一遍更新邏輯,如有必要,向上發(fā)送事件,這主要用在切換場景.

2.7 編寫貓邏輯

Cat這個(gè)類同時(shí)包含了貓的表現(xiàn)層和邏輯層的代碼,也就是說,負(fù)責(zé)顯示動畫的方法和貓尋找路徑的邏輯寫在一個(gè)類中,這不是一個(gè)好的習(xí)慣,但是限于項(xiàng)目大小這么做沒問題.

一些屬性和構(gòu)造函數(shù),構(gòu)造函數(shù)中監(jiān)聽是否被添加到舞臺上,catInit負(fù)責(zé)初始化的內(nèi)容

初始化主要對數(shù)據(jù)做初始化,把該使用的資源加載好.

需要注意的是加載動畫的代碼,這部分使用game擴(kuò)展庫實(shí)現(xiàn),具體看代碼,知道怎么用就可以

路徑規(guī)劃函數(shù),尋找下一個(gè)位置,這個(gè)過程中也需要判斷自己是否已經(jīng)被圍住,如果被圍住則不需要尋找出路,節(jié)省算力.

judgeState不僅包含判斷狀態(tài)的邏輯,也包含尋找出路的邏輯,這段邏輯本來應(yīng)該分離,但是用到的屬性和數(shù)據(jù)高度重合,所以就放在一起.

尋路的算法使用DFS深度優(yōu)先搜索,以當(dāng)前最短路徑為標(biāo)準(zhǔn)剪枝

3.效果展示:

主界面

游戲界面

被圍住:

勝利

下一關(guān):

失敗: