小游戏是小程序的一个类目,小游戏是微信开放给小程序的更多的能力,让小程序开发者有了开发游戏的能力。小游戏没有WXSS、WXML、多页面等内容,但加了一些渲染、文件系统以及后台多线程的功能。
小游戏的运行环境是小程序环境的扩展,基本思路也是封装必要的 WEB 接口提供给用户,尽可能追求和 WEB 同样的开发体验。小游戏在小程序环境的基础上提供了 WebGL 接口的封装,使得渲染能力和性能有了大幅度提升。不过由于这些接口都是微信团队通过自研的原生实现封装的,所以并不可以等同为浏览器环境。
小游戏的运行环境在 iOS 上是 JavaScriptCore( 注:webkit的一个重要组成部分,主要是对JS进行解析和提供执行环境。 ),在 Android 上是 V8 (这个不用多说Node.js目前使用的就是V8)。但是两个都没有 BOM 和 DOM 的运行环境,没有全局的 document 和 window 对象。
小游戏 VS H5游戏 VS 小程序对比图
第三方代码适配(Adapter)主要目的提供 BOM 和 DOM 的运行环境。
由上图可以看出,因为没有 BOM 和 DOM 的运行环境,没有全局的 document 和 window 对象。为了让基于浏览器环境(上图的H5游戏)的第三方代码更快地适配小游戏运行环境,所以就有了适配器(Adapter)。它是用微信 API 模拟 BOM 和 DOM 的代码组成的库,抽象的代码层,可以根据自己的需要去实现相关方法。
例如,简单实现 document.creatElement 方法:
var document = { createElement: function (tagName) { tagName = tagName.toLowerCase() if (tagName === 'canvas') { return wx.createCanvas() } else if (tagName === 'image') { return wx.createImage() } } }
Adapter是否使用由开发者自己决定。不使用Adapter时,可以通过微信提供的API实现相应的方法,但不能使用 DOM API 来创建 Canvas 和 Image 等元素。
有的游戏引擎是直接调用DOM API,和访问DOM属性 ,所以记得使用Adapter让游戏引擎适配小游戏的运行环境,保证游戏引擎在调用 DOM API 和访问 DOM 属性时不会产生错误。
微信官方实现了一个 weapp-adapter 小游戏适配器,但仅仅只针对游戏引擎可能访问的属性和调用的方法进行了模拟,也不保证所有游戏引擎都能通过 weapp-adapter 能顺利无缝接入小游戏。这里将 weapp-adapter 适配器提供给开发者,更多地是让开发者作为参考,让开发者可以根据需要在 weapp-adapter 的基础上进行扩展,以适配自己项目使用的游戏引擎。weapp-adapter 会预先调用 wx.createCanvas() 创建一个上屏 Canvas,并暴露为一个全局变量 canvas 。
require('./weapp-adapter'); var context = canvas.getContext('2d'); context.fillStyle = 'red'; context.fillRect(0, 0, 100, 100);
weapp-adapter 适配器提供了以下对象和方法:
document.createElement
canvas.addEventListener
localStorage
Audio
Image
WebSocket
XMLHttpRequest
其实官方文档里面还有很多 ,感兴趣可以查看官方 API文档 。
小游戏的模块化小游戏提供了 CommonJS 风格的模块 API,可以通过 module.exports 和 exports 导出模块,通过 require 引入模块。这里就不用多解释了,其实大家按正常的编码习惯编码就可以了。
module.exports = function (canvas, x, y) { var image = new Image() image.onload = function () { var context = canvas.getContext('2d') context.drawImage(image, x, y) } image.src = 'res/image/logo.png' }
所以小游戏对编码方面的基础能力还是很友善的。
小游戏能力这里列出部分已提供的 API 能力,更详细的能力及官方实例可访问 API文档 。
大家对 Canvas 的优化或者对离屏画布不了解的可以看这篇文章 Canvas 最佳实践(性能篇)。
小游戏引擎游戏引擎是指一些已编写好的可编辑电脑游戏系统或者一些交互式实时图像应用程序的核心组件。这些系统为游戏设计者提供各种编写游戏所需的各种工具,其目的在于让游戏设计者能容易和快速地做出游戏程式而不用由零开始。
Cocos、Egret、Laya 已经完成了自身引擎及其工具对小游戏的适配和支持:
Cocos
Egret(白鹭)
LayaBox
Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机、光影、材质等各种对象
2D、3D、VR的支持 性能从开发者的反馈来说,Layabox本来就是面向大型游戏的H5游戏引擎,性能优势是毋庸质疑的。
设计理念与定位 工作流支持力度