Cocos 技术派|3D 小游戏《快上车》技术分享

作者:CocosEngine
2019-09-14
7 3 0

7 月初,Cocos Creator 3D 发布了第一个公测版本,超过千名开发者报名参与公测。为了高效收集测试反馈,集中精力进行产品的迭代和优化,快速推动产品达到功能全面并相对稳定的状态,第一个版本只发放了少量测试资格。经过近 2 个月的公测,Cocos Creator 3D 取得了飞速的进展,并在8月31日开启了全面公测。在此,向所有参与公测的开发者以及合作立项的重要合作伙伴表示衷心的感谢。Cocos Creator 3D 正式版将在不久与大家见面,敬请期待!

截止目前,已经有不少开发者使用 Cocos Creator 3D 制作出了自己的 3D 游戏,《快上车 3D》便是其中之一。

游戏介绍   

《快上车 3D》是采用 Cocos Creator 3D 测试版本开发的一款超级刺激的 3D 休闲小游戏。玩家在游戏中扮演一位快车师傅,控制小车在各种道路上进行移动,接送乘客安全到达目的地,即可过关并获得金币奖励。游戏操作很简单,按住屏幕即可控制小车移动,长按为加速,松开屏幕可以减速。在控制小车行动的过程中,需要时刻注意来往的车辆,及时增减车速,以免发生碰撞车祸,导致任务失败。游戏采用闯关制度,每一个关卡都有不同的订单任务,随着关卡的深入,游戏难度会逐步增加。此外,游戏设置了汽车皮肤系统,使用金币可解锁更多车型和皮肤。

技术分享  

《快上车3D》开发团队接受了 Cocos 技术派的专访,并大方分享了这款 3D 小游戏的制作故事和 Cocos Creator 3D 开发经验及使用技巧,一起来了解看看吧!

受访者:《快上车 3D》团队

编辑整理:C 姐


《快上车3D》使用的测试版本是?

线上版本使用的是 Cocos Creator 3D 1.0.0-beta5 版本,当时还没有地图编辑器,因此我们的关卡地图都是自己来实现的,也没有图集合并和压缩功能,导致我们的包体比较大,据说 Cocos Creator 3D 新版本已经有这些功能,我们也正在接入新版本的引擎。

3D 场景地图和关卡编辑方式?

关卡编辑,我们修改了多次方案。最初的想法是一个场景对应一个关卡,然后关卡编辑人员直接通过 Cocos Creator 3D 进行关卡编辑,直接运行便可看到效果。考虑到游戏中有太多的公用元素,如灯光,UI,以及车辆管理等公用节点,我们将地图修改为一个个 Prefab,然后使用通用场景,启动时直接实例化该地图预制体。后续发现随着关卡复杂度的提升,直接使用预制体,包体将大幅度增大,因为 Prefab 会记录大量的节点关系及地图所不需要的信息。

于是,我们决定增加一个地图导出功能,把原有的 Prefab 下的信息进行解析,解析出有几栋房子,几棵树,几条路,然后分别用的是哪些模型,以及对应的坐标、旋转、缩放等信息进行记录,并将这些信息进行压缩,最后持久化自定义格式的文件中,然后再加载地图时根据动态去创建地图元素。

这样的实现方式,让关卡编辑人员可视化编辑的同时,又不用额外开发关卡编辑器,也解决了包大小的问题。

小车移动跟随的阴影是贴图吗?

车辆移动过程中的阴影是实时计算的,可在 Scene 节点 planarShadows 组件上配置开启,但目前阴影只能投到某个平面上,平面的位置通过 Normal 进行配置:


开启阴影支持外,还需要对哪些物体拥有阴影进行设置,即在模型的 ModelComponent 组件下将 ShadowCastingMode 设为 ON,便会有阴影效果。需要注意的是,目前引擎在一个场景里只支持一个平行光,多个平行光将会没有效果,如果要补光可能要采用其它方式。

拖尾效果如何制作?

首先,创建新的粒子系统,调整对应的粒子参数,如图:

选择 TrailMaterial 一栏,拖入对应的材质:

双击进入材质编辑,调整对应的材质模式和贴图效果,拖入对应的贴图文件,参数如下:

