微信小程序開發(fā)文檔-小程序開發(fā)基礎(chǔ)教程-對引擎的支持

對引擎的支持

支持情況

許多開發(fā)者對小游戲?qū)?Cocos、Egret、Laya、Unity 等游戲引擎的支持情況非常關(guān)心。但是小游戲是一個不同于瀏覽器的 JavaScript 運行環(huán)境，沒有 BOM 和 DOM API。然而，基本上所有基于 HTML5 的游戲引擎都是依賴瀏覽器提供的 BOM 和 DOM API 的。所以如果要在小游戲中使用引擎，需要對引擎進(jìn)行改造。

目前，Cocos、Egret、Laya 已經(jīng)完成了自身引擎及其工具對小游戲的適配和支持，對應(yīng)的官方文檔已經(jīng)對接入小游戲開發(fā)做了介紹。

• Cocos：http://docs.cocos.com/creator/manual/zh/publish/publish-wechatgame.html
• Egret：http://developer.egret.com/cn/github/egret-docs/Engine2D/minigame/introduction/index.html
• Laya：https://ldc.layabox.com/doc/?nav=zh-as-3-4-5

Unity 目前還沒有對小游戲進(jìn)行適配。不過小游戲提供了對大部分 Canvas 2d 和 WebGL 1.0 特性的支持，支持情況參見 RenderingContext，有能力的開發(fā)者可以嘗試自行適配。

小游戲是一個不同于瀏覽器的運行環(huán)境

無論是怎樣的引擎，最終在游戲運行時所做的大部分事情都是 隨著用戶的交互更新畫面和播放聲音。小游戲的開發(fā)語言是 JavaScript，那么在引擎的底層就需要通過 JavaScript 調(diào)用繪制 API 和音頻 API。

一段 JavaScript 代碼在運行時可以調(diào)用的 API 是依賴于 宿主環(huán)境 的。我們最常用的 console.log 甚至都不是 JavaScript 語言核心的一部分，而是瀏覽器這個宿主環(huán)境提供的。常見的宿主環(huán)境有瀏覽器、Node.js 等。瀏覽器有 BOM 和 DOM API，而 Node.js 則沒有；Node.js 有 fs、net 等 Node.js 核心模塊提供的文件、網(wǎng)絡(luò) API，而瀏覽器則不具備這些模塊。例如，下面這段在瀏覽器中可以正常運行的代碼，在 Node.js 中運行就會報錯。

let canvas = document.createElement('canvas')

因為 Node.js 這個宿主環(huán)境根本沒有提供 document 這個內(nèi)置的全局變量。

ReferenceError: document is not defined

小游戲的運行環(huán)境是一個不同于瀏覽器的宿主環(huán)境，沒有提供 BOM 和 DOM API，提供的是 wx API。通過 wx API，開發(fā)者可以調(diào)用 Native 提供的繪制、音視頻、網(wǎng)絡(luò)、文件等能力。

如果你想創(chuàng)建畫布，你需要調(diào)用 wx.createCanvas()

let canvas = wx.createCanvas()
let context = canvas.getContext('2d')

如果你想創(chuàng)建一個音頻對象，你需要調(diào)用 wx.createInnerAudioContext()

let audio = wx.createInnerAudioContext()
// src 地址僅作演示，并不真實存在
audio.src = 'bgm.mp3'
audio.play()

如果你想獲取屏幕的寬高，你需要調(diào)用 wx.getSystemInfoSync()

let { screenWidth, screenHeight } = wx.getSystemInfoSync()

但是基于 HTML5 的游戲引擎會通過以下方式去創(chuàng)建畫布、音頻，獲取屏幕寬高

let canvas = document.createElement('canvas')
let audio = document.createElement('audio')
console.log(window.innerWidth)
console.log(window.innerHeight)

此時會產(chǎn)生錯誤，理由如前文所述，小游戲這個宿主環(huán)境根本沒有提供 document 和 window 這兩個在瀏覽器中內(nèi)置的全局變量。因為小游戲環(huán)境是一個不同于瀏覽器的宿主環(huán)境。

ReferenceError: document is not defined
ReferenceError: window is not defined

所以，基本上所有基于 HTML5 的游戲引擎都不能直接遷移到小游戲中使用，因為引擎可能或多或少都用到了 BOM 和 DOM 這些瀏覽器環(huán)境特有的 API。只有對引擎進(jìn)行改造，將對 BOM 和 DOM API 的調(diào)用改成 wx API 的調(diào)用，引擎才能運行在小游戲環(huán)境中。

除了修改引擎，還有一種適配方式，即在引擎和游戲邏輯代碼之間加一層模擬 BOM 和 DOM API 的適配層，我們稱之為 Adapter。這層適配層在全局通過 wx API 模擬了引擎會訪問到的那部分 window 和 document 對象的屬性和方法，使引擎感受不到環(huán)境的差異。

Adapter 是用戶代碼，不是基礎(chǔ)庫的一部分。關(guān)于 Adapter 的介紹，參見教程 Adapter。