《I See Red》汹涌的色彩背后的技术美术

WHITEBOARD GAMES / WHITEBOARD GAMESAuthor
Jul 21, 2023|10 最低
《I See Red》汹涌的色彩背后的技术美术
为方便起见,此网页已进行机器翻译。我们无法保证翻译内容的准确性或可靠性。如果您对翻译内容的准确性有疑问,请参阅此网页的官方英文版本。
在这篇客座博文中,Whiteboard Games详细介绍了工作室首个商业发行版《I See Red》的历史,并分享了游戏独特的色彩处理技术。

我们是Whiteboard Games,一家开发工作室,于2021年在阿根廷布宜诺斯艾利斯成立,由五名希望开拓自己游戏行业道路的大学毕业生创立。从那时起,Whiteboard已经发展成一支由30名年轻专业人士组成的团队,而你之所以能阅读这份简介,是因为我们今天在这里聚集一堂来讨论我们的第一个商业版本:我看到红色

《Red ⁇ 》是一款疯狂的双棍射击流氓游戏,充满了愤怒、战斗、复仇、鲜血、悲惨的往事,并且 — — 没错,它的名字就是 — — 血红色。它与其他游戏相比并不难觅踪影,不仅因为科幻的环境和俯视镜头,还因为关键的美学元素:你将面临的挑战是找到比黑色、白色、灰色和红色更多的颜色。这个决定很早就做出了,与故事和游戏紧密相连。当然,它也带来了挑战:制作(和玩)一个色调如此有限的游戏并不适合所有人。那我们是怎么做的呢?请继续阅读,一探究竟。

《I See Red》的历史

我们先从简略的历史开始 , 来回顾一下外观的演变 , 以及导致《I See Red》今天的成就的关键决策。

第一个原型

这一切都始于布宜诺斯艾利斯达芬奇第一多媒体艺术学院“视频游戏设计和编程”课程的一个论文项目。从这项工作诞生了一款对美术要求较低的游戏,因为学生没有太多的资金。到这时,红色尚未占据主导地位。游戏中有蓝色,甚至绿色,但不要太执着,因为额外的颜色不会存在太久。

专业成长

在课程事件之后,我们的创始团队看到了真正的商业潜力,因此对这个项目不以为然。我们决定在大学之外继续开发,并组建一个团队,从而将 Whiteboard Games 打造成一个工作室。(有趣的事实:我们的一些教授也看到了自己的潜力,在寻求帮助时,他们决定加入这个团队。)

到这里,游戏的基础已经搭建好了:一款红色快节奏科幻射击游戏,狂热的复仇。

最终效果(使用 HDRP)

几个月甚至几年过去了。在与出版商和投资人的交流中,我发现 Red 逐渐拥有了许多相互关联的关卡 – 现在不仅与人的敌人,还有外星人 – 大量的被动、过场动画,甚至还有更精致的艺术风格。有了足够的错误修复、测试、内容和性能改进(没关系,不用谢我们 ) , 游戏马上就能见天日了。

最终效果(URP)

游戏的Demo版终于来了。我们参加过一些活动和比赛,并为自己的创造感到自豪。在这一阶段,我们决定计划向主机平台发布,从HDRP转移到URP,用高清来营造风格化的美学。我们还为灰度颜色添加了微妙的冷色调(是的,蓝色回来了……但不要告诉任何人),使其更具金属感,并进一步打磨了一切。切换后我们需要将部分HDRP功能逆向移植到URP中,但我们相信这一切都是值得的。

除了之前阶段的外星关卡外,《I See Red》现在还加入了机器人敌人、几名首领、故事情节、问答、本地化等等“任务”。是时候按下绿色按钮了。

这当然是一个漫长的过程,前进道路上有许多挑战和变化,更不用说多年的工作。我们认为这感觉和外观都很棒;如果Reggie ⁇ s-Aimé和其他“全行业最有经验的高管”这样说,我们一定不会疯。无论如何,我们还是成功发布了它。但问题是如何仍然存在。祝贺所有技术美术迷们:是时候开始学习技术了。(内容警告:我们全力以赴地奋斗。)

Blood VFX

我们花了很多时间在血上,因为它是你击中敌人或在游戏中被击中时的主要视觉反馈。这个元素必须足够清晰和令人满意,红色是游戏最重要的颜色,因此没有懒惰的空间。

我们想用鲜血将世界漆成红色,因此环境与鲜血之间需要强烈的对比,以及贴花的变体。原本我们可以用纹理来遮罩贴花,但贴花的数量过多又过于重复。当然,我们不希望这样。

我们想出了一种组合噪点、URP贴花投影仪和世界坐标的方法,让贴花的位置不同,形状也会改变。我们使用了这种方法来修改动画的宽度、高度、边缘平滑度和血迹粗糙度。比如,在打败敌人后生成血泊时,这会派上用场。

Shader Graph在生成I See Red的贴花。

通过改变反射率的颜色和噪音遮罩的属性,我们还可以为外星人和机器人生成不同类型的血液,这些血液具有类似石油的东西。这不仅仅是为了实现敌人之间的审美差异。从游戏的角度来看,血也是血,Acquire可以获取被动能力来“吸收”留下的血,产生不同的效果:人血是中性的、外星血会伤害、机器人血会治愈。

除了贴花外,《I See Red》还用了许多血粒子。想想我们刚才提到的被动能力:我们需要一种向玩家传达吸收信息的方法。当然,结果就是产生了迷你血龙卷风。

