【雷火UX带你聚焦GDC2022】黎明杀机：将Shader整合进UI设计流水线（Sarah & Adrienne）

网易雷火UX用户体验中心编译，转载需注明本公众号

关于GDC

GDC是全球游戏行业最具规模、最有权威、最有影响力的专业峰会。GDC2022中，雷火UX共获邀17场演讲，分布在9个核心演讲以及8个峰会演讲，再度刷新中国游戏行业纪录，领跑全球。

每年的GDC大会上，全球顶尖的游戏开发者们将齐聚在这里，交流彼此的想法，构想游戏业的未来方向。接下来雷火UX公众号会选择一部分高质量的演讲，陆续为大家进行介绍。本篇为大家介绍的是来自Behaviour Interactive的首席UI设计师Sarah Robinson和Epic Games的UI技术总监Adrienne Pugh的演讲“''Dead by Daylight': Integrating Shaders into the User Interface Pipeline”。

演讲标题：

'Dead by Daylight': Integrating Shaders into the User Interface Pipeline

黎明杀机：将Shader整合进UI设计流水线

Sarah Robinson
现任Behaviour Interactive的首席UI设计师。Behavior Interactive是北美最大的独立游戏开发商之一，同时也是一家手机游戏开发商，其代表作有《黎明杀机》（端游+手游）、《侏罗纪世界：原始行动》（手游）和《权力的游戏：跨越绝境》（手游）等。

Adrienne Pugh

现任Epic Games的UI设计总监。Epic Games是位于美国北卡罗来纳州的游戏工作室，其经营范围主要包括跨平台游戏引擎技术、游戏开发。其开发的虚幻系列引擎是全球最开放、最先进的实时3D创作平台，可创建逼真的视觉画面和沉浸式体验。该公司的游戏代表作有《战争机器》系列、《子弹风暴》和《堡垒之夜》等。

演讲概述：

本篇演讲中，Sarah和Adrienne主要介绍了《黎明杀机》新一代UI设计过程中遇到的各种阻碍以及她们是如何利用Shader来解决这些问题的。

通过这篇演讲，观众将了解到在哪里集成Shader来增强视觉效果、添加更多的模块、提升性能，以及UI设计流水线中的其他技术交叉。

01. 什么是shader

计算机图形学领域中，Shader（着色器）是一种计算机程序，原本用于进行图像的浓淡处理（计算图像中的光照、亮度、颜色等），但近来，它也被用于完成很多不同领域的工作，比如处理CG特效、进行与浓淡处理无关的影片后期处理、甚至用于一些与计算机图形学无关的其它领域。

回到UI设计这个领域，传统的UI设计都是基于webdev，也就是二维平面的图形绘制，而Shader可以让UI设计人员在二维的平面中呈现出三维的效果，比如Flow Maps、UV扭曲等，这一切都可以让2D的界面变得更加生动与逼真。

02. 如何将Shader整合进UI设计

接下来演讲者以《黎明杀机》的UI方案迭代过程为例，从四个方面讲述了设计团队是如何将shader整合进UI设计流水线中的。

Accessibilty （无障碍环境）

两年以前，《黎明杀机》以高度图标化的HUD界面呈现信息，代表幸存者的图标在屏幕左下角，它既能帮助玩家区分不同的队友，也能反映不同的健康状态。以杀手角色——瘟疫为例，她的特殊能力是向幸存者喷射呕吐物，当幸存者被她喷射出的呕吐物击中时，便会进入染病状态，此时代表健康状态的图标上便会蒙上一个黄色的倒计时图层，等到倒计时结束，幸存者便会进入受伤状态，此时代表他们角色状态的图标便会再次发生变化。

但由于所有玩家在相同的健康状态下都是同一个图标，而幸存者却有各种各样的角色，这就不容易区分其他玩家所操纵的角色，于是新的HUD界面便于2021年问世。相比之下，这一套UI增加了角色肖像以便于玩家进行区分，但随之而来的便是新的问题。

最初，HUD2.0有一个需求，就是尽可能多的保留住已有的设计资产。但是HUD2.0一个最大的变化是增加了角色肖像，方便玩家直观地区分其他玩家的角色。但当使用原先的健康状态显示方案时，HUD2.0变得对色盲玩家不太友好。与之而来的问题是他们要重新设计新的受伤状态图标，于是设计组开始尝试使用不同状态的红色以及不同类型的血液溅射形状。

