小游戏使用游戏引擎支持情况及解决办法

小游戏使用游戏引擎支持情况及解决办法

很多开发者都非常关心小游戏对Cocos、Egret、Laya、Unity等游戏引擎的支持。 但小游戏是不同于浏览器的JavaScript运行环境,没有BOM和DOM API。 然而,基本上所有基于HTML5的游戏引擎都依赖于浏览器提供的BOM和DOM API。 所以如果想在小游戏中使用该引擎,就需要修改引擎。

目前,Cocos、Egret、Laya 已经完成了各自引擎和工具对小游戏的适配和支持,相应的官方文档也介绍了小游戏的开发。

Unity尚未适配小游戏。 不过,该迷你游戏提供了对大多数 Canvas 2d 和 WebGL 1.0 功能的支持。 有关支持信息,请参阅 RenderingContext。 有能力的开发者可以尝试自行适配。

小游戏与浏览器的运行环境不同

无论引擎是什么,游戏运行时最终完成的大部分工作都是更新图形并播放声音以响应用户交互。 小游戏的开发语言是JavaScript,因此在引擎底层,需要通过JavaScript调用绘图API和音频API。

一段JavaScript代码在运行时可以调用的API取决于宿主环境。 我们最常用的console.log甚至不是核心JavaScript语言的一部分,而是由浏览器托管环境提供的。 常见的托管环境有浏览器、Node.js等。浏览器有BOM和DOM API,但Node.js没有; Node.js 具有 Node.js 核心模块(例如 fs 和 net)提供的文件和网络 API,但浏览器没有这些模块。 例如,下面的代码在浏览器中运行正常,在 Node.js 中运行时会报错。

const canvas = document.createElement('canvas')

因为Node.js宿主环境根本不提供内置的全局变量文档。

ReferenceError: document is not defined

小游戏的运行环境是不同于浏览器的托管环境。 它不提供BOM和DOM API开发学习,而是提供wx API。 通过wx API,开发者可以调用Native提供的绘图、音视频、网络、文件等能力。

html5 游戏引擎_引擎游戏挂_html游戏引擎

如果要创建画布,需要调用wx.createCanvas()

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

如果要创建音频对象,需要调用wx.createInnerAudioContext()

const audio = wx.createInnerAudioContext()
// src 地址仅作演示,并不真实存在
audio.src = 'bgm.mp3'
audio.play()

如果想要获取屏幕的宽度和高度,需要调用wx.getSystemInfoSync()

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

然而基于HTML5的游戏引擎会通过以下方式创建canvas、audio、获取屏幕宽高

const canvas = document.createElement('canvas')
const 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的适配层html5 游戏引擎地图场景,我们称之为Adapter。 这个适配层全局模拟了引擎将通过wx API访问的窗口和文档对象的属性和方法,让引擎感受不到环境的差异。

html游戏引擎_html5 游戏引擎_引擎游戏挂

适配器是用户代码html5 游戏引擎,而不是基础库的一部分。 有关 Adapter 的介绍,请参阅教程 Adapter。

使用其他游戏引擎

除了上述兼容小游戏平台的游戏引擎外,开发者还可以使用其他HTML5游戏引擎来开发小游戏,但需要进行对齐和修改。 修改思路是引入一个通用的Adapter并先尝试运行一下,然后将遇到的问题一一解决。

文章来源:https://mp.weixin.qq.com/debug/minigame/dev/guide/best-practice/game-engine.html