源码下载丨4天快速开发一个 3D 跑酷游戏,试一试 Cocos Creator 3.6 新特性
引言:开发者孙二喵通过一个游戏 Demo 对 v3.6 的部分新特性进行了检验,尤其是图形渲染与动画状态机方面的更新。Demo 源码和项目中所用到的素材下载地址见文末,供大家参考。
Cocos Creator 3.6 发布已经有一段时间了,v3.6 在光照模型和渲染算法上的更新让人很是心动,因此我用4天时间做了一个游戏 Demo 来试验一下这些新特性,包括 Surface Shader 自定义材质、CSM 级联阴影和 DCC 材质系统等。此外 Demo 还运用了升级之后的动画状态机,以及社区宝藏插件 98K 物理-轻量碰撞系统。
简单介绍一下游戏玩法。玩家控制角色移动吃饼得分,操作上,电脑端使用方向键移动、Shift 键加速、Space 键跳跃,属于比较常见的跑酷类型。
场景与角色
角色选择上,我在 Cocos Store 白嫖了官方《iles》的素材,包含这只帅气公鸡的 3D 模型+18个骨骼动画。
场景方面,我想要有大大的月亮,有很多建筑来验证 CSM 的强大,同时还得有高低起伏的地形,让玩家操控角色跳跃。
灵魂设计图
我选择了 Sketchfab 上 Noyou 大佬的古风场景,地形高低起伏,具有一定的复杂度。
借助 Cocos 最新的 DCC 材质适配,不需要太多设置,即可在 Cocos 内还原这个场景。
接着把角色和场景进行拼接,加入一个满月的天空盒。
最后在 Blender 里画一个月饼,也通过 DCC 材质做好适配,整个场景就完成了!
除此之外,考虑到游戏场景超过100万面,而且地形较不规则,使用 Bullet+Mesh Collider 整体开销会比较高,所以项目决定使用社区大佬「我叫98K」开发的插件 98K 物理-轻量碰撞系统。这是一个高性能轻量 3D 碰撞管理器,能够改善 3D 游戏在不同平台遇到的碰撞性能问题和包体问题:
插件体积只有几十 KB。
内置八叉树对大场景优化好。
支持射线检测,写吃饼的逻辑完全够了。
>>滑动查看更多
功能使用
CSM 级联阴影
没有开启 CSM 的时候(上图右),阴影边缘的锯齿严重。原因是阴影贴图的分辨率低,在对阴影贴图采样时,多个不同的顶点对同一个像素采样,导致生成锯齿。
开启 CSM 后,使用了多张阴影贴图,离相机近的地方使用精细的阴影贴图,离相机远的地方使用粗糙的阴影贴图,这样不仅优化了阴影效果,还保证了渲染效率,不得不说 v3.6 的这个特性非常实用!
动画状态机
游戏内玩家需要控制角色上下腾飞,状态比较多,如果单纯使用骨骼动画,要写比较多的逻辑。而通过 Cocos Creator 内置的 Marionette 动画状态机,我们可以把主要逻辑交给状态机去实现。
只需要通过简单的几个状态,判断角色是否在地面,是否跳跃,就可以切换角色动作。
而在游戏内,只需通过 98K 物理碰撞系统插件的射线检测进行状态切换,当检测到水面或者地面后,告诉状态机当前的状态即可。
水面反射
水面材质继承了 Cocos 的 Standard PBR,加入了 Normal Map 的 UV 流动和天空盒的 IBL,Shader 部分也将开源给大家。
水体边缘方面,因为 SmoothStep 调整边缘的透明度会比较不自然,因此这里选择通过 AlbedoMap 进行了柔滑。
灵魂画手再次上线!
物件检测
由于 98K 物理不支持碰撞体的物理触发器,这里使用了射线进行物体的触发检测。
这里从头顶到脚下发射一根射线,当检测到月饼的分组时,在射线检测的结果内会返回离月饼的距离,通过距离就可以写各类逻辑了。
跳跃检测
如上图,当蓝色部分距离过低时,开始减少角色向上的移动速度;当红色部分接近地面时,减少向下的移动速度,并切换动画状态到走路或者待机。
资源下载
游戏 Demo 源码已发布在 Cocos Store,点击文末【阅读原文】即可下载,希望对大家有所帮助!
源码下载 - Cocos Store
https://store.cocos.com/app/detail/4084
其他素材
98K 物理-轻量碰撞系统插件
《iles》角色 3D 模型动画
Ancient Chinese courtyard Park, by noyou
https://sketchfab.com/3d-models/ancient-chinese-courtyard-park-55d8371278844dbbbe43e1f867b5fcde
在线体验
http://learncocos.com/jare/?v=1.01
论坛讨论帖
https://forum.cocos.org/t/topic/139836