weixin minigame tutorial
1.0.0
該存儲庫包含
目前的演示包括以下功能：
├───game.js : main entry point, Phaser. Game main function declared here
├───game.json : minigame configuration
├───images : static assets repository
└───js
├───game
│ ├───managers : each manager is a set of functions
│ │ ├───collisions.js : handles all collision events
│ │ ├───db.js : backend CRUD functions for leaderboard (based on Leancloud API)
│ │ ├───events.js : main events of the game functions
│ │ ├───generators.js : objects generators functions
│ │ ├───leaderboard.js : functions that handle leaderboard and ranking algorithms
│ │ ├───wechat.js : functions that handle WeChat-related API (getting user profile, user friends list etc...)
│ └───objects : Each object is a Class, with its separated file
│ ├───Background
│ ├───Bird
│ ├───Button
│ ├───Floor
│ ├───Pipe
│ ├───objects.js : singleton namespace window.objects where all the game objects live
│ ├───phases.js : different game phases (preload, create, update (called every frame), render (called every frame))
│ └───state.js : singleton namespace window.state where all the game states and parameters live
└───libs
└───lodash-modules
整體架構：跟網頁遊戲差不多
微信小遊戲是基於網頁技術的，主要使用的語言是Javascript。該系統與網路上的系統類似：畫布元素是可存取的，我們可以在每個畫面上在其上繪圖。我們可以存取WebGL API，從而能夠使用GPU使用Shaders（GLSL語言）進行運算。
ctx.fillRect(25, 25, 100, 100);
ctx.clearRect(45, 45, 60, 60);
ctx.strokeRect(50, 50, 50, 50);
但實施上有一些差異
但是，WebGL 和 Canvas API 實作與大多數 Web 瀏覽器上可以找到的本機 Web 實作不同。小遊戲的運行環境在iOS上為JavaScriptCore，在Android上為V8。它們都是沒有BOM和DOM的運作環境。沒有全域文檔，也沒有視窗對象。所以，如果你想使用 DOM API 建立 Canvas 和 Image 之類的元素，就會拋出錯誤。更多關於官方小遊戲文檔（中文）。
網路庫可以適應小遊戲環境
為了彌合網頁和小遊戲之間的差距，微信小遊戲團隊一直在開發一個特殊的庫，weapp-adapter。目標是使網路庫與迷你遊戲相容。然而，該程式庫的當前實作仍然不完美且不完整，並且通常需要額外的工作來修復您打算使用的每個第三方程式庫。
許多網頁遊戲引擎已經移植（官方和非官方）
| 引擎 | 重點 | 地位 |
|---|---|---|
| 可可 | 以中文2d UI為基礎的網頁遊戲引擎 | 官方支持 |
| 拉亞 | 中國2D & 3D網頁遊戲引擎 | 官方支持 |
| 白鷺 | 以中文2d UI為基礎的網頁遊戲引擎 | 官方支持 |
| 統一 | 3D/2D遊戲引擎，業界標準 | 尚不支持 |
| 移相器（網路） | 2D網頁遊戲引擎，網頁遊戲產業標準 | 透過非官方端口工作 |
| 三人組 | 3D Web 引擎，業界標準 | 透過非官方端口工作 |
我可以編寫自己的迷你遊戲嗎？是的，您已經可以編寫自己的迷你遊戲了！您需要的一切，從文件到開發人員工具，都是公開可用的。
還能發布嗎？不，它還不能發布，但您仍然可以在手機上預覽。 （更多有關 IDE 演示的內容請參見下文）
什麼時候發布？我們還不知道。
遊戲圖形風格：2D 和 3D 皆可。
由於可以存取 WebGL，我們還可以顯示 3D 遊戲，這將由 GPU 加速。
效能：比網頁遊戲優化稍好的系統
該系統還很年輕，處於 Beta 測試階段，但我們已經可以看到其效能與網頁遊戲的表現非常相似。目前，一個好的經驗法則是，就限製而言，不要期望超越網頁遊戲的功能。
規模仍然是主要限制因素。
迷你遊戲的最大限制之一來自於它的大小。微信目前只允許下載最大4MB包的遊戲。您的遊戲可能能夠從外部伺服器下載額外的資源，但請考慮到每次遊戲啟動時都必須取得這些資源。因此，遊戲在資源方面應該相當輕，3D 遊戲應該使用低多邊形 3D 物件和低品質紋理。
Web → 小遊戲轉換：很大程度取決於底層程式碼庫
可以將網頁遊戲轉換為小遊戲。然而，根據所使用的特定庫和遊戲引擎，該過程可能需要幾天到幾個月的開發時間。需要事先對遊戲原始碼進行審核，以估計特定改編需要多長時間。
迷你遊戲 → 網頁轉換：速度很快！
如果使用標準網路遊戲框架進行迷你遊戲開發，例如 Phaser，您的程式碼大部分已經與網路相容，因此無需太多調整即可在瀏覽器上運行。
IDE和調試工具與小應用程式相同。然而，這些都是純中文的。調試體驗總體上非常好，儘管由於它的年輕性可能會有些問題。
為了清晰起見，整個介面已被翻譯成英文。
小遊戲的核心興趣點之一是無縫存取微信平台內嵌入的社交功能，這增加了小遊戲的活力和參與率。這裡介紹了主要機制以及如何使用它們。
取得目前使用者資訊
wx.login({
success: function () {
wx.getUserInfo(userInfos)
}
})
您可以獲得的其他個人資訊：
wx.getLocation() => user location
wx.getWeRunData() => get podometer data from werun
https://mp.weixin.qq.com/debug/wxagame/dev/tutorial/open-ability/authorize.html?t=201832
取得玩過遊戲的好友資料列表
wx.getFriendCloudStorage()
取得玩過遊戲的群組資料列表
wx.getGroupCloudStorage()
小遊戲
Phaser 遊戲庫
移相器網站
Phaser：創建您的第一個遊戲教程
移相器範例
不要相信預覽，一定要在真實設備上進行測試。
這是在模擬器上運行但不在真實設備上運行的一段程式碼的範例：
static preload(game) {
game.load.image('bg', 'js/game/objects/Background/bg.jpg') => working on both emulator + phone
// game.load.image('bg', './js/game/objects/Background/bg.jpg') => working only on emulator
}
限制第三方函式庫的使用，因為通常需要額外的工作
像 lodash 這樣的函式庫並不是開箱即用的。您經常需要進入原始程式碼並根據 DOM/BOM API 修改部分才能真正實作載入它們。在Lodash上，你可以逐一添加特定模組來解決問題，而不是一次添加整個庫。但這並不總是那麼容易！
npm install --save lodash.forEach
NOT
npm install --save lodash
將程式碼分成較小的檔案以使調試更容易
目前 IDE 偵錯系統的工作方式與 Chrome 和 Firefox 上的對應系統不同。我遇到的最大的挫敗感來源之一是，許多問題最終都會拋出非常模糊的、非特定的錯誤訊息，除了失敗的文件之外，沒有任何關於問題出處的資訊。因此，將程式碼分成更小的區塊非常重要，因為在沒有任何提示的情況下在一千行檔案中查找拼字錯誤比在 50 行檔案中查找拼字錯誤要困難得多。
