前言：微信小游戲源碼是基於HTML5和微信小程序庫開發的網頁小游戲，其具有運行速度快、互動性好和平台移植容易等特點。
微信小游戲源碼所包含的庫：
●一個相位-小游戲模板,准備使用；
●《Flappy Bird》的一一個完整的迷你游戲演示；
●微信小游戲指南；
●完全集成了phaser 2.9 + pixiJs + p5重力引擎(來源ittlee /微信小游戲phaser)；
●基於es6的可擴展代碼結構(基於導入/導出特性)；
●游戲功能使用:
。基於JSON的精靈動畫；
。導入和緩存資產系統；
。動畫；
。一個重力系統；
。碰撞系統；
。基於Leancloud的社交排行榜系統。
代碼結構：
├───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
微信小程序游戲開發指南：
1.微信小游戲源碼是如何運作的?
2.我是否可以編寫自己的小游戲?什么時候發布?
3.限制是什么?就表現而言,可接受的期望是什么?
4.網頁-迷你游戲和迷你游戲→網頁轉換是否可行?
5.開始
- IDE和調試工具演示
7.讓你的小游戲具有社交性可用的api
8.開始的資源和鏈接
9.在你開始之前,給你一些建議
1)微信小游戲源碼是如何運作的?
整體架構:就像網頁游戲
微信小程序游戲是基於網頁技術，主要使用的語言是Javascript。這個系統與網絡上的類似:canvas元素是可訪問的，我們可以在每一幀上繪制。我們可以訪問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這樣的元素，它會拋出一個錯誤。更多官方小游戲文件(中文)。
Web Libraries可以適應小游戲環境
為了在網頁和小游戲之間架起橋梁，微信小游戲團隊一直在開發一個特殊的庫，武器適配器。我們的目標是讓網頁庫與迷你游戲兼容。然而，該庫的當前實現仍然不完善，而且經常需要額外的工作來修復您打算使用的每個第三方庫。
2)我是否能夠編寫自己的小游戲?什么時候發布?
我是否可以編寫自己的小游戲?是的，你已經可以編寫自己的小游戲了!你所需要的一切，從文檔到開發工具，都是公開的。
有什么限制?就表現而言，可接受的期望是什么?
游戲圖像風格:2D和3D都是可能的。
多虧了WebGL，我們還可以顯示3D游戲，這將是GPU加速的。
性能:比Web游戲稍微優化的系統
這個系統還很年輕，處於beta測試階段，但我們已經看到它的性能與網頁游戲非常相似。就目前而言，一個很好的經驗法則是，不要期望網頁游戲能做的更多。
規模仍然是主要限制因素。
迷你游戲的最大限制之一是它的大小。微信目前只允許最多4mb的游戲包。你的游戲可能能夠從外部服務器下載額外的資產，但要考慮到這些資產必須在每次游戲啟動時獲取。所以，就資產而言，游戲應該是相當輕的，3D游戲應該使用低多邊形3D對象和低質量紋理。
4)網頁游戲→微信迷你游戲轉換是否可行?微信小游戲→網頁游戲的轉換如何?
網頁→迷你游戲轉換:主要取決於底層代碼庫
將網頁游戲轉換成迷你游戲是可能的。然而，根據所使用的特定庫和游戲引擎，這個過程可能需要數天甚至數月的開發時間。事先審核游戲源代碼是必要的，以估計具體的調整需要多少時間。
迷你游戲→網頁轉換:非常快!
如果使用標准的網頁游戲框架進行迷你游戲開發，如Phaser，你的代碼將基本兼容網頁，所以無需太多調整就可以在瀏覽器上運行。
以官方迷你游戲為例
a、下載微信miniapp和迷你游戲IDE；
b、按照以下步驟運行騰訊示例代碼；
c、你現在可以在你的手機上通過點擊Eye按鈕和掃描QRcode預覽迷你游戲樣本。
6)IDE和調試工具演示
IDE和調試工具與迷你應用程序相同。不過，這些都是純中文的。總的來說，調試經驗是非常好的，盡管它可能有一些bug，因為它的年輕。
為了清晰起見，這里將整個界面翻譯成英文。
7)讓你的小游戲具有社交性:可用微信api
迷你游戲的核心趣味之一是無縫接入微信平台內的社交功能，這增加了它們的活力和用戶粘性。下面介紹主要機制以及如何使用它們。
獲取當前用戶信息
wx.login({
success: function () {
wx.getUserInfo(userInfos)
}
})
你得到什么:
。用戶名；
。城市；
。語言；
。性別；
。照片URL；
●你還不能得到的:
。openID(但這可能是因為迷你游戲還沒有綁定到官方賬號,盡管openID很快就可以訪問；
●你永遠不會得到的:
。電話號碼；
。真實姓名；
。任何其他個人資料資料。
你可以獲得的其他個人信息:
wx.getLocation() => user location
wx.getWeRunData() => get podometer data from werun
獲取玩游戲的好友數據列表
wx.getFriendCloudStorage()
從用戶的好友列表獲取每個用戶的數據;；
這些數據可以被修改和寫入；
有利於好友排行榜和游戲中的好友狀態提示；
獲取Group-who-played-the-game數據列表
wx.getGroupCloudStorage()
從共享小游戲的群組中獲取每個用戶的數據；
這些數據可以被修改和寫入；
適合群體游戲；
8)開始的資源和鏈接
迷你游戲
●文檔
。迷你游戲官方文檔
●代碼存儲庫
。Phaser +小游戲模板，准備用戶littlelee /微信小游戲Phaser。Threejs +小游戲端口
●IDE
移相器游戲庫
●移相器的網站
●Phaser:創建你的第一 個游戲教程
●移相器的例子
●2.6移相器文檔
9)在你開始之前給你一些建議
不要相信預覽，一定要在真實設備上進行測試。
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上的調試系統不同。我遇到過的最大的挫折之一是，許多問題最終都會拋出一個非常模糊的、非特定的錯誤消息，除了失敗的文件之外，沒有任何關於問題來自哪里的信息。因此，將代碼划分為更小的塊是非常重要的，因為在1000行文件中尋找一個拼寫錯誤，而沒有任何提示，比在50行文件中找到一個拼寫錯誤要困難得多。