三种血腥的“龙卷风”粒子,每种敌人一个:外星人、人类和机器人。

这些狂风暴雨是使用滚动纹理和粒子效果实现的。粒子效果是 3D 建模的丝带(多边形的条纹)加上着色器,着色器使用主 UV 向上滚动纹理。这样一来,我们就能使用粒子系统的自定义数据来改变网格的速度、流动和形状,为条纹添加淡入和淡出效果,从而在龙卷风的顶部和底部平滑地呈现和消失。拿上这个,再加些血丝来喝些果汁,你就形成了一个反向的血龙卷风,把血吸收进玩家体内。

说到粒子,我们不能忘记当玩家或敌人受到伤害时产生的粒子效果。这些粒子与之前讨论的血球/贴花在同一帧中生成,两者的动画通过代码协程实现无缝过渡。子弹的生成方向与玩家相反。

事实证明,通过代码做到这一点对于个性化效果非常有用,如果伤害更大、敌人更近、甚至效果接近墙壁,效果也会变得更大。我们使用了射线投射来确定贴花和粒子在穿过墙壁之前应该多长时间,以及贴花的倾斜度(例如,如果贴花需要贴到墙壁上)。接着将这些值传给动画,效果就神奇了。

命中效果,为子弹添加非常令人满意的感觉。
即时特效代码片段

这可是一大笔血。很多红色。由于游戏使用的色调有限,我们需要确保游戏不会在任何方面丧失可读性。广告素材的风格风格有限,我们不得不制作广告创意素材、使用许多工具和技巧。分层看,红色的东西不一定都是红色的。

你可能会发现一扇红色轮廓的门会发光,但一踏入门就会变成灰色。同样的道理也会发生在敌人身上,敌人在敌对时会变成红色,在敌对时会变成灰色,一旦敌人不再敌对。游戏会借助这些信号来用独特的颜色来传达感兴趣的事物:未知区域、重要物体、危险障碍物等等。从某种意义上说,玩家仿佛有“Detective Vision”在不断打开,并不断更新以只显示当时相关的内容。

但如果你不跟我们一样看红色呢?如果想要玩《I See Red》的人也察觉不到红色和灰色的区别怎么办?我们当然希望每个人都能体验《Rage 》 , 这也是《I See Red》有13种语言版本的原因。毫无疑问,这13种语言的许多使用者将从无障碍功能中受益。进入自定义URP色盲模式。

URP 特殊色盲模式

在制作《I See Red》时,我们知道一个黑、白、红三色的宇宙可能并非所有人都能读懂,所以我们想出了一种解决方案,用不同的色盲模式让所有人都能玩。最好的制作方法是使用Unity ⁇ 中的可编程渲染功能和一个简单的着色器。 其主要思想是使用SRF内部的Look-Up Table(查找表)来转换不同通道中的每个值,然后将这些值转换为最终的Render Pass着色器。 由于特效需要作为最终渲染通道执行,所以最终渲染通道是在UI渲染后完成的,也是I See Red每一帧的最终渲染通道。

在调查了不同类型的色盲症以及怎样用可编程渲染器来迎合它们后,我们了解了每个人对《I See Red》中颜色的感知方式,从而创造出了不同的模式来锐化或修改相应的颜色:Protanomaly、Protanopia、Deuteranomaly、Deuteranopia、Tritanomaly、Tritanopia、Achromatomaly和Achromatopsia。游戏的红色在下方可能没那么红,但没关系:归根结底,最重要的是让每个人都能享受游戏。我们还有许多系统可以传达你所需要的所有愤怒。

最后,我们的血液很美丽,每个人......至少只要他们超过14、15、16或17岁,视你生活的地方而定。但血当然不是《I See Red》美学的全部。别忘了红色有多种方式、不同色调和形态,灰色也是如此。

Splatmap着色器

我们得想出一种适应新模型的配色方案,不必从头开始重做纹理,这需要大量的时间。到这里,我们必须坦白:《I See Red》其实不是黑、白、红三色,而是红、绿、蓝三色,和其他游戏一样。我们一开始撒了谎(很抱歉),但它看起来仍然不像大多数其他游戏。这是因为我们使用了一个自定义Shader来应用Splatmap,这是一种将多个灰度纹理或遮罩组合成一个纹理的纹理,每个纹理使用不同的通道(红、绿、蓝或alpha)。

建模过程的不同阶段,包括RGB splatmap。

我们可以在引擎内分别控制每个通道值,更好地控制游戏内的颜色,用更少的纹理来节省资源。它还能极大地节省迭代时间。

在 Unity 编辑器中实际使用的 splatmap 的 GIF。
还有更多?

我们有血 We have blood.我们有敌人我们有环境。我们有需要的颜色。感觉很好。接下来,我们可以讨论自定义雾气、光照和摄像机数学、色调映射,或者场景中伪透视的酷东西...

是的,内容还很多,但我们得呆上几个小时(这需要写稿子),所以还是先做个总结吧。不再有技术性的东西。快来体验下吧:玩《I See Red》 然后告诉我们你是否发现了 与我们这里讨论的话题有关的东西最后但并非最不重要的一点是,如果你想了解更多,请随时联系我们或Unity的美女们。

感谢您的阅读,直到下一次!

你可以下载《I See Red》到Steam。玩一玩,发现Made with Unity开发者的更多故事