经历了四周反复的迭代后，虽然设计组最终制作出合适的方案，但当前工作流程也让他们意识到了存在的一些问题。在开会讨论并制作完一个内容后，设计组会将图像发至QA来获得反馈，然后再根据反馈重新制作该图像，反复迭代最终做出成品。就比如先前设计组一直讨论配色应该采用哪种红色，最后却发现这对色盲玩家根本行不通，然后又重新开会并确定新的制作方案。

“Don't be the robot, build the robot”，这是团队在设计过程中的指导理念。对比先前的制作流程，设计组认为他们应该充分利用Shader在引擎中制作图像编辑软件，即通过让引擎来进行梯度映射与着色，实现图像编辑的自动化。

虽然大多数UI工具都不在引擎中，不支持梯度映射，但Shader可以用来解决这个问题。在新的需求下，设计组设计了一款新的渐变贴图。

这一次，设计组通过梯度映射制作了两种不同颜色（红色和黄色）的渐变贴图，将二者叠加并增加一个倒计时进程。

然后他们根据不同类型色盲玩家的反馈，即时地调整渐变贴图的颜色，成功找到了适合不同人群的颜色组合。先前需要4周才能完成的反馈+迭代流程，如今仅仅只需要30分钟的电话会议就能解决。

Modularity（模块性）

《黎明杀机》中包含种类繁多的技能、道具和物品，这些内容会通过渐变的色调来表示不同的等级，比如红色代表极其罕见，而黄色代表普通等等。值得注意的是，这些带有色调变化的内容不是由一个个定制好的单一颜色组成，实际上是通过变色来实现的。并且如果仔细观察可以发现，不同稀有程度的物品其纹理呈现也不同。

在接触Shader之前，设计组能做的只有着色，这意味着他们必须把渐变分解成单独的块来应用那些单一的颜色，重新编译好后再继续制作下一个内容。

由此可见，逐个制作贴图是一项工作量非常大的作业，所以最好的办法依旧是利用Shader进行自动化的生成。

简单来说就是将梯度映射与背景纹理进行叠加，然后在Shader中按照需求更改形状，这样便可以生成不同颜色且形状不一的项目。

Performance（性能）

通过Shader，设计者可以将若干个特征“打包”成一个整体呈现，通过调整不同特征的变量，最终可以生成各种各样复杂的特征，一方面这免去了原先重复设计的冗余工作量，另一方面也不再需要导入复杂的4K界面背景原画，以此实现更好的性能。

在《黎明杀机》新一代的UI设计过程中，Shader经常被用于与Channel Packing（通道打包）技术结合来减少纹理的数量。传统的UI设计在制作某个界面纹理时都是直接进行某个具体特征的绘制，而Channel Packing则是一项可以将所有灰度纹理整合的技术。这项技术在GameDev中几乎是随处可见，但因为相关技术的发展和UI领域并没有什么交叉的应用，因此它并没有在UI设计领域出现。

以《黎明杀机》中的血条为例，游戏界面的血条图案一共由3个纹理特征整合而成，每个特征分别对应一个不同的通道。其中，红色通道对应血条最外面一层发光的边框，蓝色通道对应的是血条内容，而绿色通道则是血条的边界。通过Channel Packing技术，这三个通道的特征最终会呈现为一个整体，当已有的血条UI被认为存在瑕疵需要修改时，设计者可以利用Shader来实现这三个通道颜色、透明度亦或是其他填充内容的调整。因此，Channel Packing技术只用了一种整合的纹理设计便能控制多个维度的变量，而不是字面意义上地将那三个图层叠加在一起。

再比如《黎明杀机》中的按钮界面，当用户将鼠标移至某个按钮时，原本黑底白框的按钮会出现一片血色的高亮。这片“血图”一共由14个较小的纹理特征组成，如果按照传统的UI设计方法，设计者只能将它们当作一个个独立的部分对待，也就是说要重复绘制14次。

