为武汉游戏人点赞!3D《巅峰漂移》技术分享

本文首发于 Cocos 官方公众号 (CocosEngine),更多精彩欢迎关注哟!

**《巅峰漂移》是由武汉迷萌基于 Cocos Creator 3D 研发的一款 3D 赛车漂移竞速微信小游戏。**近日,Cocos 对《巅峰漂移》项目组进行了专访,疫情之下,武汉当地游戏 CP 现状如何?这么优质的 3D 小游戏创作工作流是怎样?又带来了哪些宝贵的技术经验呢?一起来看看吧!

游戏玩法非常直观,通过手指滑动屏幕控制赛车的移动方向,躲避源源不断的敌人的追击,存活时间越长可以获得越高的分数。

玩家可以在游戏中充分展示自己的漂移技术,收集场景中的小星星以及击败其他敌人可以获得额外的金币和经验加成。

随着时间的推移,敌人数量会增多,强度也会加大,玩家需要面临更多的挑战。玩家的等级会随着得分而升高,等级越高,结算时获得的经验也就越丰富,每一次提升等级都可以获得强力的增益效果,此外场景中有许多增益道具,拾取道具可以帮助玩家提升生存能力。

《巅峰漂移》设置了丰富的养成系统,玩家可以消耗金币对道具进行升级,以提升增益效果。还可以对最高速度、加速性能和额外得分进行升级,等级提升之后,你能够获得更快的移动速度、更高的加速效率以及更多的额外得分。

为了满足玩家对于车辆的多样性改装需求,从车辆的喷漆样式、尾气颜色到局内表情,游戏均做了丰富的设计。此外,游戏还创新加入了段位系统,根据玩家所得最高分数解锁不同的段位,从黑铁、青铜到车神。除了微信好友,玩家还可以与全球玩家比拼,大大提升了竞技乐趣。

武汉当地游戏 CP 现状如何?游戏创作工作流是怎样?有哪些宝贵的技术经验呢?《巅峰漂移》项目组接受了 Cocos 的专访,以下为访谈内容整理:

请问《巅峰漂移》项目共有多少成员?其中研发人员的占比是?

《巅峰漂移》游戏项目组5人都是研发人员,我们公司成立于2019年8月份,主要专注于小游戏研发,也会接一些轻度、轻中度的定制项目。

除了《巅峰漂移》之外,我们已经上线的游戏项目还包括《披萨小王子2》《刺客别杀我》《巅峰漂移》《天天飚车 3D》,也欢迎各位开发者朋友搜索体验,此外,还有一款 APP 游戏《三国大作战》即将上线。

《巅峰漂移》微信小游戏项目从立项到上线共计用了多长时间?

从立项到项目上线,只用了半个月时间。针对皮肤功能操作手感和性能优化,我们做了2-3个版本的迭代,后续还会加入新手引导、新的游戏内容以及优化游戏体验。

《巅峰漂移》中车子相撞会有震动,小游戏为何也需注重震动反馈?

由于《巅峰漂移》是赛车主题的街机休闲游戏,游戏中会有大量激烈追逐的画面。尽管是小游戏,我们仍然希望通过震动反馈的方式为玩家带来一些紧张又刺激的体验。

除了好友排行榜,游戏还有没有其他挖掘社交链价值的内容呢?

除了排行榜之外,我们还加入了试用功能,只要玩家分享游戏链接给好友,即可获得赛车和皮肤使用,此外还可以获得开局免费道具等。

从立项到上线只有半个月时间,开发效率真的很高,可否分享一下这款游戏的开发工作流?

我们的工作流:

  • 立项。
  • 策划完成功能文档,界面原型,文档定稿,同时程序开发核心功能。
  • 美术程序同步进行,程序完成剩余功能,对于 UI 相关的功能,会先使用一些常用的组件拼装界面,等美术出完效果图和切图后,统一替换。
  • 最后整理,分包,压缩打包上传。
  • 测试,提交。

为什么会选择 Cocos Creator 3D 作为开发引擎呢?

3D 表现力强,团队成员也都比较熟悉 Cocos Creator,有些库可以直接从Cocos Creator 2D 中移植过来。Cocos Creator 3D 毕竟是一条全新重点产品线,Cocos 团队必将会精细打磨。我们是一个敢于尝试的团队,提前踩坑,对后面效率的提升有积极的作用。

游戏内的无限地图是如何实现的?

实现原理:分成 9 个 3x3 的格子(我们称为 Grid ), 每当玩家控制的赛车快移动到当前 Grid 边缘时,会将另外一边的 Grid 补到另一边。

游戏道具和资源都会刷在每个 Grid 子节点下面, 这样只需要移动 Grid 既可完成下面所有的资源的移动。

这样做的好处是:(1)很难看出地图上的资源有重复;(2)创建在其它 Grid 里的道具/星星可以重复使用,玩家离开后无需要再次创建,直到被玩家吃掉。

尾气和刹车痕是怎么实现的?

这两个效果是利用 Cocos Creator 3D 的粒子特效实现的,其中刹车痕还用到了拖尾粒子特效,大家可以参考我们使用的粒子组件配置。

可否分享一些性能优化的经验?

在游戏过程中创建和销毁都是比较耗时的,通常我们可以将创建过程提前,销毁推迟操作, 但在某些情况下(比如无尽关卡)在游戏过程中生成不可避免,就不可能一次性创建所有节点。

