點選上方“CSDN”，選擇“置頂公眾號”

關鍵時刻，第一時間送達！

作者 | 凌華彬、王哲

責編 | 徐威龍

在微信 6.6.1 版本中，給使用者推送了“玩一個小遊戲才是正經事”的首屏小遊戲入口，一時間整個朋友圈都在跳一跳。相信很多遊戲開發者心癢難耐，想一探究竟。今天就由我和王哲從技術角度給大家科普一下微信小遊戲的開發知識，這一系列文章源自我們 Cocos Creator 引擎團隊和微信團隊合作過程的總結，目前，Cocos Creator v1.8 編輯器已第一時間支援一鍵釋出微信小遊戲版本。

今天這篇文章是介紹微信小遊戲開發系列文章的第一篇。

一、小遊戲生態特點

目前微信小遊戲已釋出 17 款首發遊戲，包括六款棋牌類遊戲，以及歡樂消消消、愛消除、坦克大戰、保衛蘿蔔等休閒遊戲。

從入口方面來說，微信小遊戲目前的主要入口有下面幾個：

• 群或好友分享

• 識別小遊戲二維碼

• 微信聊天列表頁面下拉後出現最近玩過的小遊戲

• 發現 - 小程式

• 發現 - 遊戲 - 我的小遊戲

從技術角度來說，微信小遊戲是微信小程式的基礎上添加了遊戲庫 API。小遊戲只能執行在小程式環境中，所以小遊戲既不是原生遊戲，也不完全等同於 HTML5 遊戲。但實際上小遊戲面向的就是 HTML5 遊戲開發者，為了能夠讓 HTML5 遊戲可以儘可能低成本得移植，小遊戲儘可能複用了 WebGL、JavaScript 等源自瀏覽器的 HTML5 技術。可以說小遊戲是使用 HTML5 技術搭建，具有原生體驗的微信內遊戲產品。

小遊戲採用這樣的模式有很多優點，最大的優點在於穩定和可控。相比於原生，微信可以將遊戲閉環在微信內部；相比於純 HTML5，則不用擔心被遊戲切廣告切支付。

微信小遊戲的執行時環境與曾出現過的其他 Runtime 形態相比有一個很大的好處是「相容 HTML5 生態」。也就是說不論你用哪個遊戲引擎開發的 HTML5 遊戲，都可以很容易地移植到小遊戲上面。這使得微信小遊戲可以直接從巨大的 HTML5 生態中借力。

而在技術之外，微信給小遊戲最強的加持就是社交傳播了。利用好微信的社交生態來獲取新使用者，將在小遊戲的設計中佔據非常重要的地位。我們可以看到，第一批 16 款遊戲中，除了跳一跳有閃屏入口之外，其他的小遊戲入口都藏得比較深，所以流量來源並不是主要靠推薦榜來的，而是通過社交傳播來的。這點和市面上多數導使用者、洗使用者、滾服合服的遊戲設計思路是不同的。

微信開放的優質入口，龐大的使用者基數，以及即點即玩、利於分享的特性將賦予小遊戲極大的潛能。一切都看各位開發者如何把握機會，找到適合微信使用者的遊戲品類和形態。

二、API 之上：開發小遊戲的必備知識點

之前提到，小遊戲的開發主要複用了 HTML5 技術棧，所以開發過 HTML5 遊戲的開發者上手會快很多，甚至很多 HTML5 遊戲都可以很快移植到小遊戲平臺。具體來說，微信小遊戲的開發技術分為三個部分。

1. 底層技術

首先是開發語言，微信小遊戲只支援 JavaScript，當然可以編譯為 JS 的 TypeScript 以及 CoffeeScript 都可以作為開發語言使用。

其次是小遊戲所支援的遊戲庫 API，主要包含 HTML5 的 Canvas 2D API 和 WebGL 1.0 API，使用任何一種 API 都可以完成遊戲最重要的渲染功能，不過不能夠混用，除此之外，只有 WebGL 渲染模式可以支援 3D 渲染。

2. 中介軟體：遊戲引擎

當然，直接使用 Canvas 2D 或 WebGL 來製作遊戲是門檻很高，也非常費時費力的一件事，你肯定不希望一個小遊戲專案拖上一年半載吧？所以使用 HTML5 遊戲引擎其實是非常明智的選擇，引擎封裝出的高層介面可以大大降低開發者的開發門檻，縮短專案週期。目前國內的三家主流引擎 Cocos Creator、Egret、Laya 均已支援小遊戲釋出，Phaser.js、Three.js 等國外 HTML5 引擎雖然並沒有支援直接釋出，經過一些定製也是可以成功執行在小遊戲環境中。

