微信「跳一跳」帶火小游戲，開發者如何快速上手？

在微信 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 厘米秀、非死book Instant Games 等「手機頁游」新平臺上的社交游戲開發技術，洞悉這些社交平臺上的用戶特點、和提出針對性的游戲設計，對于想進入這個領域的游戲開發商而言，是近期迫在眉睫的事。

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

來自: 游戲大觀