查看原文
其他

源码下载丨4天快速开发一个 3D 跑酷游戏,试一试 Cocos Creator 3.6 新特性

孙二喵 COCOS 2023-03-16

引言:开发者孙二喵通过一个游戏 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 游戏在不同平台遇到的碰撞性能问题和包体问题

  1. 插件体积只有几十 KB。

  2. 内置八叉树对大场景优化好。

  3. 支持射线检测,写吃饼的逻辑完全够了。


>>滑动查看更多


功能使用


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 物理-轻量碰撞系统插件

https://store.cocos.com/app/detail/4035

《iles》角色 3D 模型动画

https://store.cocos.com/app/detail/4044

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


往期精彩

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存