前言：
昨天的文章中簡單的介紹了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、開始繪制游戲場景
在上述基本的加載以及准備階段完成后，我們就可以開始繪制我們的游戲場景啦。當然，現在什么都沒有，空空如也。
但是，我們已經完成了基本步驟啦。下一節，我將會繼續詳細講解游戲的代碼開發部分啦。
接下來將繼續更新第三篇，敬請期待。
轉載請注明出處，謝謝。