1.分帧创建

关卡生成器负责将需要生成的 prefab,位置信息提交到节点管理器的“创建队列 ”。

节点管理器进入游戏后开启定时器,每过 N 帧,从“创建队列”拿一条创建信息。

(小技巧:nextInterval 可随时控制,这里自行做的定时器是为了可扩展性,比如检测到 fps 不稳时,可以考虑将创建间隔拉长)

从缓存里取节点,当节点不存在时自动实例化 Prefab (可在场景加载时,创建若干,以免在游戏中创建)

当资源被玩家吃到后,会通知节点管理器回收这些资源。

(这里的 poolManager 实际上就是对 cc.NodePool 的封装,每个 prefab 对应一个 NodePool. 方便快速查找)

这套机制在实际使用中复用性好,实用性非常高。

2.碰撞优化

(1)车的碰撞检测使用 ,Cocos 自带的 BoxCollider 实现。

每个车上有一个大的碰撞盒用于检测与敌方车辆的碰撞,且绑定了四个“方向碰撞盒”,用于检测是碰撞方位(因为碰撞无法确定碰撞点,只能用不同的碰撞盒表示不同的碰撞位置)以确定是被撞还是主动撞击(侧面和尾部可以撞毁敌车)。

为了效率,这四个方向的碰撞起初不检测碰撞的。

//设置方向碰撞盒的掩码 , 当masks =0 的时候表示不发生任何碰撞
enableDirCol(maks) {
    for (var i = 0; i < this.dirColliders.length; i++) {
        var c = this.dirColliders[i];
        c.setMask(maks)
    }
}

当最外面的碰撞盒发生碰撞时(onTriggerEnter),才开启"方向碰撞盒"的检测,并在最外层碰撞盒结束(onTriggerExit)的时候关闭"方向碰撞盒"的检测。

具体设置2个碰撞器的是否检测相互碰撞可以参考:
https://docs.cocos.com/creator3d/manual/zh/physics/physics-group-mask.html

(2)道具的碰撞检测,因为道具资源刷新非常多,峰值在 100 个左右的碰撞体,使用 BoxCollide 性能会严重受损,加上这些物体的碰撞不需要太精确。

还记得前面说的 Grid 吗?我们在 Grid 上又做了子网格:

每个道具都会刷新在网格里,相当于3维数组的一个元素, 通过数组索引即可知这个格子里的内容。

有的小伙伴可能觉得费内存,其实通常情况下只需要 x * z * 1 的空间(在不考虑 y 轴的情况下如:跳跃)

这里每个网格对象里记录着节点的位置信息:

我们通过赛车的本地坐标可以直接转换为其所在的格子坐标。

可直接使用格子坐标索引到附近的节点,时间复杂度 O(1):

(3)其它

● 向量计算:如果当一个向量已经计算过一次长度了,要实现归一化时,没有必要再 Vec3.normalize() 计算一次,可以直接使用使用除法,可以少开一次方。
● 能不必要每帧检测的地方就开定时器,隔帧检测。
● 尽量避免/减少在游戏过程动态加载。
● 所有有距离比较的地方,都使用 Vec3.squaredDistance 进行平方比较。
● 1-360度计算三角函数采用查表法。

> 目前团队成员是在家复工状态还是回办公室办公了呢?疫情对贵公司的影响如何?

疫情对所有的企业、公司和个体户都产生了比较大的影响,虽然说游戏公司不局限办公场所,员工可以在家办公,但办公效率真的不如在办公室,一方面,员工的电脑配置跟不上需求,缺乏工作氛围,另一方面还存在员工之间沟通不及时、不通畅等问题。

这两个多月,武汉地区的游戏项目或计划十有八九都被迫延期甚至取消,有的公司可能会转变策略争取达成新的 KPI,为了弥补这2个多月产生的损失而赶工,这就预示着员工要面对长时间的加班,可能导致员工波动。对于我们这些初创公司或小公司而言,存活下去是唯一念想。

非常感谢《巅峰漂移》项目组接受我们的采访,并分享了如此多宝贵的技术经验。针对武汉地区的 CP 朋友,Cocos 推出了线上技术支持服务,有需要的武汉开发者可以联系我们,希望可以为武汉尽绵薄之力。

最后,祝《巅峰漂移》取得更好的成绩!祝同事们身体健康,祝公司顺利渡过疫情影响,蓬勃发展!

技术派,是 Cocos 公众号专栏,我们将不定期邀请知名的游戏制作者,为广大开发者分享来自真实项目的实用的开发技术和实战经验。欢迎大家推荐想要学习的游戏产品和想要了解的技术知识,也诚邀有技术分享意愿的开发者联系我们噢~

9赞

疫情期间还能做出这么棒的游戏,点个赞

1赞

请问下,如果要做弯曲,和起伏的赛道,应该怎么做呢

可以看这个

好多广告,

没广告怎么回本~~:joy:~~

多谢楼主

mark

学习到了东西!!这个碰撞方法真的是好方法

你们这个视角 是一个相机么

请问这个游戏视角 是用的的一个相机么

引擎还是有BUG啊, 玩了一下, 结算页直接把微信小游戏的渲染都给干死了,全屏蓝色,小游戏最上层按钮都消失了

应该是游戏的bug, 后面加了 矩阵跳转的sdk ,图片多了,内存容易爆。

一个相机,做了偏移跟随。