小游戏调研
最近对小游戏进行了一些调研,主要分三个维度进行
- h5小游戏
- 微信小游戏
- 微信小程序,支付宝小程序开发小游戏
h5小游戏
引用H5游戏开发:游戏引擎入门推荐部分内容
现在的 H5 游戏渲染方式一般有 2D 渲染、3D 渲染、VR 渲染三种。 而 2D 渲染一般也有三种:Dom 渲染、Canvas 渲染、WebGL 渲染。Dom 由于性能原因,一般只适合做一些动画效果较少,交互较少的小游戏,本文主要针对 Canvas 和 WebGL 展开介绍。 一般来说,对于 2D 小游戏来说,Canvas 渲染已经足够。然而 Canvas 渲染由于底层封装层次多,不足以支撑起大型游戏的性能要求,因此大型游戏最好选择 WebGL 渲染或者浏览器内嵌 Runtime 。
基于我们现在需求我们把重点放在canvas
上就ok了,不出意外的话我们只要用canvas
开发2D小游戏即可
游戏引擎
世面上的游戏引擎还是蛮多的,但是现在毕竟微信小游戏炙手可热所以我们重心放在支持微信小游戏的游戏引擎就好,那我们的选择就变成了三个,根据HTML5游戏引擎深度测评的据 Egret
占有h5小游戏开发的半壁江山所以我们要是选择一个游戏引擎的话可能更倾向于Egret
游戏引擎与物理引擎
这里简单说一下个人理解,现在游戏引擎基本都是可以称为一个游戏解决方案提供开发到打包各个流程的方案,游戏引擎中一般都会包涵物理引擎,而物理引擎就是模拟真实世界中各种物体运动的规律来运动,让你不需要专业的知识就可以做出各种酷炫的效果。 目前应用最广泛的js 2D物理引擎应该就是matterjs,matterjs
实测在h5和微信小游戏中都是OK的但是在小程序中我没有成功接入
微信小游戏
微信小游戏也是基于canvas
技术栈,也就是说语法成面暴露给我们的API是canvas
,然后微信官方实现了一个weapp-adapter
(因为微信小程序中没有DOM API所以要加这么一层适配)这样可以让h5小游戏和微信小游戏共用一套代码
微信小游戏和小程序的区别
小游戏是小程序的一个类目,小游戏是微信开放给小程序的更多的能力,让小程序开发者有了开发游戏的能力。小游戏没有WXSS、WXML、多页面等内容,但加了一些渲染、文件系统以及后台多线程的功能。 小游戏的运行环境是小程序环境的扩展,基本思路也是封装必要的 WEB 接口提供给用户,尽可能追求和 WEB 同样的开发体验。小游戏在小程序环境的基础上提供了 WebGL 接口的封装,使得渲染能力和性能有了大幅度提升。不过由于这些接口都是微信团队通过自研的原生实现封装的,所以并不可以等同为浏览器环境。
小游戏的运行环境在 iOS 上是 JavaScriptCore(注:webkit的一个重要组成部分,主要是对JS进行解析和提供执行环境。),在 Android 上是 V8 (这个不用多说Node.js目前使用的就是V8)。但是两个都没有 BOM 和 DOM 的运行环境,没有全局的 document 和 window 对象。
微信小程序和支付宝小程序开发小游戏
因为小程序中也支持canvas API,所以在小程序中我们也有能力用canvas技术栈开发小游戏,但是能力弱于微信小游戏,在微信小游戏中可以集成游戏引擎或者物理引擎,但是在小程序中我没有发现可以集成的游戏引擎或者物理引擎,网上并没有找到类似的资料。
canvas 开发小游戏
综上来看无论是开发h5小游戏,微信小游戏,还是小程序小游戏,都是使用canvas
技术栈,如果直接用canvas
开发小游戏那么就要求你对canvas API和 canvas开发动画的基本套路有一定的了解,并没有发现什么发现什么捷径, 所以这时候自然而然就会想有没有什么canvas
库可以使用,可是要是搜索h5 canvas
库那可以选择的余地可真的是有点多,最终我把范围缩减到两个并且都是国人出品,最主要的原因是这两个库是支持微信小程序和小游戏,很遗憾的是并不支持支付宝小程序
example
- 微信小游戏微信小游戏官方DEMO做了简单的改造加入h5打包流程也是证明了微信小游戏和h5小游戏用一套代码
- 微信小游戏中引入matterjs 兼容微信h5
- 微信小程序小游戏在微信小程序中用canvas 写的小游戏
- 支付宝小程序小游戏将微信小程序的中的代码改造迁移到支付宝中
总结
汇总一下现有成果基本都卡在支付宝小程序上,一个人检索信息能力有限,期望大家能发现支持支付宝小程序的canvas
库,物理引擎
- h5小游戏,微信小游戏,微信小程序小游戏,支付宝小程序小游戏都是使用
canvas
技术栈,所以canvas
是必答题必须要有一定的熟练度 - 微信小游戏有游戏引擎可以集成,而微信小程序和支付宝小程序不成
- 微信小游戏和微信小程序有
canvas
库可用,而支付宝小程序不成
参考
- h5 游戏开发游戏引擎入门推荐
- h5 游戏引擎深度测评
- 如何开发一个简单的 canvas小游戏
- canvas 最佳实践 性能篇
- react-canvas
- 也许DOM不是答案
- 微信小游戏开发总结
- 微信小程序 canvas API 整理
- canvas API MDN
- canvas API档地图
- pixi
- 不同浏览器内核的差异以及浏览器渲染简介
- 开发者如何抓住微信小游戏的疯狂?挺Cocos创始人王哲详解
- spritejs star 2888
- cax star 1457
- matter.js 2D 物理引擎试玩报告
- spritejs canvas 动画从未如此简单
- 从零开始制作微信小游戏 canvas 加物理引擎 matter.js
- mater 指南
- 支付宝小程序架构全解析