为了账号安全,请及时绑定邮箱和手机立即绑定

微信小游戏开发总结

2018.04.17 21:49 3363浏览

小游戏是小程序的一个类目,小游戏是微信开放给小程序的更多的能力,让小程序开发者有了开发游戏的能力。小游戏没有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 最佳实践(性能篇)

原文出处

点击查看更多内容
3人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 邀请有奖 帮助中心 APP下载
官方微信

举报

0/150
提交
取消