CEDEC2016 街头霸王5（Street Fighter V ）的艺术指导
这次演讲的技术内容比较少，多边形数量，骨骼数，纹理大小等具体的数据配置不会提到。
这次是以制作StreetFighter V 中，如何考虑来制作视觉，以及用什么样的哲学来判断视觉的方向性为中心话题
演讲者的自我介绍
StreetFighter V的启动时间是在Street Fighter IV的爆发性盛况的“e-Sports”上，很久以前就是的格斗游戏的盛会了（还有Evolution Championship Series等），随着现在动画分享网站的普及，也有可能把大会调整为直接实时直播的形式。
评论可以实时阅览，全世界都可以共享胜败和感动，格斗游戏也得到了很大的人气提升，游戏开发者，玩家，还有观战等等，在前作街霸4的基础上做了更新，街霸5最初策划考虑【要让游戏更加有人气，要如何去做】来开始游戏制作。
很多有名选手的参加也是造成“e-Sports”很热烈的元素，【战斗容易看清】【对战内容很易懂】也是重要的元素，一看就可以沉迷其中是最理想的。为了实现这个目标，在制作街霸5时，尽量把公司以前积累的【格斗游戏制作的经验技术】加入。今天这里就是要介绍这些相关的经验技术。
这次的议程分为三个部分，第一个是前面提到的【容易看清楚】【易懂】的考虑，美术方向的话题，用了什么方法来让游戏易玩，战斗容易看清楚的。第二个是表现出个性的绘制方法，虽然容易看清楚很重要，但有个性的图形本身也很重要，所以要有一眼就能看出是【StreetFighter V】的方法
最后是总结。
首先，是游戏画面容易看清和理解的相关话题
StreetFighter的角色全体都是有肌肉感的，身体的轮廓也多是清晰分明的，有听过【为什么StreetFighter的角色都是肌肉型的】，这因为如果格斗游戏外观看起来强，被打着才会看起来疼。
还有就是面部表情的夸张，大笑以及被攻击时看起来特别痛的脸。
像下图画，大家在一瞬间就可以理解当时的状况，【纳什以很强的气势在打隆 】，不会认为是有其他的状况的。
所谓的格斗游戏的艺术，为玩家可以瞬间的掌握游戏的状况的最重要的信息，玩家看到游戏中产生的状况，瞬间判断接下来的行动，格斗游戏中这种判断是以非常高速来运作的。在60分之一1秒的每帧1帧单位里，战斗状况都在改变的，为此比起自然的艺术，要作出更夸张的表现，一瞬间要能把信息传递给玩家。
Character（角色）有性格，性质，记号，符号的意思。
格斗游戏的角色，是作为给予游戏玩家快速，瞬间判断游戏状况的记号来说，非常重要的要素
把游戏内产生的状况用影像的方式来表现，并把它反馈给玩家。表现出【现在游戏里中是这样的状况】。
用户看到后，在脑海里判断
再把判断结果用控制器输入，并把解决反应到游戏中，游戏游戏就是这样以数帧为单位的来进行这样的循环。
为了能让这种在数帧中攻防的格斗游戏的美术的成立，【容易理解】【容易传达】是非常重要的。
制作格斗游戏的美术对于玩家的反馈，要尽最大限度的来注意。只能用美术在一瞬间向玩家反馈游戏的状况。其他以外的要素要快速的反馈给玩家是很难的。在Street Fighter V 中是用了什么样的美术手法传递给用户的，接下来具体的看下吧。
首先是建模（Modeling）
一开始讲到过，StreetFighter V 的角色是肌肉感的，轮廓也很清晰鲜明，因为这样更【容易看清】，【容易看懂】。在战斗视点上，角色在做什么，处于什么姿势，都可以客观的反馈。基准是全部在战斗中相机中可见的部分，轮廓可以【容易理解】【形状很好】的来判断的。在战斗的视点时，要考虑的是帅气外观的【肉体轮廓】。
下图是像素画世代的角色轮廓，画面的绘制上，相当强调角色的轮廓，战斗中的相机角度和角色是分离的，但是肌肉感的轮廓可以清楚瞬间的传达。
轮廓的细节可以看下【阴（右边角色）】的手腕。
相当强调轮廓，手腕细的部分是6个像素
拳头的大小差4个像素
前臂的肌肉提高2个像素，做了相当的变型，这里强调了肉体。
拉动相机时，手腕是以什么风格来伸展的？效果很好么，轮廓可以很好的传递。这个是像素画变型的经验技术，也有解析过去像素画的方式，Capcom是还有秘传和先人们残留下来的技术。
其中一个是「あやしい美術解剖図」，听前辈说这个资料是20年前，在Street Fighter ZERO和恶魔战士制作时整理的，从哪个时期就继承下来的资料
封面名字的部分打上了马赛克，安田朗监修，当时的图是汇集多个人制作的。
这个资料的内容，主要是基于Loomis和J. Shephard的资料的美术书。资料的要点是肉体信息制作成像素画时的窍门，收罗了类似【这里的肌肉变型，保留下来比较帅气】【这里要省略也不会有影响，反而会变得流畅】的信息。因为是20多年前的资料了，图画有些老旧，但是身体的重要要信息，以及不重要的信息都总结了。在现在可以说是非常珍贵的资料。
下面介绍一个【手臂的轮廓】的例子，手臂从身体正面看时，上臂细，下臂粗。
相反横向看时，上臂粗，前臂细，这里强调的是抬臂时如后扭曲手臂。一眼就能看出是【上勾拳】还是【直拳】。因为容易理解的信息，就可以反馈给玩家了。就是类似这样关于全身的资料。
和实际的人体相比较，这种方式瞬间就可以把握轮廓，现实中人的3D扫描数据拿到游戏里用也是可以的，但是以【可以把当时的游戏状况在一瞬间反馈给玩家】为目的，可以看出对肉体做变型是更有效的。
所以Street fighter的角色为了可以在瞬间的反馈，必须要考虑使用变型
在制作原型时，是游戏业界流行照片真实的士气，也用这种方式试做了角色，但毁誉参半。因为这种模型的轮廓，在游戏时攻击很难看清楚，所以在早期阶段就放弃了。为了容易玩考虑，还是不采用这种方式的轮廓的好。
模型的身高。
轮廓在战斗相机中的外观也很重要，做个与角色的身高和大小也有挂系。例如隆的身高是175cm，维加是182cm，相差7cm。
通常角色身高的决定是在dcc工具里用grid的单位来测量制作的，但在StreetFighter V 里身高并不是这样决定的。
实际大小是在战斗中出场时的印象来决定的，看画面里维加要比隆大的感觉，但实际画面中维加的模型是怎么样呢？
在DDC工具上测量的话，维加和隆是相同大小的，身高的基准，是在角色摆出架势时【以隆为基准的相对的外观】来决定的。制作架势后，再改变模型的大小，并不要求真实，而是以角色在游戏中的看到时的印象优先来决定角色的大小。
以前的像素画，如果让维加站直的话。
渲染绘制的话就超过200cm了，通过战斗中的印象来决定角色的身高，可以说是以往的格斗游戏中继承而来的方法。
接下来是动画部分
姿势和动作对于玩家反馈来说也是非常重要的要素，而且运动的轮廓对于格斗游戏也也是要加入的信息。
一眼就能把格斗技看明白的动作
下面的画面里是中段的脚刀踢，了解空手道的人，看这个角色就知道是空手道的人物了
接下来是重心和节奏，要协调整合性，让感觉变好，动作的品质部分，也要有使用起来帅气感觉。
最后是游戏设计师要求的性能，这个画面的技能表现游戏设计师的要求【如果看到扫堂腿过来，猜测到对手的扫堂腿，就可以对这个攻击做反击】
对这个要求，就要以【空手道家是如何做】来考虑生成动作。。还有这个动作是在数帧里产生打击判定的，这时，为了可以让用户可以在一瞬间识别，身体的姿势和轮廓是非常重要的，为了让轮廓夸张就要施加一些方法。
这个是Street Fighter IV 的桑吉尔夫，在战斗相机的接近视角来看的慢吞吞的走步。但是从正面看的话，身体完全是侧着的，这个姿势在【相机360度旋转的游戏】里是禁止的。但是在格斗游戏里就是这确的，这种倾斜身体可以让轮廓更加容易辨别。
动画预览1
准备的正面正确的动作，左边是原始的动画，右边是，正面看也正确的动画，虽然从证明看姿势是正确了。
但侧面看时，腰的旋转也较小了，显示不出轮廓。很难看清身体的信息。制作动作时，因为可以一边在DCC工具里360度的确认来制作，这样就简单的制作了。
腰部和实体是按战斗相机方向转动5度。
维加的footwork的运动，从战斗相机来看，是瞪着对手，有着藐视感的姿势。
从正面看不到腰和脚，腰在正侧面方向。
桑吉尔夫的技能，看起来是把对手吸进来的样子
在战斗相机的方向上有着相当大的倾斜，这样，在战斗相机上看时，【旋转】的信息和轮廓很容易传达
接下来是七川美华的Dropkick
在格斗游戏中从正面看是没问题的，但战斗中9成以上都是战斗相机的效果，要以优先加入精确信息为重。
动画是以战斗相机中的印象优先，在战斗相机里观看时容易理解要比正确重要。
然后是关于演出技和必杀技
首先是动画
动画预览2
现在看到的技能，是如何传达给其他人的呢？
中东的角色rashid，有着阿拉丁，神灯等各种特征点。
巴西出身的角色，电气缠绕，在场景中疾驰的技能
七川美华的技能
最后是成田 幸雄那样的颜艺，顎破壊昇竜拳
【一句话就可以表现出的动作】是很重要的，这个可以说是StreetFighter的传统要素，
还有就是要有意图的加入方便 向其他人传达的语言化的要素和动作。容易语言化的要素，方便传达，听的人也有兴趣。观看比武大会时也可以传递这种感动【街霸5新角色和各个角色技能】也可以方便传递。听的人也会有兴趣。
背景和角色一样，也施加容易看到和视认性的方法，这个完全参考的是像素画时的作品
最易懂的是Street FighterZERO时代的背景，以前2D没有深度的概念，深度的表现是用【颜色管理】，下面的画面里，角色是非常鲜艳的颜色，而背景的色调降低，体现出场景的气氛感。
上面是角色像素画的直方图，下面的背景像素画的直方图,从最暗的颜色到明亮的颜色都使用，相反的背景的颜色范围比较狭小
背景没有使用【0, 0,0 的黑色】和【255, 255, 255的白色】，在像素画时代，用这种严格的规则化，来限制颜色，或者背景和角色。
通过这个方法，背景和角色可以很好的分别，【深度】也可以表现出来，大幅提高了角色的视认性。另外，因为角色自身周围的彩度低，有种角色比实际使用颜色更加鲜艳的印象的错觉。这种想法也加入到StreetFighter V里
本作中，为了调整角色和背景的直方图，把UnrealEngine 4 的Color Grading做了改良使用，团队把它称作【Multi ColorGrading】，下图就是使用Multi Color Grading后的效果。
这个就是Multi Color Grading，同时使用多个Look Up Table 的扩展功能
场景的前后左右，分别使用了4个不同的Look Up Table ，画面眼前的角色的彩度和颜色范围提高，相反深处的场景，降低彩度，减小颜色范围。还有左右环境是对应的，从左边的屋内向右走，也可以变成屋外的环境
下图是极端的颜色的感觉，近处的角色和后面背景的使用了不同的LookUp Table，近处是红色，远处是绿色的，而混合的距离是通过参数调整的。
通过这种方法，实现了像素画时代的背景和角色的颜色区分
接下来，是摄像机的视角问题
因为3D的摄像机的特性，在边缘的形状会变型的绘制。这个是没办法的事，但在边缘看不清楚的话，就会成为格斗游戏产生障碍的要素
普通的3D相机，在画面的边缘和中央，角色的变型是不同的。考虑到游戏易玩性，需要对产生迷惑的要素做修正，使用了【FixProjection】的shader。
FixProjection 是角色横方向没有视角变型的vertexshader，并不是降低相机模拟的视角，而是把角色的vertex，做模拟的视角反方向的修正。下面的画像是没有Fix Projection 的状态。
修正值最大的状态，和前面的图比较没有横向的视角的变化，接近在DCC工具中正交投影的状态。这样就把角色的变型消除了，但是完全的去掉视角，角色也会失去立体感。
比较好的数值是使用【0.5】混合，这样保证立体感的同时，打斗也方便看清楚。
ＦixProjection的目标，背景是强调视角重视魄力，角色是弱化视角重视战斗。关于容易看清，方便理解的艺术指导相关话题到这里就结束了。
然后是第二章，渲染的技术，发挥个性的艺术指导的话题，StreetFighter V 的渲染的方向性。
渲染的目标决定为自然的NPR表现，下图是当时绘制的概念设计图
为什么是NPR，有两个理由，1个是从第一代StreetFighter开始，就是以插图来作为卖点的游戏，StreetFighter被认为是【绘制印象也很强的游戏】，第2个原因是，第一章提到的轮廓和动画的表形，用照片真实来制作画面的不会很漂亮，真实的角色产生夸张面部时会有不协调感。
下图是按照概念设计制作的画面，因为是用[NPR]来制作画面，画面的分辨率提高了，也必须要增加信息量。这种通过丰富的光照来增加，保证了【绘制的风格】和【存在感】。这里渲染的关键在于【油彩】和【浓厚的光照】。
最初制作视觉时，为了再现NPR的表现，使用UE4的材质来进行摸索。
把光照向量和多边形法线，通过DotProduct在着色时加入一些改变，就是一般的NPR的方法
但UE4的渲染管线是Deferred rendering的，无法在着色时使用光源向量，也尝试过通过使用UE4的Blueprint ，计算出模拟的光照向量，大师在本世代主机上，可以大量放置光源，这种基于不同光源向量的着色，很容易看出是虚假的绘制。所以最后并没有使用这种方法。
最后，并没有材质的着色网络使用太难的方法，实际的UnrealEngine 4的着色网络就是下图这样乱糟糟的。
最终NPR的实现
第一步，是笔触的再现
一开始尝试用了用材质来再现笔触，但前面也提到过用材质很难实现，所以这次采取了其他的方法 。
使用法线贴图来加入笔触的方法，至于为什么要使用法线贴图来追加笔触，如果用光源生成笔触的话，光照不到的地方的阴影的部分，很难加入笔触信息。
这个方法在Street Fighter IV 也有使用，4里是对于Normal Map 的纹理，使用Photoshop 做褶皱的滤镜。
只是这个方法也有它的问题，虽然在前作StreetFighter IV 里也使用了这种方法，但在本作StreetFighter V 中，因为法线贴图的分辨率和大小提升了，这种方法不能再适用了。低分辨率的图像，因为凹凸信息挤压一起，用2D滤镜很容易处理，但是在分辨率提升的本世代主机上，凹凸信息和信息距离展开了，用滤镜就很难再作出笔触。那么是怎么解决的呢。
把切线空间的的法线贴图（紫色）变化成物体对象空间的法线。切线空间都是紫色没有颜色差，而物体对象空间有很多的颜色，方便滤镜处理
首先是按照通常的顺序来制作原始的法线帖图，这时的法线贴图是切线空间的，然后把切线空间的法线变换到对象空间，对对象空间的法线贴图施加滤镜处理，处理结束后吗，再次从对象空间变化到切线空间，最后在UE4中确认。
然后，用以前Photoshop的标准滤镜，进行笔触的再现，纹理分辨率提高了，可以表现更加细节的笔触。油彩也好，水彩也好，再现了各种笔触
利用【Snap Art】这个Photoshop的第三方插件。不光是表现标准的滤镜，还有丰富的绘画笔触，调整的项目很多，有着很高自由度的表现。
还有笔触的画像合成，从【粗糙】到【细致】的改变滤镜。
最后，根据身体，服装，面部，用合适的粗细来合成法线贴图。
例如最细致的笔触是【面部】
稍微细致一些的是【身体】
【衣服】稍微简单粗暴一些
最粗糙的【鞋子和小部件】，这样可以有效的合成法线贴图，合成的规则重视【看起来像手绘】的效果。
绘制时的信息细致和粗糙的手法
角色的面部，用细致的笔触高密度的绘制，离面部越远，用越粗糙的笔触。这样，密度最高的面部，自然会集中关注，用这样的考虑来合成法线贴图。
下面的画像是没有笔触的状态，细节少，形状单调。
开打了法线的笔触，再现了画笔描绘的效果。
边缘的强调是通过全屏后处理特效来实现的
这个后处理把画面内颜色差别大的地方用指定颜色替换。
下图是真机中没有边缘渲染的画像示例。
下图是真机中没有边缘渲染的画像示例。
其中一个乘以-1，对颜色做反转，因为都是负值，画面是全黑的。
把这两张图相加运算，对像素移动的部分取差分，相加的结果就是图中下面显示的画像，除了左右移动的图形外，还准备了上下移动的来相加
左右位移相加的结果和上下位移相机的结果再一次相机，就得到了清晰的边缘
把这两张图相加运算，对像素移动的部分取差分，相加的结果就是图中下面显示的画像，除了左右移动的图形外，还准备了上下移动的来相加
继续调整边缘的感觉，下图是最终的画面
边缘滤镜也有角色轮廓线的功能，还有就是法线的笔触滤镜也是，在边缘上加入了信息。
关闭滤镜和打开滤镜的对比
用过法线来表现，进一步强调笔触的技术。因为也有角色轮廓线的功能，对提高角色的视认性也有帮助。
然后是间接光照部分
间接光照对绘制的表现也是非常的重要，在通常的颜色上使用间接光来制作加强和夸张，表现出颜色丰富的绘制。
在这个领域里有意图的加入美术师想要的颜色。
通过间接光的操作，有意图的加入颜色，间接光的表现是在光照的最后进行的，通过基础光照表现出立体感后，再给予阴影和反射变化的颜色
在下图可以更容易看出间接光的效果
间接光使用了两种技术，一个是UE4的标准功能，Indirect Light Cache ，还有就是光照的中间件Enlighten，通过这两种间接光技术，在需要的角色里有意图的加入阴影颜色。在本作中的渲染中，光照是非常重要的要素，不是【正确】和【真实】，而是要以【绘制帅气】【颜色看起来鲜明】为目标来配置光源。
最后是本次演讲的总结
格斗游戏的美术，可以把游戏的状况在【一瞬间，快速】的反馈给玩家，是非常重要的要素。首先游戏状况要容易看清，方便传达。格斗游戏的要素中，能【瞬间把游戏内状况反馈的手段】除了美术之外就没有了。美术的制作者，要特别对此事有意图的来制作资源。
这次关于格斗游戏美术的相关话题也就到这里了
