H5小游戏和小游戏之间存在什么技术差别？

近几年“跳一跳”、“羊了个羊”微信小游戏上线仅仅4年时间，除过产生不少爆火上热搜的小游戏之外，还涌现了许多像是“口袋奇兵”、“动物餐厅”等游戏。它们借助着微信强大的社交性能，使得小游戏成为了游戏厂商和创作者在在桌面端、APP端、H5等端口之外争夺的另一个渠道。

那么为什么依附小程序产生的小游戏可以有这么大的关注度呢？先不论桌面端和APP端，与HTML5有相近的小程序游戏又怎么能频繁爆火到有这么大的流量呢？

小游戏的来龙去脉

首先文章的开始，让我们来考察一下小游戏的官方定义：小游戏其实是用小程序为载体的新游戏的产品形态，可以不用下载，有着即玩即点、体验方便的特性。

（即时玩耍、用后便手），这可能就是比较符合小游戏特性的标签吧。

小游戏最初的模样

如果我们要追溯其源头的话，早在2016年4月12日，微信发布了相关的《微信外链规范》，将诱导分享、诱导关注、H5游戏等9大类外部链接内容列为违规内容，一经发现将立即作停止访问、屏蔽链接等处理。此举一度引发行业对于“微信要封杀H5游戏”的担忧。

但现在看来，提前规范H5游戏链接分享行为，除了净化朋友圈内容，也正是腾讯在为微信开放H5游戏平台打基础。

早在2017年，腾讯就已经正式的在微信、手Q两大社交平台开启了H5手游的首轮测试，其中首轮测试的产品便是十分经典的休闲手游《天天爱消除》。紧接着官方就通知小程序功能得到了升级，正式推出了小游戏。

在游戏的开始时期，其玩法十分简单。很多都比较像是俄罗斯方块、连连看还有找不同等游戏。拿俄罗斯方块来说，其主要的技术特征就是DOM 操作，用 jQuery 原生 javascript css3 就可以了。整体画面元素简单明了，逻辑性也不是很强，结构与常规Web 页面一致；主要技术点：DOM 元素、jQuery、原生javascript css3。

随着技术需求发展，现在自然变得更加复杂了一些。加入了各种赛车类、塔房类还有低画质格斗类等等。简单来说就是能够方便玩耍、方便运行操作、保证能玩耍的基础上使得方法种类更加丰富、体验感更强烈。

现在的小游戏

依据官方腾讯在2022年的调查数据显示，目前为止小游戏的开发创作者已经达到了十万多，其中2021年就实现了超过30%的商业增长，基本保持了可观的三年增速。整体全年流水效益超过千万的小游戏产品就已经破50款，过亿的则有7款。

根据数据我们可以明显发现，现在的小游戏正走向繁荣阶段，并且其背后的商业规模也在不断壮大发展。

H5游戏和小游戏比较有哪些差距?

H5游戏的技术特质

如果说H5的技术特点的话，主要会用到DOM CSS、Canvas、WebGL，以及一些游戏引擎。并且，H5游戏也曾经在抢车位、4399小游戏、QQ农场的带动下达到过巅峰阶段。直到2017年H5游戏市场就到了30亿元，而手游市场规模就已经达到了1440亿元，十分可观。

优势：

• 无需下载安装，即点即玩
• 跨系统、跨终端、跨平台
• 开发成本相对低

劣势：

• 体验差距（性能、流量等）
• 缺少固定流量入口
• 制作门槛相对低

小游戏的技术特质

小游戏基础于H5游戏会增加微信社交能力、文件系统、工具链等功能，也会去掉一些对游戏开发不是很重要的部分，像Dom、Bom 等，微信小游戏也没有webview。H5规范API 这里是微信小游戏 sdk 自己实现的，比如 canvas webgl。

优点：

1. 有固定的流量入口，可以实现用户的持续运营变现
2. 性能比 HTML5 要高，运行状况也更加稳定
3. 小游戏的画质强体验更好，也能玩到不少创意十足的
4. 小游戏的操作逻辑更多，能够实现手搓键盘秀操作，而 H5 游戏只能做到点击互动
5. 能够调用系统的蓝牙、音频权限

缺点;

1. 游戏的开发和运营受限于各个平台标准
2. 仅能单一的运行在微信或抖音等平台

为了能够将二者有更直观的比较，我们将一些比较突出重要的点汇集成了表格，如图所示

	小游戏	HTML5 游戏
编程语言	JavaScript, TypeScript	JavaScript, TypeScript
入口	微信/支持小程序游戏运行的App	浏览器、公众号...
可用内存	中	低
性能上限	中	低
交互丰富度	高	低
留存 & ARPU	高（风口&红海）	低
点击+激活转化率	高	高
常见的开发团队配置	研发*2+美术*1+策划*1	研发*1+美术*1+策划*1
常见代表	跳一跳、欢乐斗地主、羊了个羊、动物餐厅、叫我大掌柜、咸鱼之王……	QQ 抢车位、QQ 农场（偷菜）、围住神经猫……

小游戏引擎

值得注意的是，虽然HTML5 与小游戏有很多差别，但是不管是什么引擎。在游戏最终运行的时候很多事情都是随着用户的交互更新声音和画面的。

游戏引擎是指一些已编写好的可编辑电脑游戏系统或者一些交互式实时图像应用程序的核心组件。这些系统为游戏设计者提供各种编写游戏所需的各种工具，其目的在于让游戏设计者能容易和快速地做出游戏程式，而不用由零开始。

小游戏的开发语言是 JavaScript，在引擎的底层就需要通过 JavaScript 调用绘制 API 和音频 API。

如下表所示，小游戏中常见的引擎有：

引擎	理念
Three.js	基于 WebGL 的 3D 渲染引擎库
Pixi.js	高性能的 WebGL 模式 2D 渲染引擎，API 简陋，常被 JS 框架封装为渲染内核
Layabox	支持AS3\TSVS三种语言，可同时发布H5、APP、Flash版本，追求性能极致
Cocos2d-js	cocos2d-js继承原生cocos2d引擎的设计理念，API也参考原生cocos2d-x
Creat.js	一个非常轻量的，基于 HTML5 开发的游戏、动画、交互应用引擎
Egret（白鹭）	自建工具链工作流，參考Flash AS3 API的移动端H5引|擎，支持打包APP（但是这个好像倒闭了）
unity	腾讯自行开发的 unity 引擎小游戏转换技术

虽然H5游戏与小游戏之间有差别，但是其关系也不是非黑即白。小游戏是在H5游戏的基础上做出了不断的优化，这体现了二者互相包容，我中有你的联系。但是无论怎么说，技术的不断更迭都能够为用户提供便捷优质的体验服务。

而且，现在很多技术厂商为了能够让越来越多的小游戏有更加完整的闭环，除了单一的能在微信平台上进行之外，他们已经开始利用集成 SDK 的形式支持将小程序游戏迁移至其他的 App 中，以此来让小游戏的价值得到放大。

就像是小程序技术底座厂商FinClip，他们除了支持集成 FinClip SDK 让任何 App 都能像微信一样具备小程序的运行能力外，还可以通过对几大游戏引擎的兼容，让微信生态内的小游戏也能照常运行到其他的 App 内

这无疑对于广大的开发者来讲除了能够拓展业务的边际外，还能打破微信平台的约束实现更大化的发展。有兴趣的小伙伴们可以通过直接点击链接进行更深入的了解。

目前为止，小游戏虽然只有4岁，是一个新生儿。但是一定还会有很多可以深入探究的方面让我们去关注了解。