《街霸5》的美术设计思路分享

怪蜀黍

龟井敏征，是《街霸4》以及《街霸5》的美术总监（Art Director），在技术美术这个职位上拥有 16 年的开发经验。他在GDC 2017上，向大家分享《街霸》的美术设计思路。
本文是视频的内容总结。
视频地址：
The Art Direction of Street Fighter V: The Role of Art in Fighting Games
此次演讲分为以下几个重点。

1. 容易理解的美术设计在《街霸》的美术设计中，有两个很明显玩家能看不来的的视觉特点：突出的肌肉线条，以及夸张的画面表现。为什么要这么设计？这是跟格斗游戏的进行方式是息息相关的。


夸张的肌肉，总能让我想到JoJo


千奇百怪的人物在格斗游戏中，玩家从游戏画面接收信息，然后经过大脑处理信息后，再输入相对应的动作。玩家在进行游戏时，这个流程会以非常快（大约只有 0 点几秒）的频率不断地循环运作。
因此在画面的呈现上，必须尽可能达到能让玩家一目了然。像是「这个拳头揍过来会很痛」，或是「我的角色正在被攻击」等信息，必须以容易理解的美术表现正确地传达给玩家。



玩游戏的过程就是接受信息处理信息的过程在格斗游戏中的美术表现必须能够在瞬间将信息传达给玩家。
1-1 角色线条绘制
这边龟井以过去 2D 点阵时代的角色阴为例，在仅仅 10 个像素的范围内，开发团队竭尽可能地让阴的正拳传递出「握拳时肌肉该有的线条」之类的信息。


像素时代的角色轮廓


10个像素就有那么多讲究此外，在 Capcom 公司内部，有着一本由《街霸2》的灵魂画师安田朗（笔名：Akiman）所监修的《あやしい美术解剖図》。



网上仅能查到部分内容：
アートの話 No.001「あやしい美術解剖図
这份 Capcom 内部限定的数据是在开发《街霸 ZERO》以及《恶魔战士》时期时完成的，书中记载了许多关于人体各部位的绘制准则，是一本相当贵重的数据集。


《街霸5》的人物模块参考着这份数据来制作，以隆的手臂为例，可以看到人物模块正面以及侧面的上臂下臂各自具备应有的宽度比例。但有趣的是，如果将游戏的人物模型与现实中的人体部位照片做比对会发现，《街霸5》中的肌肉线条跟真实的肌肉线条相比，其实是有点不符的。

针对这点龟井解释，《街霸5》初期其实尝试过以贴近真实比例的风格来制作，但如此一来角色的攻击动作会变得难以认知，游玩起来会相当的痛苦。因此，制作团队后来才将风格更改为现在的方针。「虽然当时还有觉得有点不确定」龟井表示：「但是将模型以不正确的方式制作才是正确的做法」。

1-2 角色身高
接着我们提到游戏中的角色身高，在《街霸》中的角色都有着官方设定的身高数据，但若是回顾一下 2D 时代的《街霸》，原本身高 182 公分的警察在游戏中看起来却像是身高超过 200 公分的巨人。这是为什么呢？


这是因为《街霸》的制作中，所有美术细节都会在游戏的战斗画面中，按照应有的感觉去做调整，角色的身高也不例外。所以我们可以看到其实《街霸》中的原始角色模型身高都是一样的，并不会依照官方的身高设定来制作模型。
而是后期根据战斗画面下应有的比例再去做调整（基本上是以隆为基准去做比对）。

1.3 角色动画
角色的动作设计同样也必须让玩家一目了然，《街霸5》中的动作设计主要考虑以下几个要素：格斗技的种类、攻击的性能，以及动作的重心与节奏。

此外，《街霸五》同样针对摄影机下的角色动作做了一些技巧。
以桑吉尔夫的走路动作为例，如图，相机都是在左下角位置，右边是一般的走路动作，左边是针对格斗游戏调整过后的走路动作，可以感受到调整过后的角色动作，可以看到左边朝摄像机方向旋转了身体。这样的好处是能看到角色背对相机一侧的更多动作细节。


这个效果的手法很简单，其实只是将所有角色的身体角度往摄影机的方向转个 5 度左右就可以了。龟井表示这样的调整若是在一般 360 度的 3D 游戏世界中可能马上就会看到角色动作的不自然感，但由于《街霸5》本质上还是属于 2D 平面类的格斗游戏，摄影机角度是有所限制的，因此这样的调整不但不会不自然，反而能让角色的动作更加符合格斗游戏的需求。


这张更容易看懂龟井强调，不断的从战斗画面来审视角色的动作是非常重要的。
1-4 必杀技特写
提到关于超必杀技的画面设计，龟井认为最重要的是「让招式画面能够用简单的语言来表达」这件事情。像是 Mika 的「臀部夹击」或是隆的「升龙拳」等招式都是以简单的动作让玩家感觉印象深刻的演出。


