引言
哈喽大家好，我是亿元程序员。有小伙伴私信笔者：
大佬 ，现在箭头游戏这么火，我们搞个
3D的可以吗？
3D箭头游戏 ？这不是3年的游戏了吗？
带着逝去的记忆 ，搜索了一下，虽然3年前已经火过了，但是也找到了一些最近才上而且做得比较好的：
我去体验了一下，非常精美的游戏，感觉现在箭头素材还是很有搞头的。
言归正传 ，本期带大家一起来实战看看，在Cocos游戏开发中，实现一个3D的箭头游戏，有哪些知识点。
本文实战完整源码可在文末获取，小伙伴们自行前往，有体验链接。
关卡编辑器
刚看到 这游戏宣传图时，这么多有趣的3D像素模型关卡，那得多费美术妹子啊~
3D像素模型 能不能和2D那样，通过读取图片的像素去生成关卡数据？
几经周折，有倒是有，但是前提还是得建模，太麻烦了。
不过 ，在找的过程中，发现了一个免费开源的体素建模工具MagicaVoxel:
看了下 这个工具能够快速编辑像素级别的模型，还能导出文本数据，简直就是为3D箭头游戏量身定做的啊。
说那么多，还不是要费美术妹子？
是的，请她吃了好几碗大米饭，才帮忙拼了好几关，不过不用自己写编辑器，那真是太巴适了，建议大家多学。
数形结合
测试 的话，先简单将8个正方体拼成一个大的：
模型拼完之后 ，我们就可以导出文本数据了，简单看一下结构，数据比较简单，就是每个方块的x、y、z、r、g、b：
可以 写个简单的方法进行逐行解析拿到每个方块的xyz和rgb：
最后 写个测试方法生成，用引擎自带的Cube进行测试数据有没有问题：
运行测试一下，生成成功：
那箭头和颜色怎么弄？
颜色Shader
起初 ，美术妹子帮我预制了7种颜色的方块模型：
然后 通过像素颜色rgb硬编码去映射对应的模型：
就得到了带箭头的方块，美术妹子还挺好看的：
后来才发现，从前并不是最好的选择，每当要新增颜色时，我们都需要重新画颜色贴图和硬编码，不能够可持续发展。
于是 我想到了一个办法，只保留一个白色的模型，然后通过Shader去控制方块颜色：
Shader 的实现也比较简单，将贴图当做mask，动态更换箭头和方块的颜色，arrowColor是传入的箭头颜色(黑、白),baseColor是传入的方块颜色：
简单解析一下：
- 1.将贴图的rgb相加除以3，得出亮度。
- 2 .亮度小于
0.45变成0，亮度大于0.55变成1，即纯白和纯黑。 - 3 .最后通过
mix混合得出颜色，当mask为0用箭头色，mask为1时用方块色。
通过 上面的Shader，我们就可以给模型自定义上色了：
换了Shader之后会有个问题，模型缺少了一些光的效果，我们可以加上：
这样看起来就更真实一点：
看起来很厉害的样子，能不能讲点我懂的？
游戏逻辑
1.关卡生成
其实3D箭头游戏 的游戏逻辑和2D的箭头游戏完全不同，反倒是像挪车游戏，我们只需要避免箭头两两相对和形成闭环：
但是还不够安全，研究了一下，可以采用一种叫"剥洋葱"的算法：
这样就能得到绝对有解的关卡了，有条件可以把逻辑放到关卡编辑器：
2.方块点击
在3D游戏开发中 ，通常通过点击屏幕 → 发射射线 → 检测碰撞 → 找最近物体 → 触发点击去点选物体：
**不懂？**给小伙伴们画一个：
3.箭头移出
箭头的移出就相对来说简单了，只要没有阻挡，就可以成功移出，用补间动画就行：
效果如下：
细心的小伙伴发现了，方块移出有个拖尾效果，夹带私货？
更进一步
作为合集2.0的首发 ，咱们多唠嗑一点，能看到这里的小伙伴已经打败了90%的小伙伴！ 相信你也会点赞分享转发这个高大上的技能。
1.拖尾效果
我看 原作方块飞出有个拖尾效果，于是我翻看了下Cocos的官方文档，惊喜地发现：
结果却一言难尽，捣鼓了一段时间都没得到想要的效果。。。
没办法只能撸一个 ，拖尾的原理类似残影，就是不断在方块的位置生成3D的颜色带，然后逐渐变透明消失，我们可以通过动态mesh实现：
效果如下：
2.合批
3D游戏常用的合批手段通常可以这么处理：
- 按颜色缓存材质 : 相同颜色的方块共享同一个Material
- 开启 GPU Instancing : 相同材质+相同网格的方块一次批量绘制
效果如下： ::: column-left 
::: ::: column-right 
:::
结语
那么问题来了，3年前火过的游戏，会不会再火一次？
本文实战完整源码 已集成到亿元Cocos小游戏实战合集2.0，内含体验链接，已经拥有的小伙伴可以直接更新。
我是"亿元程序员"，一位有着8年游戏行业经验的主程。在游戏开发中，希望能给到您帮助, 也希望通过您能帮助到大家。
实不相瞒，想要个赞 和爱心 ！请把该文章分享给你觉得有需要的其他小伙伴。谢谢！
推荐文章：