前言： 昨天的文章中簡單的介紹了Egret白鷺引擎從安裝到基本的使用配置等問題，今天著重介紹H5小游戲開發的起步階段，如Wing面板的使用，素材的處理，類的說明，開始佈局等等。 整體概況： 根據上一篇文章的提示，我們找到index.html，將幀率data-frame-rate修改成60。根據設計圖 ...
前言：
昨天的文章中簡單的介紹了Egret白鷺引擎從安裝到基本的使用配置等問題，今天著重介紹H5小游戲開發的起步階段，如Wing面板的使用，素材的處理，類的說明，開始佈局等等。
整體概況：
根據上一篇文章的提示，我們找到index.html，將幀率data-frame-rate修改成60。根據設計圖寬高，我將data-content-width設成640，data-content-height設成1038；
就是下圖不包括微信工具欄的高度。至於適配模式我先設成exactFit，以canvas的渲染模式運行，這些可根據實際需求設定。
保存設置後我們可以關閉index.html了，然後點擊Wing面板工具欄中的“構建並運行”按鈕，或者點擊“項目”—“運行”。
如圖所示：
運行後，Wing會啟動你的預設瀏覽器並以伺服器環境方式打開該項目的index頁面，為了顯示和調試方便，我直接用F12以手機模式瀏覽。
如果編譯和運行成功，你會看到如下的Egret的預設頁：
接下來我們找到項目中的SRC目錄，並打開LoadingUI.ts，這是官方預設的loading頁面的LoadingUI類。
它的效果如圖所示，我們可以在chrome控制臺中降低網速來查看loading頁的效果。
處理代碼：
接下來我們就要開始操作代碼了，我們找到項目src目錄下的“主類”，但是Main並非是真正的主類，它跟C等其他的語言的主類不同，不過基本功能是一樣的，就是進入主程。
由於官方給我們提供了一個案例，所以我打開Main.ts並把預設的一些效果和註釋刪除。
但是Main類下的createBitmapByName()方法，以及前面的載入資源以及配置都要留下來，這部分是我們需要復用的。
把沒有用的代碼刪去之後，我們就要寫自己的代碼了。摁ctrl+s保存代碼，點擊“項目”並勾選“自動構建”可以在保存後自動編譯，然後我們打開瀏覽器並刷新，我們現在可以看到什麼都沒有。
處理資源：
當我們把冗餘的代碼刪去之後，同時我們也要把預置的資源素材刪去，首先我們進入resource目錄下，把asset和config文件夾下的所有素材刪掉。
刪除完之後就把自己需要的素材，例如圖片和音頻等放置於asset目錄下，而配置文件json之類的則放置於config目錄下。
註意，default.res.json這個資源配置文件不可刪除哦，但可以修改名字和路徑，一般減少出錯我們就讓它保持原樣就好。
當我們把自己使用到的資源放置於asset目錄下後，我們再回到wing面板，點擊default.res.json進入資源管理界面並刷新，假如你在resource目錄下新增了素材，就會彈出以下視窗。
點擊“是”，則自動添加所有資源到json資源配置文件default.res.json中。
註意：假如資源中有黃色提示框，則表示該資源已被刪除，應該將該配置項同步刪去或者修改路徑。點擊右鍵，刪除資源。
在資源配置頁，我們可以看到下方有個資源組。它的意思是我們可以分不同的組別或者批次來載入資源。
譬如在場景一，我們只需要用到部分資源，我們就可以把這部分資源獨立放置在一組，進入場景一時進行預載入。
假設到了場景二，我們則繼續把場景二那一組資源進行載入，載入完再繼續使用。這樣可以達到分批載入的效果。
現在這個案例，暫時先用到一個組。所以我會把所有資源拖進preload當中，在進入游戲之前全部載入。
把全部資源拖進去了preload組之後，已選用的資源會顯示另外一種背景色。然後我們點擊ctrl+s進行保存。
我們除了可以使用拖拉選用資源外，我們還可以使用代碼進行配置，手動修改json。我們可以點擊資源面板的左上角“源代碼”按鈕查看剛剛我們保存的素材配置。
“groups”：代表的是我們使用了多少個資源組，每個資源組分別需要載入什麼素材，這個資源組叫什麼等等。這些所有都使用字元串命名的方式進行辨識。
“resources”：則涵蓋了所有的資源名字，類型以及其路徑。註意的是這裡不需要使用絕對路徑，絕對路徑稍後會在Main類中配置。
另外，資源配置的命名規則等等的設置可以通過點擊“項目”-“項目屬性”打開配置面板，然後按照個人喜好進行修改。
接著我們回到Main.ts中，找到Res.loadConfig()方法
該方法的第一個參數代表的是這個配置文件json的路徑，而第二個參數代表的是裡面載入的資源的路徑首碼，一般情況下可以使用相對路徑，但我們也可以寫成外部變數，方便修改成絕對路徑。
在上述步驟完成後，我們就可以進行基本的編碼了。在編碼之前，我們先看看Main類幹了什麼。
Main類邏輯：
由於我們之前已經在index.html頁面中聲明瞭入口類（data-entry-class），所以當頁面載入完之後，就會自動執行Main類中的構造函數。
並且在這個類構建完成後，會自動添加到舞臺（stage）。
1、實例化Main類
這個過程是我們創建好Main類後，由Egret內部完成的，對於我們來說是不可見的，我們把Main設為入口類就好。
2、constructor初始化
在實例化Main類的過程中，本類的構造函數會被自動調用，進而初始化一些我們要用數據或方法。
這裡由於Main繼承自白鷺的基本容器egret.DisplayObjectContainer並且會自動添加到舞臺中，所以在初始化階段給Main綁定了添加到舞臺事件，用於啟動界面。
3、Main實例化完成並添加到舞臺
由於這一步對我們來說，是不可見的，在我們定義好Main類並且運行程式後，egret會自動執行這一步。
4、Main被添加到舞臺，觸發旗下的onAddToStage方法
觸發了onAddToStage方法後會將LoadingUI類實例化，並添加到界面，這時候我們就可以看見一個白屏和初始的載入進度了。
然後我們可以綁定載入配置文件完成事件之後執行的方法，並且執行RES.loadConfig（），開始載入json配置文件。
5、配置文件載入完成後，執行onConfigComplete方法
移除CONFIG_COMPLETE配置完成事件，分別綁定資源組載入完成（GROUP_COMPLETE）執行的方法、
資源組載入出錯（GROUP_LOAD_ERROR）、資源文件載入進度（GROUP_PROGRESS）要執行的方法、資源項載入出錯（ITEM_LOAD_ERROR）要執行的方法。
接著正式開始執行RES.loadGroup（）並載入資源組（預設preload）裡面的資源。
6、正在載入資源，觸發RES.ResourceEvent.GROUP_PROGRESS並執行onResourceProgress方法
在這個過程中，會不斷地調用LoadingUI中的公共方法setProgress(event.itemsLoaded, event.itemsTotal);
GROUP_PROGRESS事件會返回當前已載入的數量event.itemsLoaded，以及載入資源的總數event.itemsTotal，我們可以利用這兩個數值進行一些進度的顯示。
7、資源組載入完成，觸發RES.ResourceEvent.GROUP_COMPLETE並執行onResourceLoadComplete方法
將loading頁面移出舞臺，移除之前綁定的一些載入事件，並且執行createGameScene()方法。
8、開始繪製游戲場景
在上述基本的載入以及準備階段完成後，我們就可以開始繪製我們的游戲場景啦。當然，現在什麼都沒有，空空如也。
但是，我們已經完成了基本步驟啦。下一節，我將會繼續詳細講解游戲的代碼開發部分啦。
接下來將繼續更新第三篇，敬請期待。
轉載請註明出處，謝謝。
