引擎適配
支持情況
遊戲是不同於瀏覽器的 JavaScript 運行環境,沒有 BOM 和 DOM API。然而,基本上所有基於 HTML5 的遊戲引擎都是依賴瀏覽器提供的 BOM 和 DOM API 的。所以如果要在小遊戲中使用引擎,就需要對引擎進行改造。
目前,Cocos、Egret、Laya 已經完成了自身引擎及其工具對小遊戲的適配和支持,對應的官方文件已經對接入小遊戲開發做了介紹。
小遊戲是一個不同於瀏覽器的運行環境
無論是怎樣的引擎,最終在遊戲運行時所做的大部分事情都是隨著用戶的互動更新畫面和播放聲音。小遊戲的開發語言是 JavaScript,那麼在引擎的底層就需要透過 JavaScript 呼叫繪製 API 和音訊 API。
一段 JavaScript 程式碼在執行時可以呼叫的 API 是依賴 宿主環境 的。我們最常用的 console.log 甚至不是 JavaScript 語言核心的一部分,而是瀏覽器這個宿主環境提供的。常見的宿主環境有瀏覽器、Node.js 等。瀏覽器有 BOM 和 DOM API,而 Node.js 則沒有;Node.js 有 fs、net 等 Node.js 核心模組提供的檔案、網路 API,而瀏覽器則不具備這些模組。例如,下面這段在瀏覽器中可以正常運作的程式碼,在 Node.js 中運作就會報錯。
let canvas = document.createElement("canvas");因為 Node.js 這個宿主環境根本沒有提供 document 這個內建的全域變數。
ReferenceError: document is not defined小遊戲的運作環境是一個不同於瀏覽器的宿主環境,沒有提供 BOM 和 DOM API,提供的是 wx API。透過 wx API,開發者可以呼叫 Native 提供的繪製、音訊視訊、網頁、檔案等能力。

如果你想創建畫布,你需要調用wx.createCanvas() :
let canvas = wx.createCanvas();
let context = canvas.getContext("2d");如果你想創建一個音訊對象,你需要調用wx.createInnerAudioContext() :
let audio = wx.createInnerAudioContext();
// The src address is for demonstration purposes and does not actually exist
audio.src = "bgm.mp3";
audio.play();如果你想取得螢幕的寬高,你需要調用wx.getSystemInfoSync() :
let { screenWidth, screenHeight } = wx.getSystemInfoSync();但基於 HTML5 的遊戲引擎會透過以下方式去創建畫布、音頻,獲取螢幕寬高:
let canvas = document.createElement("canvas");
let audio = document.createElement("audio");
console.log(window.innerWidth);
console.log(window.innerHeight);此時會產生錯誤,理由如前文所述,小遊戲這個宿主環境根本沒有提供 document 和 window 這兩個在瀏覽器中內建的全域變數。因為小遊戲環境是個不同於瀏覽器的宿主環境。
ReferenceError: document is not defined
ReferenceError: window is not defined所以,基本上所有基於 HTML5 的遊戲引擎都無法直接遷移到小遊戲中使用,因為引擎可能或多或少都用到了 BOM 和 DOM 這些瀏覽器環境特有的 API。只有對引擎進行改造,將對 BOM 和 DOM API 的調用改為 wx API 的調用,引擎才能運行在小遊戲環境中。
除了修改引擎,還有一種適配方式,就是在引擎和遊戲邏輯程式碼之間增加一層模擬 BOM 和 DOM API 的適配層,我們稱之為 Adapter。這層適配層在全域透過 wx API 模擬了引擎會存取到的部分 window 和 document 對象的屬性和方法,使引擎感受不到環境的差異。

Adapter 是使用者程式碼,不是基礎庫的一部分。關於 Adapter 的介紹,請參閱教程Adapter
使用其他遊戲引擎
除去以上提到的兼容了小遊戲平台的遊戲引擎,開發者如果想用其他 HTML5 遊戲引擎來開發小遊戲也是可以的,但需要對其進行修改。修改思路建議為先引入通用的 Adapter 嘗試運行,再把遇到的問題逐一解決。