微信小遊戲跳坑之旅（一）——使用白鷺引擎開發之建立項目

　　最近花了兩週時間在微信小遊戲裏踩坑，以爲挺有意思的，在這裏分享一下開發的過程，點此可查看項目 RedHat 。

　　首先介紹一下基礎：小遊戲 官網教程 、騰訊課堂的課程： 白鷺教育 - 成語大挑戰小遊戲開發 （視頻中的資料連接：https://pan.baidu.com/s/1kkrCUwn0hikPLVg11PPFAA 密碼：3gtt）、B站的教程：使用白鷺引擎快速開發微信小遊戲最全指南 。

　　這個小遊戲是一個跳躍類遊戲，基於白鷺（Egret）引擎開發，選用該引擎的緣由是目前其對小遊戲的開發支持較好，能夠少踩些坑。上張圖展現一下：

　　

　　圖 1 - 1 首頁.png

　　1、安裝 Egret launcher

　　　　下載後安裝，而後在引擎頁選擇安裝 5.1.2 以上版本，推薦最新版本；在工具頁下載 Egret Wing 3 ，這是一個編輯器，能夠很方便地編輯 exml 格式的文件，更方便地佈局頁面。等待引擎及 Egret Wing 3 安裝好後便可進入項目頁建立新的項目了。

 

　　2、建立新項目，熟悉 Egret Wing 3

　　　　一、建立項目：

　　　　在項目頁點擊 建立項目 ，而後輸入項目名稱和項目存放的路徑，由於我這個項目用到的是 EUI ，全部我建立的是一個 EUI 項目，引擎版本選擇剛剛下載的那個版本便可。選擇擴展庫 建議勾選上 game 遊戲庫，也能夠在開發的時候在添加到

　　項目中，egret.setTimeOut 方法須要 game 遊戲庫的支持；第六個的 tween 緩動動畫庫是遊戲中的物體緩動的必需庫文件。舞臺尺寸默認，小遊戲不支持 showAll 的縮放模式，須要更改，而後點擊 建立 。

　　　　

　　　　圖 2 - 1 建立項目.png

　　　　二、發佈編譯項目：

　　　　依據下圖進行該項目的的發佈設置，選中 微信小遊戲 並 設爲默認發佈 ；而後填入本身的 AppID，在註冊微信公衆平臺的時候必定要注意，在微信公衆平臺的 設置 > 基本設置 > 服務類目 中第一個大類必定要選擇 遊戲 ，不然在編譯項目後會提示無

　　 app.json，看太小遊戲官網教程的話就知道小遊戲加載的是 game.json ；填上項目名稱後點擊 肯定 ，等待發布編譯，以後操做下圖中的第六步，打開 Egret Wing 3，而後在該編輯器中進行編寫代碼。

　　　　

　　　　圖 2 - 2 發佈設置.png

 　　　　三、熟悉 Egret Wing 3：

　　　　打開項目後可自行查看各個文件，感覺一下每一個文件是什麼做用。其中 egretProperties.json 是一個很重要的文件，打開的時候確認 current 的值，若是是 web 的話，點擊調試按鈕的時候會彈出 H5 頁面查看小遊戲的效果，更改成 wxgame

　　便可在點擊調試按鈕的時候直接打開微信開發者工具進行預覽，下圖左上角的箭頭即指向調試按鈕。前面提到的勾選 game 庫，若是後期添加的話，須要在 egretProperties.json 中按紅框的格式添加，而後在終端輸入 egret build -e 進行加載。

　　　　

　　　　圖 2 - 3 egretProperties.json.png

　　　　src 文件夾下的 Platform.ts 是 Egret 引擎和微信小遊戲之間的橋接文件，主要功能是使用小遊戲的 API ，Main.ts 文件是在該項目中加載 Platform.ts 文件。同時，爲了不混淆，咱們在 src 文件夾下新建 game 文件夾用於存放咱們本身的

　　遊戲文件，右擊game 文件夾選擇 新建模板文件 > 新建 EUI 組件 ，輸入類名後，修改 皮膚默認路徑 ，也放到 resource 的 game 文件夾下，避免混淆。

　　　　

　　　　圖 2 - 4 新建 EUI 組件.png

　　　　能夠對照着我放在 Github  上的源碼，每一個新建的 EUI 組件我所有采用單例模式編寫，利於後期調用被其餘組件調用該組件中的方法。下圖中的紅框便是快速佈局功能區。

　　　　

　　　　圖 2 - 5 編輯 exml 文件.png

　　3、Egret 中重要的 API

　　由於 Egret 不止是針對微信小遊戲的引擎，因此其官網資料體系比較大，對小遊戲有用的主要是如下幾個：

　　開發者中心 > 文檔 > Egret Engine 2D 、Egret 擴展庫 、Egret API 、Egret 教學示例 、Egret 交流社區 。

　　其中在我這個項目中比較重要的幾個點分別爲： 滾動控制容器 、setTimeOut 、緩動動畫及其 wait 延遲方法 、碰撞檢測 、緩動動畫的暫停與恢復 、經過深度值獲取子對象來設置參數（深度管理） 、Timer定時器（後期剔除）等，在 GamePage.ts 中可查看具體用法。

　　由於發佈須要軟著登記，全部暫時不發佈了，先玩玩單機版的吧。