3. 微信 SDK

除此之外，微信小遊戲還提供了豐富的微信內部 SDK 供開發者呼叫，使用這些介面可以完成使用者登陸、轉發、排行榜等常規的社交功能。

不過除了這些常規玩法以外，最讓人欣喜的是通過轉發小遊戲，可以完成玩家在遊戲中的組隊或對戰，加上小遊戲即點即玩的特點，這種邀戰的遊戲體驗可以說是天衣無縫。

歡樂坦克大戰中邀請好友組隊

好友通過點選轉發連結直接進入遊戲完成組隊

這種群轉發 + 即點即玩的機制可能帶來非常有趣的社交玩法。

三、API 之下：理解小遊戲的底層技術架構

開篇提到，小遊戲既不是原生遊戲，也不能等同於 HTML5 遊戲，它的開發環境實際上跟兩者都有非常密切的關係。與 HTML5 的關係就是它複用了 HTML5 的渲染介面，但與原生遊戲又有什麼關係呢？我們用一張圖來解釋：

小遊戲的執行環境其實是微信的原生環境，遊戲的 JavaScript 程式碼並不是通過瀏覽器來執行的，而是通過圖中 JS VM 層獨立的 JavaScript 引擎來執行的。 在 Android 平臺使用 Google 的 v8 引擎，而在 iOS 上則使用蘋果的 JavaScript Core 引擎。

當然 JS 引擎只負責解釋執行 JS 邏輯，並沒有支援渲染介面，那麼渲染介面和諸多的微信功能介面又是怎麼實現的呢？這就不得不提到指令碼繫結技術，這種技術可以將某種原生語言的介面橋接到指令碼介面上，當在指令碼層呼叫介面時，會自動轉發到原生層，呼叫原生介面。微信小遊戲環境用的就是這樣的技術，將 iOS / Android 原生平臺實現的渲染、使用者、網路、音視訊等介面繫結為 JavaScript 介面。這也就是圖中的微信原生層模組到小遊戲層模組的原理。指令碼繫結技術無法在這篇文章中深入探討，如果大家有興趣，可以去了解 Cocos Creator 的 JSB 繫結實現，這也是遊戲引擎中唯一一家完全開源的繫結技術實現。

小遊戲在有了這樣一套框架之後，HTML5 遊戲在移植過程中仍然是會遇到無數 API 相容性問題，最簡單的比如 document 物件不存在，Image 物件不存在。為了降低移植成本，微信團隊提供了一個 Adapter 指令碼，適配了一部分瀏覽器介面。

如上圖所示，Adapter 部分提供了大部分 HTML5 遊戲所依賴的瀏覽器介面，這張圖也比較完整得描繪了微信小遊戲中開發者可以使用的介面模組：

• 瀏覽器渲染介面

• 瀏覽器 Adapter

• 微信服務 SDK

值得一提的是，Adapter 指令碼已經不再繼續維護了，所以額外的介面適配都需要開發者自己完成，而依賴於 DOM 介面的大多數功能都是無法適配到小遊戲環境中的。

剛剛也提到推薦大家使用遊戲引擎去開發小遊戲，小遊戲環境的基礎之上，遊戲引擎不僅封裝了高層介面，還盡力抹平了瀏覽器與小遊戲環境之間的差異。

從圖中可以看到，如果不使用遊戲引擎，開發者面對的是小遊戲的底層 API，在使用了遊戲引擎後，面對的是引擎的 API。

總結遊戲引擎為開發者所做的工作，包含下面幾個方面：

• Framework：

高層 API 封裝對於遊戲開發更便利；

資源載入適配；

事件處理適配；

音訊播放適配；

視窗適配；

輸入框適配；

新增其他缺失的介面，比如增加 DOM Parser 用於解析 TileMap。

• EDITOR：

優化程式-美術-策劃的協同效率；

優秀的遊戲編輯器可以大幅縮短開發週期。

• GENERAL：

優秀的遊戲引擎提供高裝置相容性，穩定的執行效能；

跨平臺遊戲引擎提供無縫釋出 HTML5、小遊戲、原生平臺的強大能力。

高效率的編輯器帶來開發成本的降低；低入門門檻降低了人力成本；高相容性和穩定的效能降低維護成本；跨平臺/渠道帶來強大的流量獲取能力。對於開發者來說，這些就是生存和盈利的保障！

四、上手除錯小遊戲

