[游戏开发][解读] GuiltyGearXrd‘s Art Style : The X Factor Between 2D and 3D - GGX 3D 渲染 2D 风格

这篇我们将 2015 GDC中的 《罪恶装备》介绍的视频内容都笔录一下

目的

对视频笔录的目的：便于后续重新回顾、搜索、确定方案时，可以快速的查看到想要的内容，而不用重新查看一遍视频的内容

注意

本篇因为笔录视频内容，会包含 巨量 的图片，所以如果在浏览本篇文章之前，您的浏览终端，如果是流量有限的话，就需要注意一下

What I’ll Cover today

涉及的内容:

• Quick introduction - 简述
• Why this Style? - 为何需要这种风格
• The Develoment - 开发内容
• How we did it - 如果实现
• Final Thoughts - 最后一些想法
• Questions - 提问环节

这次分享主要是 3D角色和动画方面的内容

Quick introduction

My history with the industry - 本村的自我介绍

视频演讲者是：
日本名字：本村纯也（本村.克里斯托弗.纯也）
英文名字：Junya C Motomura
当时所就职公司：Arc System Works

My history with the industry - 个人一些信息

• 13 years in company - 在公司(Arc System Works) 工作了 13 年
• Mainly as a Character Modeler - 主要是角色建模
• Many other positions - 还有其他很多的兼职
• Current position: Technical Artist - 现在主要位置：TA（技术美术）

Roles I played in GGXRD - 在 GGXRD 项目中主要负责

• Lead Character modeler - 指导角色建模
• Shader Development - Shader 开发
• Rigging - 模型骨架
• And other bits and pieces - 打杂

本村主要是作为3D美术，不过也做过游戏策划、游戏制作人、剧本编写、本地化、声优

