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

terry 2年前 (2023-09-23) 阅读数 90 #移动小程序

专题分为4部分（忽略旁边的表情图标）：

Game Driver由开发者编写游戏逻辑，然后在渲染器中实时渲染到画布上。

微信小游戏与传统网络游戏（画布式）最大的区别在于API。

小游戏的表现可以像跳跃一样休闲，也可以像街机格斗游戏一样激情。不要被你的想象力所限制，并认为“小游戏应该看起来像小游戏”。

当然，普遍抱有“小游戏应该怎样”的想法的人或多或少都是对游戏有所了解的人的感受，因为我们要承担起所谓“现实”的技术束缚。

这个想法没有错，但是比那些不放链接，要求别人根据手机壳的颜色改变手机背景颜色的人要好得多。

然而，最可贵的是，在使用科技的束缚后，你仍然可以保持天马行空的想象力。

微信小游戏的文件结构

game.js和game.json分别是小游戏的输入文件和配置文件。

res是游戏资源，也是游戏占用体积最大的地方。

Adapter是一个使用微信API来模拟浏览器API的库。

Src 部分是本部分的重点。

我个人做的小游戏目前风格比较奔放，所以分享的时候我会用团队做的小游戏来介绍。

游戏结构分为3大模块：

基础模块管理脚本，用于组织整个游戏。负责开始和暂停游戏，并决定游戏调用哪个场景。

Scene场景模块，类似于不同的关卡，每个关卡必须加载什么样的人物，什么样的敌人，什么样的音乐，都是由场景模块决定的。

角色角色模块，游戏逻辑中最重要的部分。无论是主角还是敌人，甚至场景中的宝箱、宝珠，都属于角色。

剩下的模块针对不同游戏完成，因为格斗游戏和休闲游戏所需的模块有很大不同。

角色模块大致可以分为4个部分：属性、动画、指令和行为。

属性：我们可以将对象称为实体。这个实体中的属性就是角色的属性，比如坐标、hp、速度等。

动画：角色动画通常包括属性动画、序列帧动画、骨骼动画。其中一些动画在 2D 和 3D 之间也存在差异。

动画部分是一个跨领域的操作，因为它需要将一些“感性”的图像转换成“理性”的代码。这部分介绍后续会一一放出。

命令：命令是玩家输入方法的封装。

例如《水果忍者》推切水果的指令就是通过“触摸”API实现的，而一些“连续技能”和“虚拟摇杆”也需要相应的API组合才能实现。

行为：角色的行为是通过调整角色的特性而产生的结果。

比如运动就是坐标

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

角色行为是游戏逻辑中最重要的部分，角色之间的行为交互都伴随着大量的算法。

每个游戏需要不同的算法，但游戏中运行算法的计算方法是相同的。

比如加速度方程，代码中的实现其实是

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

了解了游戏算法的基本机制后，可以稍微扩展一下，比如碰撞算法：

基本上就是推导每个算法的过程可以单独完成。这是一篇文章。有兴趣的同学可以自行搜索算法名称。

你还可以了解一些其他常用的游戏算法，例如：状态机、字典树、寻路、排序……

当然，游戏是基于专业的游戏引擎制作的，可以达到事半功倍的效果。了解游戏的运行机制可以帮助你更快的上手游戏引擎。

微信小游戏与传统网游最大的区别在于API。

微信小游戏有一些与微信小程序不同的API。

最特别的就是“开放数据”。

主域可以向微信后台传输数据，但无法从微信后台检索数据。开放数据域可以从微信后台检索数据，但实际上无法将数据传输到主域。

所以如果主域想要显示微信后台数据，就需要在开放数据域中绘制数据，然后使用开放数据域的sharedCanvas作为图像绘制到主域的canvas中通过drawImage函数。

关于开放数据的一些注意事项

分割画布只能绘制到上屏幕画布。
上屏画布无法调用toDataURL，上下文无法调用getImageData。
sharedCanvas 无法调用 toDataURL 和 getContext。
上屏画布和sharedCanvas不能以任何形式绘制到其他画布上，包括drawImage、createPattern、texImage2D和texSubImage2D。
sharedCanvas的宽度和高度只能在主域中设置

第5点往往容易被忽略，然后出现各种自定义问题。

最后总结一下小游戏的运行机制。