需要注意的是，在撰文的今天，微信公眾平臺目前尚沒有開放開發者申請遊戲類目的許可權，所以還只能通過小遊戲開發工具的 “體驗小遊戲” 功能來做技術層面的嘗試。不過不用著急，微信團隊應該很快就會開放遊戲類目的申請。

1. 微信開發者工具介紹

下面這張圖就是微信開發者工具在做小遊戲開發時的基本佈局：

微信開發者工具基本佈局

其中上方是工具欄，包含最重要的編譯、預覽和配置詳情；左側是模擬器視窗用來展示遊戲執行效果；右上方是程式碼編輯器，可以檢視專案中的檔案列表，編輯文字檔案；右下是偵錯程式視窗，使用方法和 Chrome Devtools 完全一致。

2. 微信小遊戲配置和入口檔案

在微信小遊戲專案中，project.config.json 和 game.json 配置檔案是大家首先需要新增的，其中 project.config.json 可以定義你的小遊戲 appid、遊戲名、配置等。而 game.json 主要用於指定遊戲朝向和網路超時時間。

另外，小遊戲不支援任何 html 檔案，入口檔案是 game.js，你需要啟動的引擎和遊戲指令碼都應當在 game.js 中用 require 函式引入，require 函式的用法遵循 node.js 的 require 規範。

3. 編譯和預覽

微信開發者工具會自動監聽指令碼和配置的變動，發生變動時會自動更新，你也可以通過頂部的編譯按鈕觸發重新編譯。當你需要在手機上預覽小遊戲的效果時，需要點選預覽按鈕來生成二維碼，掃碼即可進入小遊戲。生成二維碼的過程實際上是在壓縮和上傳小遊戲包到微信 CDN 上，所以會花費一些時間。

4. 詳情配置

詳情配置中包含一些重要的配置選項，包括：

• 除錯基礎庫：小遊戲應該選擇 game；

• ES6 轉 ES5：是否將 ES6 指令碼轉換為 ES5；

• 程式碼上傳時自動壓縮：是否壓縮指令碼；

• 不校驗安全域名、TLS 版本以及 HTTPS 證書：當你在本地測試，或通過非正式域名測試時，需要開啟這個選項才能夠正常訪問你的伺服器。

五、市場展望

最後我們從市場上來看，其實小遊戲青睞的 HTML5 技術棧蘊含著巨大的機遇，目前使用 JavaScript 支援跨平臺的遊戲引擎已經不少。以 Cocos Creator 為例，編寫一套遊戲程式碼，可以在編輯器中無縫釋出 HTML5 手機頁遊、PC 頁遊、手機原生遊戲、小遊戲。我們可以簡單計算一下，根據 12 月初伽馬資料的行業報告，國內 2017 年手機原生遊戲 1162 億，PC 端遊 648 億，PC 頁遊 156 億，所以按比例簡單計算的話，手機頁遊的市場空間 = 1162 ÷ 648 x 156 = 每年 280 億人民幣。

如果進一步考慮 Flash 宣佈 2020 年停更，市面大量 PC 頁遊都開始轉用 HTML5 技術製作，而手機原生上也出現了大量的微端產品，那麼如果不考慮此消彼長的制約， HTML5 技術可以支撐的遊戲市場規模應該 = 280 億 手機頁遊 + 156 億 PC 頁遊 + 部分手機原生遊戲 ≈ 每年 500 億人民幣。 

500 億人民幣還只是計算國內的規模。根據國外 Newzoo 在年中的資料，中國遊戲產業規模佔全球 25%，那麼 HTML5 技術理論上可以支撐的全球手機頁遊、手機原生、PC 頁遊市場容量上限可達每年 2000 億人民幣。 

所以，掌握 HTML5 技術棧，掌握微信小遊戲、QQ 釐米秀、Facebook Instant Games 等「手機頁遊」新平臺上的社交遊戲開發技術，洞悉這些社交平臺上的使用者特點、和提出針對性的遊戲設計，對於想進入這個領域的遊戲開發商而言，是近期迫在眉睫的事。

而且目前普遍的觀點是，在資本的推動下，手機頁遊的時間視窗應該只有 1~1.5 年，這裡面會有原生遊戲大廠佈局成功的，也會有新晉的研發商和發行商。而在遊戲行業產生這樣的風口，平均 5 年左右才能有一次。

作者簡介：

凌華彬，Cocos Creator 主程、Game Jamer、玩家，曾負責 Cocos2d-JS、熱更新框架、JSB 框架，現在主要在負責小遊戲釋出流程、Cocos Creator 引擎新渲染器架構。

王哲，Cocos 引擎創始人、首席客服。

————— 推薦閱讀 —————