最后记得保存效果,拖动粒子效果,浏览效果。

汽车尾气的特效怎么制作的?

首先,新建默认的一个粒子系统,调整对应参数,比如粒子的数量、初始速度、粒子大小尺寸、结束时间。其中最重要的一个选项是图中红框的内容,将模式改为 word,这个模式使整个粒子的拖尾效果会变得符合现实中的运动规律:

发射器选择的是 BOX,具体参数如下图:

接着,粒子材质选择放在了 ParticleMaterial 这一栏:

双击材质,进入材质编辑器,选择对应的材质和贴图模式,如图:

贴图资源根据自己想要的效果去找对应的贴图文件,到这一步尾气效果基本就出来了,记得保存哦。

汽车的 3D 展示怎么制作?

相对于 2D 游戏来说,3D 能够展现出汽车更多的细节,让玩家更想尽快获得这些车,在一定程度上,提升玩家的游戏动力。

为了能让模型在 UI 上展示,需要给模型的节点上(即挂载着 cc.ModelComponent 组件的节点)添加 cc.UIModelComponent

同时要更改车的材质,将材质的 Effect 修改为 builtin-unlit,这样车辆展示在 UI 上面就不需要受到灯光的影响。

为了实现车辆旋转,可以先将车辆挂到某个空节点下面,空节点先调整好一个展示角度:

之后,只需修改自身的欧拉角 y 值,便可实现车辆围绕某个视角进行旋转。

如何更好地表现出“撞车”效果呢?

为了让撞车时有比较好的表现效果,我们使用了引擎提供的物理引擎:cannon.js,能够拥有比较好的翻转及撞击感,但出于性能上的考量以及游戏自身情况,我们对刚体进行了分组,分成了玩家控制车辆、AI 控制车辆、地面等三组,默认情况下,玩家控制的车辆只跟 AI 控制车辆进行碰撞检测,并且不开启重力影响,只有当玩家车辆与 AI 车辆碰撞触发时(即那一瞬间),玩家控制的车辆开启重力影响,并且与所有元素开启碰撞检测,然后给车辆一股冲量,这样既能实现物理特性,又能优化性能。

UI 和编辑器体验如何?

Cocos Creator 3D 延续了 Cocos Creator 2D 的 UI 设计,学习成本比较低,2D 所拥有的各类布局神器,widget,layout 都有继承过来,开发效率高,适配好,因此我们之前在 2D 的 UI 框架设计可以直接沿用过来。

从工作流角度简述游戏的开发过程?

以关卡制作的开发过程为例,关卡制作是《快上车 3D》项目开发过程中比较重要的部分,所以这个流程我们做了比较细致的规划:

首先,由策划规划好大致会用到的地图元素,如有多少种路面,多少种树,多少种石头等。

然后,开始并行开发:

  • 美术开始开工,定好整体风格后,开始制作地图元素
  • 程序同时开工,开发对关卡编辑的支持
  • 策划开始规划每一关卡的路线图及 AI 车辆等

最后开始组装,由关卡编辑人员根据之前规划的路线图,使用美术提供的素材,在 Cocos Creator 3D 中完成关卡的编辑,最后在游戏中运行起来。

后续的迭代和立项计划是?

我们团队一直立志于开发休闲小游戏,使用 Cocos Creator 开发的游戏已经有十多款,包括卡牌游戏《五子大作战》、休闲游戏《梦幻甜品》《虫虫向前冲》《分手餐厅》等。之前开发的游戏都是使用 2D 或 2.5D,这次终于可以使用 Cocos Creator 3D 引擎提升游戏整体的效果。后续会进一步优化游戏,增加更多的场景、关卡、汽车,也会增加更多 3D 表现。有了这次的开发经验,我们也会扩充开发的游戏类型,参与开发更多 3D 游戏。


感谢团队的无私分享!


技术派,是 Cocos 全新推出的专栏,我们将不定期邀请优秀的游戏制作者,为广大开发者分享来自真实项目的实用的开发技术和实战经验。如果您在使用 Cocos Creator 的过程中,获得了独到的开发心得、见解或是方法,并且乐于分享出来,帮助更多开发者解决技术问题,加速游戏开发效率,期待您与我们联系!