支付宝小游戏调研

小游戏调研

最近对小游戏进行了一些调研，主要分三个维度进行

• 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

• Cocos
• Egretindex.html
• LayaBox

游戏引擎与物理引擎

这里简单说一下我的理解，如今游戏引擎基本都是能够称为一个游戏解决方案提供开发到打包各个流程的方案，游戏引擎中通常都会包涵物理引擎，而物理引擎就是模拟真实世界中各类物体运动的规律来运动，让你不须要专业的知识就能够作出各类酷炫的效果。 目前应用最普遍的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 库那能够选择的余地可真的是有点多,最终我把范围缩减到两个而且都是国人出品，最主要的缘由是这两个库是支持微信小程序和小游戏，很遗憾的是并不支持支付宝小程序

• canvas 动画基本步骤
• spritejs
• cax

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 指南
• 支付宝小程序架构全解析