《罪恶装备X》之前一直都是 2D 游戏
而现在选择用 3D 取代 2D 贴图的制作方法，同时有保留2D（手绘）风格的魅力
(这里是视频5:00开始演示游戏部分画面，实现 3D 渲染 2D 风格的视频内容）
在《罪恶装备Xrd》里，主要目标是保持原风格不变的情况下，表现新的 3D 形式
在高分辨率下能有更好的视觉效果
虽然使用了 3D 资源，但是游戏还是在 2D 层面上表现得很自然
你可能发现了额美术风格是完全基于日漫风格，这也是传统的 2D 画面的回归

The Art Style of GuiltyGear Xrd - GGX 的美术风格

GGX 的美术风格

• 2D -> 3D - 将以往的 2D 转为 3D 的方式来制作
• 并且保持看起来想 2D 的风格
• 可以摆脱纹理 与 分辨率 的大小问题
  • PS4 上能达到 1080P，PS3 也有 720P，以往的 2D Fighting Game 产品只有 480P
  • 因为基本上纹理都使用的是纯色块布局没有渐变过渡
  • 而且本村发明的本村线的方式可以比较好的 AA（抗锯齿）
    • 将纹理需要的 inner line 纹理都绘制到 横平竖直 的 AA（Axis Align 轴对齐，就是 X,Y 轴对齐的线）
    • 然后将 UV 需要边缘采样到这些 inner line 的纹理的，只要调整 UV 即可，就是将多边形的边缘的 UV 都放到 映射到 横平竖直 的纹理内容上对应

What we achieved with it - 我们实现了什么？

What we achieved with it - 我们实现（达成）了什么？

• 战斗中更加灵活、动态的镜头，让动作变的更有张力（大招特写什么的）
• 3D 过场动画
• 总之可以有更多的表述方式

Why this Style?

为何需要这种风格？

为何不继续想《BlazBlue》使用 2D 贴图的方式？因为这种方式没有更多进一步的得到改善产品（也就是目前已到达了这种方式的天花板了，很难有所突破），所以 《罪恶装备X》才尝试着在新的方向去创新

也考虑过很多其他方法，比如 矢量图形、高精度贴图以及另外的一些

So Why Cel-shaded 3D? - 那么，为何用 卡通渲染 3D？

3D 卡通着色的发现：

• 许多可探索的空间
  • 自由的镜头
  • 过程动画
• 可以有更好的方向的机会
  • 还没有很多人去做它
  • 尝试去提升它

因为有探索空间，所以如果抓住机会，有可能就在这方面，产品可以制作到 鹤立鸡群

The Development

What it took to make 3D look 2D - 是什么东西让 3D 看起来像 2D

What it took to make 3D look 2D - 是什么东西让 3D 看起来像 2D

• Extensive study - 昂贵的学习
  • 2D art and 3D Technology - 2D 艺术表现 和 3D 技术
• Trial and Error - 试错
  • Figure out what’s lacking - 找出缺失什么
  • Find new solutions - 找出新的解决方案
  • Break conventions - 打破常规
• Build a new workflow - 构建新的工作流
  • Not just a shader, but a whole workflow - 不单单是 shader 的实现就完事，而是整个工作流（也就是从美术制作工作上(DDC)上，到 Runtime 的 shader，等一些列的资源产出，和运行时的工作流程）

让3D呈现比2D化效果将是一项艰巨的挑战
做了很多关于2D艺术表现和3D技术的研究
因为只有同时掌握两边的知识才能应对当前的难题
不了解的2D转3D的知识点(因为他们团队之前只有2D开发技术，没有3D开发技术)，一个列举出来，并逐一解决
打破了很多常规，因为不符合艺术风格
因为才重新的摸索了一套新的工作流

Great Tools we used - 我们使用了的一些很好的工具

Great Tools we used - 我们使用了的一些很好的工具

Unreal engine 3 - UE3

• Need for a multi platform engine - 需要一个可以支持多平台的引擎
• Fixed deadline and limited human resource - 固定的开发期限和有限的人力资源
• Ease of use for artists - 对美术方面足够友好
• Stable, at the end of its lifecycle - 稳定
• Deeply customizable with full source code - 足够深入开发的代码开源程度

Autodesk Softimage - Autodesk 旗下的一个 DDC Softimage

• Highly optimized for game dev - 极大优化了游戏开发
• Great modeling and animation tools - 对 建模 和 动画 很好的工具
• Built in RT shader editor - 内置 RT shader 编辑器
• Unmatched flexibility letting us continually improve out assets throughout the development - 无与伦比的灵活性让我们在整个开发过程中不断的提升我们导出的资源

考虑过很多的引擎，最终选择UE3，理由：

• 扩平台开发、发布的引擎
• 因为deadline 定死，所以很多轮子没有时间成本去制造
• 有现成的美术团队，而UE3对美术很友好（但是UE4还在开发中）
• UE引擎开发了很多年足够透明，足够稳定
• 在开放所有源码的支持下，可以足够自由的做想要的调整

Autodesk Softimage

• 在 建模 和 动画 足够强大，可以更专注与开发
• 内置 shader 编辑器能让美术在美术资源制作阶段可以实时看看角色的渲染效果

无损（高保真）的工作流让我们能持续的提升资源品质，从研发初始到研发结束

但是，Softimage，这个软件我去查看了一下，挂掉了，参考下面的文章有将到：

• Softimage final release announcement - 这还是 autodesk 官方声明 softimage 最后的一个版本发布了
• The long and lonely death of Softimage

也就是 《罪恶装备X》这个游戏开发完后发布的 2015 GDC 的前后，Softimage 这个 DDC 就官方宣布停止开发了

这个 DDC 曾经多风光：Softimage - wikipedia 上的

该系统在全球范围内已经超过12,000多个用户，它们大多是世界上极富灵感和创造力的艺术家。其中包括譬如工业光魔、世嘉、任天堂、索尼等大客户。由该技术产生的著名电影和游戏包括《侏罗纪公园》、《泰坦尼克号》、《黑客帝国》、《黑衣战警》、《星球大战》、《幽灵的威胁》、《克隆人进攻》、《角斗士》《星河舰队》[1]等等。游戏如《超级马里奥64》、《铁拳》、《Virtua Fighter》、《Wave Race》、《NBA Live》等等。其卓越的动画功能是一大亮点，被认为是第三代动画系统的标准

HOW we dit it

How we dit it - 我们如何实现的
Character Look Dev - 角色的外观(渲染)开发

Giving Characters the Right Look - 让角色看起来正常渲染

Make them look the way they should

• Must represent the design and look even better - 必须能和原画设计上差不多，甚至能看起来更好

Kill every thing 3D - 干掉所有看着像3D的特性内容

• Search and Destroy everything “3D-ish” - 找出 和 干掉 所有像 3D 部分的特性

Let the Artist decide. Not the math - 让艺术家来决定，而不是 技术上的 数学原理

• Everything must be intentional (not a result, but an intention) - 看起来像就够了(不必在乎原理导致的结果，可以故意使用各种技巧来实现)

Instant feedback - 及时反馈（所见即所得）

• Created under shader preview with matching result to the game - 在资源制作预览阶段，创建和游戏运行时匹配效果的 shader

美术DDC所见易所的 shader 开发很重要，这样，美术就可以很方便、快速的在 DDC 中调整
看起来像 2D 化的效果是很主观的，如果按照 shader 正常的 数学运行得出的光照的话，还不能达到想要的 2D 化效果

Live Demo : Shader preview - 现场演示 : 在 Autodesk Softimage DDC 上的 Shader 的预览效果，在视频的 12:00 分开始有视频演示，具体可以查看 Reference 中的在线视频

Character Meshed - 角色网格

• High poly count - 高多边形的数值情况

  • Around 40000 triangles - 大概在 4W 三角形
  • Ready for extra close-ups - 为了在写真镜头需要，所以模型精度需要比较高

• Less texture dependent - 更少的纹理依赖

  • No normal maps - 无需法线贴图
  • Rather store data in Vertex property (Linear interpolation was key) - 将数据存于 顶点 属性中 (然后使用线性插值是关键所在)

模型精度要求比较高，因为需求有 角色模型 会比较靠近镜头的情况
部分模型细节直接建模来表达的
这让《罪恶装备Xrd》摆脱了纹理的依赖，而变体特别
举个例子，不想普通的3D游戏，我们的角色没有使用法线贴图
相应的，使用顶点属性，如：顶点法线、顶点色和UV来保存数据
这么做的原因就是极近距离的特写镜头

采用纹理贴图的话，精度就很依赖于贴图的分辨率
在极近距离的特写镜头下，用纹理贴图会呈现不同程度的锯齿
为了改善，就必须使用极高精度的纹理

另一方面，顶点属性可以很平滑的在顶点间线性插值
这样，画面的精度直接取决于屏幕的分辨率

Getting the Shading right - 实现正常的着色效果

• Cel-shading is hard to get right. - 卡通着色是很难调整到想要的效果
• Easily ruined by the smallest inconsistency. - 容易被一些细节破坏效果
• Hard to convince 2D with out perfect control - 没有完美的资源到处，难以有令人说服的 2D 效果

在 赛璐璐风 的渲染中，某个点要么是亮的要么是暗的
没有中间过渡色，这也是为什么赛璐璐风很难被正确渲染（但是为何我觉得这样才容易渲染，就是是否迎光面，背光面，一个 dot(N,L) > 0 ? 迎光面" : "背光面" 就可以了）

再绘话中，美术能自主第考虑某个区域是亮的还是暗的
但在 shader 中，这都是仅仅取决于数学计算
通过阈值的取值，来决定某个点到底是暗的，还是亮的（就是上面的方式调整 dot 的阈值即可：dot(N,L) > 阈值 ? 迎光面" : "背光面"）
在2D风格中，任何细微的噪点都会极大地分散玩家的注意力
某些面的法线细微有点差异都会造成极大地差异
一个令人信服2D效果，必须通过 shader 的精准控制

A Breakdown of Cel-Shading - 卡通着色的分解

• Generic step(Threshold, dot(Light, Normal)) can decide if the surface is lit or not - 这个就是 和我们上面的意思是一样的，dot(N,L) > 阈值 ? 迎光面" : "背光面"，对应 dot(Normal,Light) > Threshold ? 迎光面" : "背光面"
• Simply put, if the surface Normal is facing the Light source, it’s lit. If it’s facing away more than $90^o$ (the Threshold), it’s not - 简单套用上面公式，如果 表面法线朝向光源，那么就是 迎光面，如果大于 90度（阈值），那么就是 在 背光面

Only Three components matter - 仅有三个有用的分量

• Threshold - 阈值
• Light vector - 光源向量
• Normal vector - 法线向量

Control then ALL!! - 所有的效果都是有这三者控制即可!!

主要的计算部分是 step 函数
用来决定这个像素是亮的还是暗的
而这个阈值是可以修改的

Controlling the Threshold - 控制阈值

• A channel of Vertex Color used as a offset to the Threshold. - Vertex Color 顶点颜色的某个通道用于对 Threshold 阈值的偏移
• Acts as the occlusion of the vertex. - 作为顶点的 AO
• Occluded vertices are more easily shaded than non-occluded ones - 顶点的遮挡更便于没有遮挡的着色调整
• Every vertex occlusion manually set so the artist can control results. - 每个顶点的 AO 都可以让艺术家（美术同学）去控制
• Texture was also used, but VC served better in many cases. - 纹理也是需要使用的，但是 Vertex Color(VC) 可以保留用于更多的方案
  • Cleaner results(interpolation) - 更平滑的结果（插值）
  • Ease to adjust - 便于调整

使用了顶点色的一个通道来偏移阈值的取值
这让美术能容易地操控某块区域变得更暗
这可以用来制作阴影遮蔽（这里应该叫 AO ==> Ambient Occlusion ==> 环境光遮蔽 会更适合）
区域被遮蔽的越多，也就越不容易被照亮
美术要做的就是设置每块区域的阈值
从而决定这块区域该怎么被渲染
甚至美术可能会设置0这样的极端数字
来强制某块区域被着色
也用纹理数据来做同样的事情
但顶点色的方式在很多方面表现的更好
再强调一次，纹理会受到分辨率的影响
但是顶点属性不会
顶点之间的插值特性让画面表现不受分辨率的影响
另外，采用顶点属性的方式能“所见即所得”

Controlling the Lighting - 控制光照

• No global lighting affecting characters - 没有全局光影响角色（这个根据自己的项目需求来制作，不一定都按照这种方式，具体看全局的光照信息，美术能否接受）
• Each char has their own light vector - 每个角色都有属于自己的光照向量
• Adjusted to get best look at idle pose - 用于给 Idle Pos （待机姿势）调整到最佳的外观
• Adjusted every frame in Cutscenes - 用于转场的每一帧的调整

《罪恶装备Xrd》不像传统的3D游戏
角色会受到一个全局光照系统的影响
每个角色拥有一个独立的光源
让每个动作都能得到最好的展示
光照不会逐帧变化
但在 CutScene （转场） 中，动画会驱使灯光每一帧都有变化

Controlling Vertex Normals - 控制顶点法线

• Main reason Cel-shading gets ugly results - 主要的原因是 Cel-shading（卡通着色）有极丑的视觉问题
• Manually setting normals was key - 手动调整法线是关键
• Softimage had great tools - Softimage 提供好用的工具
  • Gator (vertex parameter transfer) - Cator (顶点参数的传递)
  • User normal editing tool - 用户法线的自定义工具
• Again, possible to do with normal maps, but VN is much more practical. - 再次强调，尽量的使用法线贴图，但是啊，这里 VN（Vertex Normal） 用加实用
  • Impossible shapes - 保持形状
  • Less pixel noise - 更少的像素噪点
  • Ease to weak - 更加易于调整

模型上的法线是让正确赛璐璐风渲染变得困难的一大原因
法线即使是一点点的不一致
在赛璐璐风的渲染中就会导致很明显的瑕疵
这个问题的原因就在于法线都是自动算出来的
从画面结果上看并不是美术所预期的那样
另一方面，2D的渲染则可以随意控制
闭合这些缺口是件简单的事
所以3D渲染中必须要手动控制这些法线
幸运的是，Softimage这个软件能很好的支持我们
当然，法线修正在游戏图形研发中不是什么新鲜事
但我们探索得更深
为了去除不必要的着色，我们修正了角色每个主要部位
尤其是角色面部需要干净的卡通风格呈现

19:35 秒这里开始 Live Demo : Normals （现场 Demo 演示 : 法线的实时调整效果）

How color is treated in Anima - 在Anime(日本动漫)中颜色是如何处理的

Coloring is used to express materials in Anime - 在Anime(日本动漫) 中，颜色用于表达材质

• Combinations of Lit and shaded colors define material - 合并光源 和 着色 定义为材质
• Usually the responsibility of a professional color designer - 通常是由专业配色师负责

谈谈着色中的颜色部分
颜色在动漫中很重要
谨慎选用每种颜色
因为颜色不仅仅表现材质属性，还得与角色相称
这项工作不是简单地增加环境光的影响
颜色风格在不同动漫中各有不同
但有一个共性的是：颜色设定也是非常的主观
光照和颜色的结合能极大地丰富角色特征
不仅仅是反映材质属性，还能烘托气氛和角色性格
这项工作不能仅凭个人感觉，而是会有专职配色师指导负责
为了让3D动画看上去正确，我们牢记职责分工重复上面说的步骤

Getting the color right - 得出正常的颜色

What decides the Shaded color? - 什么决定着色颜色？

• In Anime, shaded color often defines how solid that material is Less solid materials have lighter shades because more light passes through - 在 Anime 动画中，着色通常决定材质的色彩浓度，更多 光照透过的话颜色会更浓的色彩
• Light passing through the material gets a Tint (ex: Reddish for human flesh) - 光通透过材质会着上颜色（如：人的肉体透过会呈现红色）

2 textures define the colors - 两张纹理来定义颜色

• Base Texture: Color when Lit - Base 纹理：是当 有 光照 时使用的（迎光面的颜色）
• Tint Texture: How dark it gets in shaded - Tint 纹理：着色中觉得有多暗的程度（从图片中来看，背光面的颜色 = TintTex * BaseTex = ShadedColor，其实 ShadedColor 更应该叫：ShadowColor，但是这种方式我不知道有点在哪，可能我还没看完整个视频，没理解透，在看完后面的内容，可能就能理解为何这么用，我之所以这么没理解这种 multiply 的方式来混合出阴影颜色的原因，是因为，ShadowColor 直接取与另一张贴图就够了，而不用 TintTex * BaseTex 的方式混合，如：ShadowTex 就够了，这张 ShadowTex 就是 离线的 TintTex * BaseTex 生成结果，这样还可以节省运算量）

在深入研究动漫艺术风格之后
发现渲染的颜色通常定义了一个材质到底色彩有多浓
不够色彩浓艳的会有更多的透光性，所以着色上会更亮
当光透过透光性材质的时候，材质会被染上颜色
染上的颜色取决于材质的构成
比如说，人类皮肤会被染上一点红色，是因为有真皮层（这里说的不对，其实不是真皮层而是红细胞）
为了实现这样的效果，我们采用了两张纹理贴图的方法
基础纹理(Base Texture) 呈现的是模型表现被光照亮的样子
而染色纹理（或叫着色纹理，Tint Texture）是代表没被光照亮的样子
结合这两张纹理，我们得到了最终的着色后的颜色
用这种方法，美术可以全权控制模型渲染出的颜色
也就是说可以全权决定被照亮和没被照亮时的颜色
可以看到，这些纹理内部基本都是矩形的纯色块
这时因为我们仅仅用它们来做颜色查表，不画细节
就想刚才称述的，最有意义的数据
被保存在 mesh 上（Vertex Property，顶点属性），而不是在纹理中

Character’s OutLine - 角色的外轮廓（外描边）

The “Inverted Hull” method - “反凸包” 方法（应该说是，按法线膨胀，然后只绘制背面，什么 反凸包 都是让人更难以理解的）

• Expanded mesh with front face culling - 膨胀网格，剔除正面（上面那句翻译完后，发现下面就写的挺清楚的，我是不是错怪他了，-_-）
• Generated within the shader - (在 shader 生成？没看懂这句，估计看他后面讲解完才能懂）
• Traditional way + tweaks - 传统的方法 + 一些微调（我们将 微调 成为：骚操作）

Why not post effect for outlines? - 为何不使用后效来描边？

• Easier to preview - 比后效更好的预览效果
• More control through vertex shader - 通过 vertex shader（顶点着色器） 更好的控制
  • Width by distance from camera - 描边线宽可以根据相机距离调整
  • Width by a channel of vertex color - 描边线宽也可以根据顶点颜色调整
  • Depth offset by a channel of vertex color - 表面顶点深度偏移还可以根据顶点颜色调整

在赛璐璐风的着色中，描边很重要
事实上，回想下，在黑白的日式漫画中
线条是最重要的视觉组成部分
在《罪恶装备Xrd》中，我们使用传统的 Back Face(就是上面的 Invert Hull) 法来实现外描边
用一个 Pass 来绘制背面的多边形，并在法线方向做一顶的扩张
我们用了一些新的小技巧来让描边变得更可控
如今，普通的做法是用后处理来实现描边
但我们发现，用 Back Face 更适合我们的需求
首先，我们能在修改之后立刻看到改动的效果
这让我们能准确了解模型在游戏里是如何呈现的
我们通过顶点着色器来更精确地控制描边的粗细
即使是在项目全力冲刺的时候
再一次强调，我们用顶点色的一些通道来控制描边的参数

Character’s Inner Line - 角色的内描边

• Lines drawn on the surface of polys - 线条画在多边形的表面
• Makes a huge difference in faking 2D - 在伪2D有很大的区别（这句话有点难以理解）
• Needs to hold up in super close-ups - 需要在超近的特写镜头保持（这里就不能写清楚一些吗？保持什么？保持 清晰的纹路，不会有锯齿）

Used a special technique to achieve this - 使用特别的技术手段来达成

• All lines are Axis Aligned beams. - 所有的线条在 贴图 中都是 轴对齐的 直线
• No freehand curves - 没有手绘的曲线
• UVs are lined up with these beams - UVs 将会与这些直线对齐
• Stretches can be ignored - 这么做，可以忽略拉伸变形
• UV overlapping the beam = width - UV 覆盖到直线的多少，就是用到控制内描线的宽度（粗细）
• Greate control and jaggy free - 出色的控制度 和 无锯齿
• Looks great from distance too - 远出看都能有极好的效果

好了，外描边搞定了，但有害其他的描边需要着手解决 - 内描边
我们需要寻找其他的方法，因为传统的 Back Face 不管用
这些描线在2D上很重要，因为这些描线决定了物体的立体感
为了让我们的游戏呈现2D化的效果，我们需要解决这个问题
最简单的方法是在纹理上记录这些描边
但我们甚至这样会有一个很大的缺陷：分辨率影响
我们希望角色能在极近的特写中也能保证描线没有锯齿
为了去除分辨率的影响，我们需要无限精度的纹理
很明显，这样不切实际
所以我们需要一个更好的解决办法
我们采用了一种全新的UV布线法
来避免描线的锯齿，即使是在极近的特写中
我们是这么做的
所有的线条都横平竖直，UV也是如此
如果一条线段被很多UV覆盖，这意味着这条线将很粗
只要线条都横平竖直，就不会产生任何的锯齿
所以我们这么用了，没有锯齿成了我们游戏的一个优势
缺点是我们的UV非常的扭曲
但这并没有关系，因为我们的纹理贴图没有任何的细节图案
可能我们的做法很难理解，所以请让我演示一下

26:20 这里开始了 Demo : Inner Lines 的演示，如下图是这个点的截图，具体请查看视频

Animation - 我们如何制作 动画

通过刚才所说的方法
我们成功制作了非常棒的带有明显2D感的3D模型
下面来谈谈动画

Do it like 2D to make it look 2D - 就想 2D 那样制作，让它看起来像 2D

‘Limited Animation’ in 3D - 在3D里的’关键帧动画（有限制的动画）’

• Japanese Anime style animation (less frame per second, intentionally limited movement) - 日本动漫的动画风格（每帧比较少的帧，故意的限制移动）
• No interpolation between keyframes - 关键帧之间没有插值
• Each key frames hand posed - 每帧手动调整 pos
• Imagine ‘Stop Motion’ animation - 可以想象成是 ‘停止运动’ 了的动画

动画就是模型和 shader 的载体
通过模型和 shader，我们想让角色看起来尽可能地有2D感
为了做到这点，我们使用了一种风格
叫做“关键帧动画”（Limited Animation）
这时在日本动画行业中流行的术语
相对的是“逐帧动画”（Full Animation）
不同于西方的动画公司比如迪士尼
“关键帧动画”使用更少的帧数来欺骗人眼
过去几代的《罪恶装备》就是这么做的
为了达到相同的效果，我们遵循了同样的原则，但这次是在3D开发中
我们确实在早期开发中尝试了“逐帧动画”
但这样无法传递2D感
在关键帧之间的其他帧会进行插值
这使得动画更加地平滑，但感觉更像是3D作品
所以我们取消了关键帧之间的插值
每一帧都是关键帧，每一个动作姿势都呈现了最好的状态
想象一下定格动画，每一帧都是停滞的
这就是我们所做的事情
这让我们的游戏从画面感上看起来和上几代没什么差别
并且在 CutScene 中更加地具有2D感

The Rig - Rigging (骨骼装配) 部分

• Lots of bones (Around 400 ~ 600) - 许多的骨骼（大概在 400 ~ 600）
• All are hand animated - 所有都是手动调整的动画
• Every thing must be ready to animate - 所有东西必须准备好动画
• Scale animation used a LOT (engine customized) - 使用许多的 缩放 动画（引擎自定义的）
• Freedom over automation - ？

为了能够使用“关键帧动画”，我们需要一个新的工具
我们知道如果想要在每一个动画中使用更少的关键帧
就必须在每一帧中插入更多的数据信息
我们通过使用更多的骨骼
这样动画师可以一帧帧地控制模型的每一个细节特征
平均一个角色大概会有500根左右的骨骼
没有用什么仿真工具，还是因为这样看起来不像是2D
任何的模拟仿真工具都无法达到我们想要的动画风格
缩放动画被大量使用，因为可以做很多的 trick
比如夸张的动作、压扁拉伸之类的
我们需要这些，但引擎没法提供这些功能
无奈之下我们只好自己开发一套缩放系统
虽然任务艰巨，但我们天才的程序员还是搞定了
这一切很值得

How to make it look like 2D - 如何让他看起来像2D

• Intentional discontinuity and imperfection added to “kill the 3D” - 故意让其不连续 不 完美的方式来达到 “干掉3D” 的效果
• Every feature adjusted every keyframe - 每一个特征都需要每一帧中调整
• Light adjusted to get best shading every frame - 每一帧都调整灯光让其有最好的着色状态

关闭关键帧之间的插值是必要的，单还不够
你需要另一个 trick 来达到“关键帧动画”的效果
秘诀就是每一帧都把模型做一些形变，让其变得不完美
人眼系统对于视角很敏感
如果3D模型的一部分掠过人眼的时候保持形状不变
人的大脑就会产生这物体是刚体的印象
为了避免这个错误印象，只有一条路：把模型做一点点变形
人眼系统不完美，美术也不完美
所以太完美的东西看上去就很假
接下来我来演示一个例子：在 SoftImage 中的动画情况

32:45 这里开始演示 SotImage 的动画

Comparsion - 比较

• “Full” animation is smoother, but it looks less 2D - “逐帧 或 满帧”(或叫 关键帧) 动画更平滑，但是看着没那么像2D
• Which is more distinct? - 那个更加明显？
• We choose “Litmited” for the clarity it holds. - 我们选择的是 “Limited”（关键帧）更 硬朗（更容易识别）的方式。

下面是逐帧动画和关键帧动画的画面比较
让我们来看一下
这就是使用插值做出来的逐帧动画（左边的 Full）
这时关键帧动画的效果（右边的 Limited）
很明显，逐帧动画因为有更多的帧数据，所以更平滑
但是看上去实在是太像3D了
再来比较下关键帧动画
关键帧动画虽然不太平滑，但特色动作能更好地被识别
你可以选择其中的任何一种来做开发
但我们选择关键帧动画，因为它有特色

Final Thoughts - 最后的一些想法

让我来做一些简短的说明，是关于我们怎么编译资源的
但让这很复杂，但我没法在很短的时间内一一说明
如果你有一些特定的问题，可以现在想想，并几分钟后来咨询我
同时，让我来总结下为什么我们能成功

The X factor is the Artist’s Intention - X 因为是 艺术家故意的

• All the techniques were there - 所有的技术都在那了
• Nothing Innovative technology wise - 没有新技术的发明
• Could have been done years ago - 这些技术早在多年前就完成的了
• The workflow made the difference - 但是工作流不一样
• Let the Artists Intention reach the Result - 让艺术家想要达到最终效果

是什么X因为让我们的游戏变得与众不同
我得出的结论是：有美术主导（艺术效果）
我们使用的所有技术其实没什么新意
没有硬件或软件上的创新
严格来说我们游戏的艺术风格在几年前就能实现
不同的是，美术打算想要做成什么样的画面表现
美术从“想象”到看到“实际画面效果”之间的流程越少越好
这是我们最核心的要点

A fortunate situation - 一个幸运的情况

The right staff in the right place - 适合的东西都放在了适合的位置上

• A 2D oriented studio - 一个面向2D的工作室
• A bit of 3D Exp, but not too invested in photorealism - 只有一点点的 3D 经验，没有投入太多在 3D 真是渲染
• A need for a new art style - 需要一个新的艺术风格
• A well established game as a foundation - 一个稳定的游戏作为基础（因为他们是重新启动的项目）
• A team of just the right people with just the right skills - 团队里的人刚刚都有需要的技能
• A clear goal and a lot of creative freedom - 一个清晰的目标和非常自由的创作环境

但为什么只有我们做到了而不是其他人呢
一个简单的答案是运气
回想起来，我们的起步并不好
我们是一家拥有很多2D经验的但没3D经验的工作室
我们懂一点3D知识，但并没有深入研究过3D真是渲染
所以我们需要在这激烈竞争的环境中创造出属于自己的风格
这个项目是重启项目，而且是历史悠久的作品
所以我们知道我们要干些什么
而且我们的团队是超棒的
为应对这些挑战，团队中正好有掌握正确技术的合适的人才
当然，仅仅靠运气是远远不够的
团队中的人各个工作努力并有着奉献精神
来自粉丝的支持也是一大助力

My final proposition - 我最后的一些建议

I would like to see more NPR - 我将会了解更多 NPR 的内容

• Not enough research put in - 还没足够深入研究
• Photo realism is great but it’s not the only way - 真实渲染很好但是不是唯一的方法
• Plenty of room to explore and improve - 有着许多的探索空间和提升空间
• Many styles untouched - 还有许多的效果还没接触到（挖掘到）

You, could be the one to get there first - 你，有可能成为领头羊
The frontier is there, waiting to be discovered - 目标就在哪里，就等着你去发现

最后是我的愿景
我希望能有更多的工作室来探索NPR
我感觉这块领域还没有太多的研究
NPR有很大的进步空间
PBR很棒，但不应该仅有一条路，况且这条路走的人已经很多了
如果你停下脚步、四处张望，你就会发现一片新世界
你就是探索未知领域的先驱，群山就在哪里、等着你来攀登

Questions? - 发问环节

观众1：
我第一个问题是制作一个角色需要多少人多少时间

本村：
模型、纹理、骨骼基本都是由一个人完成
一个人一般要做3 - 4个模型
大概一个模型 2 个月吧
可能还需要 2 个月来做动画
所以工作很紧张

观众1：
我第二个问题是因为有很独特的UV布线
而且每个角色都很独特
所以对比着2D原画设定
每个模型到底需要打多少个补丁（调整UV）？

本村：
所以你的问题是关于UV布线的
UV布线的第一个阶段和其他项目没有什么不同
我们通过UV布线来确定一块区域的大小
但在这之后，我们强行展评UV到横轴的竖轴
紧接着我们在纹理上开始画线条
最后再把UV和纹理映射起来

观众2：
我非常明白为什么不能在关键帧之间做插值
因为这会让动画看上去太像是3D，并且有点假
但你们有考虑过手动吧关键帧翻倍吗？
当然这会增加动画师的工作，但你们有没有考虑过呢

本村：
但这种方法做太多的话也很费劲
保持低数量的关键帧可以让画面看上去更2D
这是我们权衡工作量和画面效果的结果

观众3：
您刚才提到说大概要花2个月来做模型和动画，没错吧

本村：
第一个模型需要先摸索出制作的流程
这很花时间，但接下来会快些

观众3：
我主要想问的是看上去《罪恶装备Xrd》的模型
需要比 BlazBlue 的贴图花费更多的工作量
我不确定，但我相信 BlazBlue 的贴图其实是三渲二的
因为看上去很有质感

本村：
是的， BlazBlue 是三渲二的，但 BlazBlue 的更简单一些
因为 BlazBlue 没有面部表情部分，这些是后面画上去的
所以模型上并没有面部表情部分
因为从设计上并不会出现近距离的特写镜头

观众3：
这么说在《罪恶装备Xrd》中的模型又更多的工作量
所以也导致了很难再加入更多的角色

本村：
似的，我们喜欢在更新中快速加入更多的角色
但是我们需要平衡品质，所以这需要时间

观众3：
其实我想问的是什么时候能有 Dizzy 这个角色
（注：一个《罪恶装备》系列中的人气女角色）

本村：
我也很期待，但我不能透露更多

观众4：
在你们的外描边方法中
法线是自动生成的还是经过手动调整的

本村：
我们有另一组自动生成的法线来做外描边

观众5：
你们使用关键帧动画来表现角色动作和终结技
我想知道为什么镜头动画不同样使用关键帧动画的手法呢？

本村：
好的，镜头如果也用关键帧动画会看上去很丑
我们在关键帧动画中，一秒的关键帧虽然就8或12帧
但背景的移动速度还是一秒24帧的
所以这和角色背景不同，因为镜头一动，背景也会随之而动
如果把镜头动画的帧数降得太低，你会发现背景跳帧过快

观众5：
我有一个朋友觉得这样有点怪：
角色动作有一些不连贯，而背景移动很丝滑

本村：
我们有试过把镜头的帧数降低，但我觉得效果不好

观众6：
你们有在游戏中偷偷替换过模型或其他的资源吗？
比如 Millia 的头发之类

本村：
是的，我不像深入探讨，因为时间有限
很多角色有夸张的动作，比如 Sato 的影子，Millia 的头发
他们做了很多的变形动画，而且这很难用一个 mesh 来完成
所以我们不得不用了很多 mesh，不停地切换形状

观众7：
我很好奇，像这么一款单个高模就有几百根骨骼
而且有大量动画的游戏是怎么做到稳定帧数的？
并且在整个工作流中怎么评估这点的？

本村：
在整个工作流中，shader 不是性能开销的重头
我们在屏幕中只有两个角色，这省了很多事
所以稳定60帧在 PS4 上很容易
我们需要在 PS3 上，对 shader 和多边形做些许的调整
所以 PS3 上大部分情况下也能达到 60 帧

观众7：
听上去你们可以在用低分辨率纹理的情况下保持高品质的画面？

本村：
是的，我们一般角色有三张纹理，一张 2048，两种 1024

观众8：
我的问题是关于高光的
也许我理解的不对，但 Sol 的三角肌有一个高亮区域
你是否有第三张用于高光的纹理

本村：
我们有高光但不对高光做修改
没有额外的纹理，只用 base 纹理和 tint 纹理
我们通过混合两种纹理来达到高光效果

观众8：
是使用了普通的法线吗？

本村：
似的

观众9：
第一个问题是：特效也是手动绘制的还是使用了粒子系统？

本村：
好问题，我本来没打算讲特效部分
大部分特效都是粒子做的
但不单单是用发射器，还使用了动画来控制特效的移动
击中的特效和其他类似的特效确实是2D的
使用一系列贴图的帧动画来做的
一些类似角色移动或跳跃的烟雾特效
用来表现强力的感觉的那些
是用很多的面片一帧帧地替换来实现的
我们曾静开过一些玩笑，关于做烟雾特效的
最喜欢的一个是我们会
每一帧用一个不同的模型来模拟烟雾效果
最后我们竟然发现这么做的效果最好

观众9：
第二个问题是有没有什么重要的特性是只有在这个游戏里才能做的？

本村：
我不会在其他的软件里这么做
因为在 SoftImage 中，不修改法线和 UV 的情况下
你可以回退到任何一个制作阶段，或者继续接下来的工作
所有的数据都会保存起来，不会丢失
法线的修改在 SoftImage 中很方便
我知道在 Maya 和 3ds Max 里也能做法线的修改
但据我所知，3ds Max 有一些法线映射的问题

观众10：
我想深入问一下特效方面的问题
当剑旋转的时候，会有一些拖尾
这是把剑的模型的顶点移动变形了吗？

本村：
这是一个关于切换模型的问题
有些角色的剑的模型会被替换，当剑本身扩张变化的时候
其他一些情况，我们仅仅是额外加了
一块 Mesh（表现拖尾），为了让画面更真实
所以在原来的 mesh 上再加 mesh 无济于事
我们是额外增加一块特效专用的 mesh 来表现

观众11：
我想问一个关于法线编辑的问题
你们手动编辑了很多的法线
我很好奇用的是什么软件？是XX软件还是自己做了一个？

本村：
一方面，我们使用了 SoftImage 里的 Gator
可以用来复制法线从一个简单的 mesh 到一个复杂的 mesh
这样可以提供更平滑的 mesh 和更平滑的法线
另一方面，我们还手动地扭曲了法线

观众12：
我想深入探讨一下游戏的光照解决方案
游戏中角色的光照是脱离与整体光照方案的
有些光照作用与场景，有些作用于角色
首先，作用于角色的光照会根据场景变得稍有不同吗？
为了让角色更融入场景中

本村：
好的，首先场景没有计算光照，所有的阴影都是烘焙的
所以没有全局光的作用，唯一的全局光是角色的阴影
shadow map 是唯一用全局光的，不受角色的角色灯光的影响
角色的灯光不会变动也是一个很主观的选择
因为我们不想改变一个角色动作带给人的印象
如果角色阴影在不同场景有变化，给人的印象就是动作变化了
这在格斗游戏中不是个好主意

观众12：
我想问的更宏观一些：对于开放世界比如RPG来说
采用你们这套光照方案会很难（每个角色都只使用独立的光源）
总会有一些关于全局光和局部光的需求
但角色没法和这些光源相互作用

本村：
是的，没有办法
因为我们很清楚我们要做一款带有固定镜头的格斗游戏
所以可以这么做
如果我们打算做ARPG，肯定会换其他方法

观众12：
所以您的光照方案无法在需要表现更宽广场景的游戏中使用？

本村：
是的，基本不行

观众13：
首先很高兴能看到一家日本公司能用 NPR
因为在西方没有很多人研究NPR
你们公司和 CyberConnect2 做的东西很激动人心
我的问题是你们用了很多顶点色通道用于外描边
你们是把所有的信息压缩到 RGBA 上还是用了其他什么方法？

本村：
是的，我们用了A通道用于光照，用RGB通道用于外描边

观众14：
我有另一个关于法线修正的问题
你们有使用非单位法线吗？
因为可以避免法线和光线方向点乘后产生的锯齿状斜纹问题？

本村：
是的，我们有考虑过
但我们还是想保留单位法线
因为这样（单位法线的计算结果）更容易预测（控制）

观众14：
另一个关于纹理采样的简短问题
你们是不是只有 point 采样？我假设你们应该
不会用 mipmap，因为担心没法控制远距离的画面表现

本村：
虽然我说我们不认为这些是2D图片，但我们整合这些成为纹理
不然我们没法做内描边
所以我们的采样没什么特别，但UV还是特殊的

观众14：
但是在 point 采样的线条，会和 linear 采样的一样嘛？
因为 linear 采样的话，拉远看还是很平滑的

本村：
好的，我认为你想问的是纹理过滤方式（texture filtering），对吧

观众14：
是的，shader 中的问题里是通过哪种方式来采样

本村：
纹理过滤是为了那些远处的 blur 效果
而 blur 的区域是为了包围住角色

观众15：
关于角色的自阴影部分
是手动做的还是用了某些特殊的光照方法？

本村：
所以问题是关于角色的自阴影
角色的自阴影是我们想做但没做的功能
我们用阈值来控制
我们没做自阴影主要是因为在角色动起来后很不好控制
比如角色有很大一坨头发，而头发会在脸部产生很大块的阴影
我们没办法控制这阴影的大小和位置
我们只能开启或关闭自阴影
所以最后没有这么做，取而代之的是做了一些假的自阴影

观众16：
这么说所有的自阴影其实都是顶点色的阈值手动控制的？
我想知道你们认为这 NPR（2D感）有没有更多的改进空间？

本村：
我们有很多的想法，但我无法谈论这些
因为这样做出来后就没有惊喜了
所以我希望你们能继续关注我们

观众16：
听上去已经足够振奋人心了

GDC 2015 熟肉视频 backup

• NPR之项目分析_GDC2015《罪恶装备Xrd-SIGN》篇—某乎 博主 带熟肉字幕.mp4 - 网盘视频备份（这里只做备份不公开，毕竟是某乎 博主 的良心熟肉，要看，可以在下面的链接中查看在线视频）
• NPR之项目分析_GDC2015《罪恶装备Xrd-SIGN》篇 - 某乎 上的分析，讲解的挺细的，最主要还有熟肉视频，良心博主

References

• GuiltyGearXrd’s Art Style : The X Factor Between 2D and 3D - 玉兔 GDC 2015 原视频
• NPR之项目分析_GDC2015《罪恶装备Xrd-SIGN》篇 - 某乎 上的分析，讲解的挺细的，最主要还有熟肉视频，良心博主