遇事不决出升龙那么，能不能用一些简单的短语来描述这些必杀技呢？
在20年前的《街霸2》当中，听到「Dog Pie」就知道是本田的水平头突，听到「Yoga」就知道会喷火，像这类易于用文字表达的招式玩家就可以和他人分享心情。
1-5 背景
回顾一下 2D 时代《街霸ZERO》的背景设计，是透过色调的控制来区别角色以及背景。
如图，角色的颜色都比较饱和，场景的颜色就比较暗淡。



《街霸5》则是利用 Unreal 引擎的 Multi Color Grading（MCG，复数颜色分级） 功能来调整背景的色阶，透过 MCG 的功能甚至能将场景按照前后左右切割成数个不同的区块来做个别的调整。


这是开了MCG效果的


这是没开MCG效果的


可以分区域调色
1-6 相机视野
由于《街霸5》是用 3D 的方式做的，因此当角色位于画面的左右两端时，会因为摄影机的观察角度问题造成角色的身形看起来有点变化，如此一来可能会造成游戏过程中的不适应感。


这边制作团队是利用 Fix Projection（修正投影） 的功能来修正投影内容。原理是通过Shader来让角色进行水平方向上的变形。



Fix Projection调为1的时候，会让处于边缘的角色和处于屏幕中间的角色看上去一样但是如果让处于边缘的角色和处于屏幕中间的角色看上去一样的话，角色就会失去立体感。
因此制作团队选择将 Fix Projection 的数值设定在 0.5 来取得平衡。
2. 独特的美术风格 接下来着龟井开始介绍《街霸5》在美术风格上都做了什么努力。
《街霸5》的美术风格在早期就定位成非真实感的画面风格（Non-Photorealistic Rendering，NPR）。


会这样决定不单是因为要让玩家容易解读画面信息，另外一个理由是，龟井对这次《街霸5》的作品有着另一个目标，那就是希望能够让历代《街霸》的形象插画实际在游戏中具现化。


为了要达成这个目标，最终《街霸5》的画面决定以油彩笔触加上丰富的光线控制来呈现由于《街霸5》是1980x1080 的分辨率，跟过去的作品相比可以提供更多的细节在画面表现上。


为了实现这个效果，龟井从下面三个方向进行了讲解：
2-1 笔触的表现
在前作《街霸4》当中，同样也是以笔绘风格来呈现角色的贴图，当时的做法是法线贴图透过 photoshop 的滤镜效果来做出这种笔触的贴图感。但由于《街霸5》的贴图分辨率大幅提升的关系，用原本的做法做出来的效果会变得有些难以辨识，于是制作团队改用 photoshop 的 插件「Snap Art」来解决这个问题。



Snap Art 可以很轻易的将图片转变为油彩风格，但是在这边制作团队遇到了另一个问题，那就是以切线空间(Tangent Space)为基准的贴图基本上都会是以蓝紫色为主，在这样的情况下使用 Snap Art 的效果将会遇到限制。
于是制作团队试着将法线贴图先从切线空间转为色彩相对丰富一点的模型空间(Object Space)格式，接着透过 Snap Art 添加上笔触特效之后，再将贴图转回切线空间格式套用到游戏中，这个方式后来运作的很成功。


解决了油彩笔触贴图的问题之后，为了要让整体的风格更加贴近形象插画的气氛，制作团队在这边还下了另一个功夫。
首先我们看到这张插画，


一般观众在欣赏作品的时候，对于画面的注视程度大约是脸＞身体＞衣服＞小东西，所以画师在画插画的时候通常也会按此要领，在描绘脸部会最细腻、带有最多细节，在描绘身体跟衣服则是使用较粗的笔触来带过。


因此制作团队在使用 Snap Art 添加笔触风格的时候也会依照部位来调整贴图笔触的疏密感，让整体贴图风格更贴近历代的插画风。
2-2 轮廓线的强化
轮廓线也是 NPR 风格中很重要的一个元素，经过多方思考之后，最后决定用的方法是在画面中 RGB 色差较大的地方加入轮廓线，这个方法主要是透过 Unreal 引擎的 post process effects 功能来实现。


附带一提的是，这个做法不只会将角色模型的轮廓线加深，其他地方例如角色阴影或是背景上色差较大的部分也同样会获得边缘加强的效果。这个特性对于目标是细腻插画风格的制作团队来说可以说是非常合适。




2-3 颜色以及饱和度控制
要实现插画风格的最后一点，颜色以及饱和度控制，其实也就是要调整游戏中所有的光线表现。《街霸5》的光线包括原本的环境光以及间接光。间接光可以表现出丰富的色彩。


间接光使用了两种方法进行调整。一个是使用UE4的 Indirect Lighting Cache 功能来烘焙并缓存场景上的所有间接光信息，另一个是使用 Geomerics公司的 Enlighten 来进行游戏内的光照的实时渲染，以提供更细腻的演出效果。

3. 总结最后龟井对本次的演说做出了总结，对于格斗游戏的美术来说，将战斗情报瞬间正确地回馈给玩家是非常重要的一件事情。龟井再次强调：「在满足能够瞬间传达信息的前提下，再考虑游戏画面的独特美术表现，这就是格斗游戏的艺术」。

苍尓

神作就是神作         

菜鸟学院灬NTS

街霸5