白鷺引擎開發h5牛牛可控大廳遊戲(項目結構)
主要使用 EgretWing (是白鷺擴展的 VisualStudio Code)
新建 項目中 選擇
生成的項目的結構:
src
是TypeScript源碼目錄
resource
是我們項目中的資源路徑,一般我們把圖片音頻等素材放置asset目錄下,json等配置文件放置config目錄下,default.res.json是我們用於加載資源的json配置文件,一般不修改名字,後面會講到怎麽使用。
egretProperties
是我們這個項目的一些配置記錄信息,一般我們不需要動它。而index.html就是我們遊戲的主界面文件。
index.html
我們可以看到遊戲界面所需的js,都自動生成並引用好了。這一部分我們不需要也不能手動去修改。
bin-debug
是調試環境編譯出來的js
libs
是文件包的引用目錄
template
主要是app用到的runtime
但是你可以在style標簽中修改背景色或者在div屬性值中修改配置參數,如渲染的幀率(一般我們設成60,如果是計算量大的,我們再適當降低),在這裏我們可以重新修改剛剛新建遊戲時的適配模式、寬高、旋轉等;
將data-show-fps和data-show-log設成true,我們就可以看到遊戲運行的實時幀率了。
幀率可以檢測遊戲運行的流暢度(性能),渲染數量越多,同時計算量越大,性能就越差,掉幀就越多。所以幀率越高,則表示性能越好,流暢度高。
egret.runEgret({})的運行方法,在這裏,你可以修改egret的渲染模式,默認是"webgl"。但是如果你需要用到跨域圖片資源或者有大量的圖片和文字,你最好還是使用"canvas"模式,避免跨域報錯和性能問題。
主要 熟悉 visualstudio code 就可以很容易上手。 點擊 調試 菜單 按鍵或者 F5 就可以運行了。 運行窗口中 也有 切花分辨率 和 橫豎屏切換等!
1、首先要知道入口類:
在index.html頁面中聲明了入口類(data-entry-class),所以當頁面加載完之後,就會自動執行Main類中的構造函數。
並且在這個類構建完成後,會自動添加到舞臺(stage)。
2、由於Main繼承自白鷺的基本容器egret.DisplayObjectContainer並且會自動添加到舞臺中,所以在初始化階段給Main綁定了添加到舞臺事件,用於啟動界面。
public constructor() {
super();
this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage,this);
}
3、Main被添加到舞臺,觸發旗下的onAddToStage方法。
運行 開到的應該是兩個界面 一個 Loading 和 Main , 只不過 Loading 太快了。
[javascript] view plain copy
private onAddToStage(event:egret.Event) {
//設置加載進度界面
//Config to load process interface
this.loadingView = new LoadingUI();
this.stage.addChild(this.loadingView);
4、 加載配置文件, 加載完成後,執行onConfigComplete方法
移除CONFIG_COMPLETE配置完成事件,分別綁定資源組加載完成(GROUP_COMPLETE)執行的方法、
資源組加載出錯(GROUP_LOAD_ERROR)、資源文件加載進度(GROUP_PROGRESS)要執行的方法、資源項加載出錯(ITEM_LOAD_ERROR)要執行的方法。接著正式開始執行RES.loadGroup()並加載資源組(默認preload)裏面的資源。
[javascript] view plain copy
privateonConfigComplete(event:RES.ResourceEvent):void {
RES.removeEventListener(RES.ResourceEvent.CONFIG_COMPLETE,this.onConfigComplete, this);
RES.addEventListener(RES.ResourceEvent.GROUP_COMPLETE,this.onResourceLoadComplete, this);
RES.addEventListener(RES.ResourceEvent.GROUP_LOAD_ERROR,this.onResourceLoadError, this);
RES.addEventListener(RES.ResourceEvent.GROUP_PROGRESS,this.onResourceProgress, this);
RES.addEventListener(RES.ResourceEvent.ITEM_LOAD_ERROR,this.onItemLoadError, this);
RES.loadGroup("preload");
}
5、正在加載資源,觸發RES.ResourceEvent.GROUP_PROGRESS並執行onResourceProgress方法
在這個過程中,會不斷地調用LoadingUI中的公共方法setProgress(event.itemsLoaded,event.itemsTotal);
GROUP_PROGRESS事件會返回當前已加載的數量event.itemsLoaded,以及加載資源的總數event.itemsTotal,我們可以利用這兩個數值進行一些進度的顯示。
6、資源組加載完成,觸發RES.ResourceEvent.GROUP_COMPLETE並執行onResourceLoadComplete方法
將loading頁面移出舞臺,移除之前綁定的一些加載事件,並且執行createGameScene()方法。
7、開始繪制遊戲場景
createGameScene() 函數。
可視化編程
畢竟是國人的工具, 文檔都是中文
http://edn.egret.com/cn/docs/page/1027
http://edn.egret.com/cn/docs/page/936
實戰教程:(必看)
http://bbs.egret.com/thread-1878-1-1.html
創建項目選擇 EUI 項目:
創建可視化 界面
Exml 被綁定到 Ts 文件中 使用。 (註意名字不要一樣!)
本身就是XML
不足的地方有很多, 創建的時候 應該自動生成 *.Exml 和 *.ts 才好 ,並且綁定關系自動生成!。 還有 在界面上可以指定 事件才好, 或者雙擊的時候跳轉到 *.ts 的事件處理位置上。
白鷺引擎開發h5牛牛可控大廳遊戲(項目結構)