视频教程+源码丨最火三消玩法，挑战24小时用 Cocos 打造 3D 版三消游戏！
引言：最近三消又火了一把，受到启发，开发者孙二喵用24个小时在 Coocs Creator 中开发了一个 3D 版三消游戏 Demo，同时搭建了地图编辑器。源码、视频教程见文末。
游戏 Demo
地图编辑器
简单又有趣的三消游戏，一直是休闲游戏中最受欢迎的类型之一，拥有跨越各年龄层的忠实玩家。三消还能玩出什么花样？本次我们就在经典三消的基础上做一些变化，开发一个 3D 版的三消游戏（含地图编辑器）。配套的视频教程发布在 B 站，感兴趣的小伙伴可以结合源码一起观看。
游戏计划用3*8=24小时开发，主要思路如下：
Day1：思考场景序列化与反序列化、搭建地图编辑器，美术风格敲定和设计。
Day2：游戏射线检测和核心算法、加载、结算流程。
Day3：UI 搭建、Debug、上线发布！
地图编辑器
有朋友可能会问：为什么要再做一个地图编辑器，而不是直接把整个关卡保存为预制体呢？
先聊一下序列化问题。
序列化：指把 Cocos 的场景数据通过某种方式把场景中的节点信息和组件信息存储为 Scene（场景文件），或者储存为 Prefab（预制体），通俗来说就是将节点的数据结构或对象转换成 Json 数据流的过程。
反序列化：指把磁盘文件中的场景文件或者预制体文件，还原成节点和组件的过程，也就是将在序列化过程中所生成的 Json 数据流还原成场景的过程。
下面分别使用引擎和地图编辑器制作1个小场景，并对比下区别。
首先对比下引擎生成的 Prefab 的 Json 文件，整个大小超过了 10KB，引擎需要知道节点信息中的依赖关系（UUID）和所有节点信息（这是必要的，确保功能的完整性和扩展性），所以整个 Json 文件，信息完整，同时具有良好的兼容性和可扩展性。
我们再用地图编辑器生成一个相同的场景，大小只有120字节，体积节省了近98%以上。Json 体积减小的同时，加载时 IO 开销也减少了，数据结构也精简了许多，解析和加载速度也更快。
但这并不意味着游戏内所有场景都使用自定义的编辑序列化会更好。若是针对复杂的 UI 场景做编辑器，一是开发时间巨大，二是无法做到像引擎预制体一样良好的兼容性、可扩性和可迭代性。
加载方面，引擎默认的预制体建议使用 Assetbundle 进行本地或者远程加载，如果更新了预制体，需要重新打包 bundle 进行替换，而使用自定义编辑器+Json 格式，可以把关卡信息储存到服务器上，实时加载与更新。
使用引擎默认的预制体，反序列化时候，需要同时考虑到 editor 和 gameplay 两种 runtime。针对特定项目或者特大场景，使用自定义编辑器+Json 在反序列化时候有3个点优势：
速度：内容少，解析快。
分帧优化：可以针对 Json 内数据做分帧加载，分帧实例化，减少黑屏时间。
自定义效果：可以在实例化时候自定义效果，如放大缩小、位置移动等，都可以通过 tween 实现。
了解了为什么要做地图编辑器功能，接下来看看我们要如何实现它。
数据设计
考虑到可能有很多自定义预制体，无法确认他们的名字和位置，这里使用了 Assetbundle 里的 loaddir 类型，通过 property 自定义 bundle 名字和需要加载的文件夹路径。
把整个文件夹下面的物体都加载并实例一个对应的 toggle，方便做切换。
在数据储存上就比较灵活了，只需要维护特定 bundle 下的特定文件夹就行了。
地图检测
《喵了个喵》在地图设计上可能会存在空缺的情况，所以无法单纯使用射线检测 rayModel 去获取方块的位置信息。这里使用了层级的方法，可以使用数字键进行层级切换，或者按 tab 向上移动层级，只需要检测每个层级上的网格就行了（层级切换的时候网格也会进行切换）。
网格自适应
由于需要对网格进行设置，可以通过自定信息用的长度、宽度和格子大小来改变网格的信息，通过三者相乘后的值设置网格的 Scale（默认的 Quad 长宽分辨是1个世界坐标）。
同时对网格的 shader 也做了 tilingoffset 的设置。
shader 里对每5格的网格宽度做了加宽处理，其他的网格做了颜色减弱，透明度只有93，效果如下。
数据查找与保存
这里通过1个3层的数组做数据储存，主要是为了方便实例化，没有使用 Map 做查询。把射线与网格的交互点通过 Math.round 运算转换成最近的网格点，和 gripmap 内的数据信息对比，没有则可以填充。
摧毁物体和新增物体时通过数组记录操作、物体名字和节点信息，方便做还原。
数据储存方面，先把之前存储的信息先历遍，方便储存最高和最宽信息。
接着把数组信息转换成 string 后通过浏览器进行保存。
资源读取
在编辑器环境下，把 Json 文件解析为 UTF-8 的 string，再转换 Json 信息进行反序列化 。
优化篇
包体优化
Cocos Creator 3.6 已经优化了游戏体积，为了进一步优化资源大小，我剔除了物理引擎，使用射线功能检测 3D 物体；剔除了引擎自带的基础模型，使用了自制的 Quad。
最后小游戏的整体大小控制在了 3.4M 左右，包括 1.7M 首包 + 1.7M bundle，如果去掉 BGM 可以控制在 3M 以内。
游戏性能优化
instancing 和批，游戏内使用了大量的 3D 砖块，分别同一个 Mesh + 不同的背景图 + 不同的 Icon 图。
为了进一步优化性能，整体使用了 difuse 光照，通过一个 vec2 控制背景图和 Icon 图的 UV 变化，这个 vec2 通过定点数据传入，保证 instancing 的合批不会被打断 。
射线检测性能优化
射线检测只在点击开始和点击结束时候各检测一次砖块和多点触控时的点击 ID，只有相同的砖块才会被选中。同时被选中的颜色也通过定点数据传入，保证不会打断 instancing 合批。
其他优化
射线和射线规则，和常用的 vector 向量都是用 const 常量进行储存，避免在移动检测新建的消耗。
摄像机优化
整个场景分成3层，通过设置摄像机的优先级来决定渲染顺序：
红色 Camera0 负责渲染背后的 2D 背景，避免在这层出现点击事件；
蓝色的摄像机负责 3D 物件渲染，在中间层；
白色摄像机负责所有 UI 渲染，最后渲染。
资源链接
基础版源码下载 - Cocos Store
https://store.cocos.com/app/detail/4112
Pro 版（含关卡编辑器）源码 - Cocos Store
https://store.cocos.com/app/detail/4124
视频教程
https://www.bilibili.com/video/BV1LV4y1N7bL
游戏在线体验（手机端）
http://learncocos.com/miaomiao/
编辑器在线体验（电脑端）
http://learncocos.com/miaoeditor/
论坛讨论帖
https://forum.cocos.org/t/topic/140242
希望这份源码和视频教程对你有所帮助，如有疑问，欢迎前往论坛讨论帖交流探讨！
往期精彩