微信小游戏的运行机制与开发技巧

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/5837.html

主题分为4个部分（忽略旁边那个表情包）：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/5837.html

1. 基础概念
2. 架构设计
3. 部分算法
4. 微信API

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/5837.html

游戏的驱动由开发编写游戏逻辑，然后在渲染器中实时渲染到画布上。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/5837.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/5837.html

微信小游戏和传统web游戏（canvas类）最大的区别在于API。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/5837.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/5837.html

小游戏的表现既可以像跳一跳那样休闲，也可以像街机的格斗游戏一样热血，不要被想象力所限制，认为「小游戏就应该有小游戏的样子」。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/5837.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/5837.html

当然，一般会有「小游戏就该是什么样」的想法的人，多少是对游戏有所了解的人才会发出的感慨，因为我们需要戴上名为「现实」的技术枷锁。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/5837.html

这种想法并没有错，反而比那些没有套上枷锁，而要求他人根据手机壳的颜色改变手机背景颜色的人要好很多。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/5837.html

但是，在戴上了技术枷锁以后还能保持天马行空的想象力，那才是最难能可贵的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/5837.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/5837.html

微信小游戏的文件结构文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/5837.html

game.js以及game.json分别是小游戏的入口文件及配置文件。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/5837.html

res是游戏资源，也是游戏占用体积最大的地方。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/5837.html

adapter是利用微信API模拟浏览器API的库。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/5837.html

而src部分就是本次分享的重点内容。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/5837.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/5837.html

我个人制作的小游戏目前画风都比较奔放，所以分享时借用团队制作的小游戏来介绍了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/5837.html

游戏结构分为3个大的模块：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/5837.html

Base 模块管理脚本，用来组织起整个游戏的部分。负责游戏的开始，暂停，决定游戏该调用哪个场景。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/5837.html

Scene 场景模块，类似于不同的关卡，每个关卡里需要载入什么样的角色，什么样的敌人，播放什么样的音乐都由场景模块决定。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/5837.html

Role 角色模块，游戏逻辑中最重要的一个部分。不论是主角还是敌人，甚至场景里的一个宝箱，一颗子弹，都属于角色。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/5837.html

剩下的模块都是对不同游戏进行补完，因为一个格斗游戏和一个休闲游戏所需要的模块差别是非常大的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/5837.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/5837.html

角色模块可以大致分为4个部分：属性、动画、指令、行为。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/5837.html

属性：我们可以把一个object叫做实体，这个实体里的属性就是角色的属性，比如坐标，hp，speed等等。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/5837.html

动画：角色的动画一般有属性动画，序列帧动画，骨骼动画这几种，这些动画中部分还有2d和3d的区别。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/5837.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/5837.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/5837.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/5837.html

动画这一部分属于「跨领域」作业，因为要把一些「感性」的图像转化成「理性」的代码。这部分的介绍以后会陆续放出。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/5837.html

指令：指令是玩家输入手段的一种封装。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/5837.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/5837.html

例如，「水果忍者」的滑动切水果的指令就是通过「触控」的API进行实现，而一些「连续技」，「虚拟摇杆」也需要对应的API组合来实现。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/5837.html

行为：角色的行为就是通过调整角色的属性而产生的一种结果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/5837.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/5837.html

如移动就是坐标文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/5837.html

x+=speed;
sprite.play(move);
复制代码

角色行为是游戏逻辑中最重要的一环，而角色之间的行为交互又伴随着大量的算法。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/5837.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/5837.html

每种游戏所需要的算法都不相同，但是游戏里运行算法的计算方式是一致的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/5837.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/5837.html

如加速度方程，在代码中的实现实际上如就是文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/5837.html

v+=a；
s+=v；
复制代码

了解游戏算法的基本机制后，可以稍微扩展下，比如碰撞算法：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/5837.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/5837.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/5837.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/5837.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/5837.html

基本上每个算法的推导过程都可以单独作为一篇文章来讲了，感兴趣的同学可以自行搜索算法名称。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/5837.html

另外一些比较常用的游戏算法也可以了解下，比如：状态机，字典树，寻路，排序……文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/5837.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/5837.html

当然，游戏基于专业的游戏引擎去制作，可以达到事半功倍的效果。了解游戏运行机制可以帮你更快速的上手游戏引擎。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/5837.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/5837.html

微信小游戏与传统web游戏最大的区别在于API。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/5837.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/5837.html

微信小游戏有一部分与微信小程序不一样的API。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/5837.html

其中最特别的就是「开放数据」。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/5837.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/5837.html

主域可以传数据到微信后台，但是却无法从微信后台获取数据。而开放数据域可以从微信后台获取数据，但是却无法现实以及将数据传入主域。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/5837.html

所以主域想要显示微信后台数据，必须在开放数据域绘制好数据，然后将开放数据域的sharedCanvas当作image通过drawImage函数绘制到主域的canvas中。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/5837.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/5837.html

开放数据的一些注意事项文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/5837.html

1. sharedCanvas 只能被绘制到上屏 canvas 上。
2. 上屏 canvas 不能调用 toDataURL，其 context 不能调用 getImageData。
3. sharedCanvas 不能调用 toDataURL 和 getContext。
4. 不能将上屏 canvas 和 sharedCanvas 以任意形式绘制到其他 canvas 上，包括 drawImage、createPattern、texImage2D、texSubImage2D。
5. sharedCanvas 的宽高只能在主域设置

其中第5条常常容易被忽略，然后出现各种适配问题。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/5837.html

最后总结一下小游戏的运行机制。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/5837.html

• 游戏从入口文件进入以后，开始执行渲染器。
• 然后游戏的主逻辑会调用游戏下一步需要的场景模块。
• 场景模块中调用当前场景所需要的角色模块。
• 角色模块在接收到不同的指令后会产生不同的行为。
• 角色行为之间通过大量算法进行交互，最终产生完整的游戏效果。