当然，这种重复的工作依然可以靠Channel Packing来进行一定的优化。设计者一共制作了3款纹理样式，将其进行打包并利用Shader进行着色。其中红色通道对应的是较暗的“血图”纹理，呈现暗红色；绿色通道是相对较亮的纹理，呈现中等程度红色；蓝色通道是斑点状的纹理，呈现高亮的红色。

这三个通道被整合成Alpha通道，最终呈现了与先前类似的“血图”纹理效果，且修改起来更加方便，过程相比先前则是更加模块化。

Channel Packing除了可以实现叠加的功能，还可以通过智能的重复呈现将大尺寸纹理转变为较小尺寸。例如《黎明杀机》主界面上方的标题选项栏背景中往往有一层烟雾状质地的纹理，由于游戏界面的尺寸往往与屏幕尺寸相匹配，对这种横幅状的尺寸需求往往达到4K，而在Channel Packing的使用情境下，这种尺寸需求变成了256X256。

设计者只需要制作3个256X256的纹理便可以达到类似的效果。其中，红色通道对应的是中间部分，该通道呈现的是重复的中间段纹理；绿色通道对应的是横幅右端的“结束”，蓝色通道对应的是横幅左端的“开始”。两端的纹理只呈现一次，而中间部分则可根据要求呈现若干次，以此便可灵活呈现一个可调节长度的横幅纹理。

Enhanced Visuals（视觉增强）

《黎明杀机》作为一款恐怖游戏，不光是其游戏过程会给玩家带来惊悚的体验，其UI设计也是契合了这款游戏的风格为玩家营造出一种模糊、黑暗甚至是希望消散的氛围。

因此，Shader还可以被用来增强视觉效果。Flow Map通常被用于呈现游戏中水面的效果。以另一名杀手梦魇为例——也就是猛鬼街的主角Freddy，他的被动技能是制造梦魇领域，让幸存者陷入沉睡，然后在“梦中世界”袭击他们。受到他的杀手效应影响的幸存者其界面图标会发生一些变化，主要表现为角色图标处会有一圈流动的圆环，表示该幸存者被催眠的程度。

而像UV扭曲（UV Distortion）则被用在游戏大厅界面的背景动画中，用以营造一种雾气缭绕鬼影森森的视觉体验。另外在游戏开局时，屏幕左上方会短暂地呈现当前地图的名字，但很快此处文字会出现一种逐渐消逝的效果，这便是纹理遮罩（Texture Masks）技术所展现的效果。

当然，以上提到的三种技术并不是完全独立地被用于《黎明杀机》界面元素的设计中，它们同样可以结合使用来实现更棒的视觉效果。在新版《黎明杀机》的新手教学中，Shader被用以实现弹窗的动画化。以新手教学开头弹窗为例，人物肖像部分采用的是置换贴图的呈现方式，其周围的黑雾效果便用到了Flow Maps技术。这实际上便是设计者通过Shader将两种技术的呈现效果进行了整合，将不同技术模块化，再像搭积木一样将其拼在一起。

除了前面提到的教学弹窗，这些技术同样可应用于游戏界面的其他场景。比如Flow Maps和梯度映射在shader中的结合，呈现了完成新手教程后奖励弹窗中标题栏的烟雾效果，而先前只能用独立的纹理进行呈现。

再像新手教学大厅界面的按钮，从未解锁到完成时的烟雾消散的效果动画，则是纹理和UV呈现在shader中的结合。

总的来说，《黎明杀机》使用了简单的shader概念创造了一个shader视觉风格指南，以增强和赋予用户界面生命力。上述提及的3D艺术中的Flow Maps、UV扭曲（UV Distortion）以及纹理遮罩（Texture Masks）技术同样可以应用到UI设计中。通过Shader，这些技术被用于制作动画化的界面呈现效果，让UI界面与《黎明杀机》整体的游戏风格更加匹配。

03. 总结

总的来说，演讲者通过此次演讲向设计师们推荐了Shader这款工具，其能够带来的好处有：将Shader结合到流水线和迭代工作中可以减少对额外软件的依赖，其模块化的工作能够减轻工作量，并且巧妙的重复可以减少复杂图案的使用，以此提高程序运行的性能。另外，Shader还具有很强的视觉效果增强潜力，且成本相对较低。