从TGDC看游戏工业：原神三渲二画风与王牌战士制作经验分享

本文是“从TGDC看游戏产业”系列报告的第五篇。

组织/艾萨克

今年，《原神》的出现让业界开始关注三图两图的独特风格。但在二次元游戏中，《原神》其实并不是第一个尝试新事物的。作为腾讯游戏魔方工作室群《王牌战士》项目组的主要美术师，谢海天和同事们在开发过程中总结了很多游戏动画制作的经验。

在近日腾讯游戏学院举办的第四届腾讯游戏开发者大会（TGDC）上，他以演讲的形式分享了这些经验，提到了色彩、建模、动画特效等相关问题。渲染技术和制作技术。

以下为葡萄先生整理的演讲内容：

大家好，我叫谢海天。很高兴能在这个平台上与大家分享我最近的工作。本次分享的主题为“从画皮到画骨——盘点二维游戏黑科技”。我从颜色、形状、动画特效三个角度告诉大家什么是黑科技。

我现在给你看一个动画。这是2000年的一部日本动漫电影《吸血鬼猎人D》，之所以会放映这部动画，是因为我们在制作《王牌战士》时以它为参考。

这部电影有一些有趣的事情。首先，它是一部日本动画电影，但同时在美国院线上映，因此代表了欧美和日本的一些审美倾向；其次，它是一部逐帧的2D动画电影，这意味着它涉及黑科技。

我这次分享的主题：黑科技，一句话概括就是“用3D技术还原2D卡通效果”。这里有两个关键点，一是3D技术，二是2D卡通效果。 3D技术就是我们刚才看到的。这部电影是在赛璐珞上手工逐帧绘制的。

为什么说它是黑科技呢？因为我们平时看到的游戏基本上都是利用PBR技术来打造一些比较真实的效果。刚才的片子有一些艺术处理效果，我也想用3D视角来还原2D手绘处理效果。

颜色

我们先来看颜色部分。这也是刚才视频里的剧照。先从明暗部分和色彩对比的关系说起。

你可以看到左边是剧照，右边是我从上面拍摄的颜色。乍一看，首先，右边的调色板左边是浅色，右边是深色。其实第一眼就能大致感觉到它的颜色有些变化，但是变化并不是太大。这是从日本传统动画角度出发的一种实现方法。

但如果从皮肤的角度来看亮部和暗部的颜色，暗部会相对偏暖一些。从它的铠甲颜色来看，它会受到环境颜色的影响，所以会偏冷一些。如果你是直接使用3D角度制作3D游戏，则不需要考虑这些事情，因为有很多现成的光线追踪，或者一些反弹，可以做到这一点。但这是我们稍后会谈到如何处理的事情。

这张图是根据整体和局部的色彩对比关系来绘制的。同一个角色在雨天、晴天、下雪天也有不同的颜色变化。这也很容易理解。即使在正常的电影中，一个人也会有很多颜色的变化。这里雨天和雪天有点接近，因为它们都属于漫反射环境。晴天时，由于阳光较强，整体色彩和对比度会更强。

这是扳机俱乐部的电影《普罗米亚》。到目前为止，日本动画的色彩发展非常强劲。如果你对这部电影感兴趣，可以找一些剧照和幕后花絮来观看。非常华丽。它的华丽程度比刚才要强很多，但看久了也会造成视觉疲劳。

这里你可以清楚地看到，我用线条连接的也是浅色和深色。从调色板中可以清楚地看到，先是黄色、绿色，然后是橙色和粉色。它极大地拉伸了这种颜色的饱和度。可以看到有些颜色的度很高，就是RGB颜色。打印机的颜色可能打印不出来，所以如果打印出来可能会有偏差。颜色。这就是他们想要的非常强烈的视觉效果。

当我们了解了这种受众和审美之后，我们如何在游戏中使用它？这是我们游戏中的角色：卡罗琳。左边是她的原生状态，右边是她的一款皮肤。

你看左边的角色，她全身都是很冷的颜色，包括深色的部分，我们还特意调整成了偏冷的紫色，只是为了让她的颜色统一。但这样一来，她的色彩就会很容易变得更加生硬。因此，尽管她有黄色的头发，我还是给了她非常重的粉红色，实际上使用了紫色阴影作为背景。然后用冷色来衬托皮肤和衣服的深色部分，达到统一的效果。

另一位是校园教练。通过对比他的头发，我们可以看到我们头发、皮肤和身上衣服的深色部分都是同一个颜色，让他看起来就像沐浴在阳光下一样。这就对应了我刚才说的明暗部分一定要有颜色对比，这是人为处理的。同时，整体还需要有色彩饱和度对比。这是一个简单的技术解释，我不会详细讨论。

左边第一张图是实现的效果，第二张图是我们对深色所做的处理。可以看到发色、饱和度、色彩偏向都很重。最右边的图片可以被认为是一个着色器。其中一个过程是将黑色和白色分离为阴影。在黑色区域中，将中间图像与我们的高亮颜色叠加并混合以获得最终效果。

我将为每个主题添加高级内容。我们会在此基础上留出一些空间，做一些净化，以达到以后提高技能的目的。如果我们有审美的追求，我们就会做出相应的尝试。

右图为《爱、死亡与机器人》的静帧截图。这是比较美式的画面效果，但是可以看到人物的白衬衫有向上的反射光，看起来是暖色系的。 。在普通的电影中，或者稍微现实一点的画面中，你不会看到如此强烈的反射。这是为了刻意强调他的裤子的反射，或者整个环境在他白衬衫的深色部分上的反射。

左边是我对卡通渲染的光线追踪所做的模拟。因为它的光线追踪并不是基于特殊的物理或者特别现实的范围，而是我直接给它指定了一个渐变。

看左边球下方的图片。我给灯光颜色一个暖黄色来模拟太阳的颜色。深色部分有一个从蓝色到粉色的渐变，就是给深色部分盖上一层蓝色和冷色。这种冷色用于与高光中的暖黄色形成对比。

粉色有什么功效呢？光线追踪会不断地反射球的黑暗区域，让粉色慢慢渗入黑暗区域，包括它的阴影和明暗边界后面的区域。你会看到比较强的效果，我们现在正在角色实验中使用这个工作。

这是一个视频。左边是我们现在的《王牌战士》人物效果，右边是我们正在尝试的画面效果。通过对比我们可以看到，之前的赛璐珞效果是非常有特色和时尚的，但是如果我们想继续走下去，想要更多的细节，或者想要更多的表现力，我们需要做更多的尝试。 ，寻找平衡点。

大家可以看到，我们现在正在进化的是一些明暗边界线的颜色关系，包括高光区域的处理。现在这个角色的颜色已经包含了我刚才提到的光线追踪效果，但是因为我们要在游戏中实时运行，所以我们会使用一些其他的技术。

这是一项隐含的黑科技。首先需要使用非实时渲染效果进行预览，然后在引擎中实现。这两个步骤也是相辅相成的。因为我们在做宣传视频、海报的时候，都要在这个基础上来处理。这代表了两个方向，一个是赛璐珞，非常传统的做法；另一个是赛璐珞，一种非常传统的方式。另一个是未来想要发展的想法和效果。

造型

至于造型部分，我就从这张图的角度来谈谈。

首先看右图。这个角色就是我们游戏中的渲染效果。从这个侧面看，可以看到右脸颊上有一个倒三角形的小东西。这种效果不是随随便便就能达到的。对灯光稍有了解的朋友就会明白，这是一个比较经典的伦勃朗三点。光源产生暗中有光、暗中有光的效果。卡通渲染想要达到这样的效果，就不得不说到布线。

你可以看看这个接线图。这个小三角形必须被剪掉并走线以遮挡光影的轮廓，这样你才能看到这个三角形。至于这个样子是什么样的，对于不同的角色来说可能会有所不同。男人应该更坚强，女人应该更小。但这个小桃心形一定要剪下来。

其次，可以看眼睛。眼睛绝对是一个球体，但却有类似凸透镜的效果。如果使用卡通效果，就得模拟镜头的效果，这是一个非常消耗性能的事情。而且就赛璐珞的卡通效果而言，并不需要那么物理化。

所以如果你看这个眼球，我们实际上做了一个凹面效果，这是一个凹陷的表面。这时，如果看它的光影，就好像光线被玻璃球折射了一样。

但其实人的眼睛还有一个非常重要的点——瞳孔。瞳孔是一个很有表现力的东西，不能被遮盖，所以我们单独制作了一块瞳孔，放在前面。

说到瞳孔还有一个非常重要的点：它的前面有一个非常明显的高光点。这个亮点就是灵魂之窗。如果你仔细观察那个小亮点，你会发现我们在上面还做了一个模型，可以通过骨骼来带动它晃动。

低头看嘴，如果你对这里的线路有所了解，你也可以知道嘴和眼球是由口轮匝肌和眼轮匝肌连接的。这样，当它移动时，光影看起来就会更加自然。我们当前的卡通渲染布线实际上从鼻子底部到嘴唇没有环路。

为什么要这样做？第一，因为卡通人物在做表情、说话时有时会有非常夸张的动作；其次，我们的渲染方法与传统方法不同。它的光影非常清晰。您可以看到高光位于右侧，高光位于左侧。就是暗部，中间只有一条线条过渡，而不是明显的平滑过渡。人在做表情的时候，如果循环太多，就会产生很多不必要的瑕疵，影响表现。这就是为什么这张嘴需要这样做。

还有一些较小的点，例如每根头发下缘的一个小切角。如果角色从正面打光，你必须给头发的根部打上阴影，否则头发看起来就像一张薄纸粘在头上。通过这个小切角，我可以给它人造光影，因为我假设这个角色不会经常做一些倒立或者奇怪的光影姿势。 90%的时间它都会站在那里看着你。

动画特效（高级）

还有一些更先进的技术涉及塑造和增强光影，我们必须经历很多陷阱才能实现。我们先来看看这一段。这就是我们角色五星的样子。

视频处理方式与真实游戏中略有不同。视频中的自由度可能会更大，因为相对而言，我只需要在这个镜头中向右看即可。不需要360度旋转，但在游戏中需要更严格。如果你现在觉得很正常，让我给你展示一下未处理的状态。

初始状态是左边这样，调整后是右边这样。首先，看炮管。如果单纯从这个镜头来看，整个枪口性价比最高，同时展现出最好的性能。一种处理方法是直接绘制纹理贴在枪口上，以配合当前的光影处理。没关系。这是视频中最经济、最划算、最有效的做法。

其次，通过人物的待遇对比就可以看出。为什么要进行这种治疗？因为我们实际上还是用3D来还原2D的效果。 2D 效果是完全可绘制的，但在 3D 中，如果角色移动或转动，我无法保证其所有 3D 灯光和阴影都是完美的。

所以你可以看到我没有打开模型之间的自投影，而是使用补丁来阻挡它们。包括手臂和袖子，都经过了一些处理，让它们看起来更好。事实上，在默认状态下，确实显得有些效果不够好，所以在整理过程中还有很多工作要做。

这里借用一张日本杂志的图片来说明。我们实际上在游戏中使用了这种增强的视角。但我们的游戏往往更偏向于热血漫画，不会有那么强烈的变形。这种漫画比较夸张。其运动幅度和变形强度都比较大。

可以看到左侧被打了一拳，脸也肿了。其实这里直接放了一个mesh。它有一个天然的优势，因为光、影、形状都比较简单。我直接把网片贴在脸上，看起来就像脸上肿了一块。我们在游戏中经常使用这种方法。

左边这个也是非常经典的用法。其实有时候当你不做这类项目的时候，你会想：这个有必要吗？必须这样拉着你的手才能拍摄还有意义吗？其实如果你自己拍过照片的话，你会觉得，当大家站成一排，远处有人拍照时，两边的人都被拉得看不清了，而里面的人中间稍微落后一点。如果你靠近一点，你的脸就会看起来更小。当镜头放置得如此之近并拍摄时，镜头的透视效果会被极度夸张。

右图中，人物实际上只是站在前面的脸和手，后面的脸在透视上并没有特别扭曲。根据我的目测，这个镜头的FOV大约是50到60度，这是正常的透视状态，所以必须要做一个空间处理。如果现在只是简单地调整相机FOV，效果会看起来很糟糕。这也是视频中使用的一种技术。也就是说，在游戏中也可以做到，但是相机必须是固定的。

至于动画特效，这整个部分都是高级内容，确实是游戏中的一个难点。动画的中帧是我们一些传统游戏的正常做法。它是直接利用差值来计算的，或者也由动画师来完成。

但是如果我们想要制作这种二维的，或者有点个性的动画，对于动画的中间帧的处理方法有很多。这是《爱、死亡与机器人》中的追逐戏，有一种转瞬即逝的感觉。

即使你看过这部电影，你可能没有意识到中间发生了什么，但你可以感觉到他的情感表达非常强烈。

看这张图，第一张图还是正常状态。此人虽然在奔跑，但却很着急，追的时候面容狰狞。接下来的三张图都是直接夸张的。如果将这个效果插入到动画的中帧并一闪而过，表现力就会很强。但在使用的时候，你要稍微控制一下，因为它是整体调性的表现。

我们在游戏中也使用了一些此类动画中间帧，但它们的强度没有那么强。黑白闪光与刚才动画的中帧颇为相似。黑白闪光可以看作是整个镜头的中间画面。黑白闪光灯在日语中被称为，但我认为可以通过这个片段向大家解释得更清楚。

这是《蜘蛛侠：平行宇宙》中间的一段。这是更明显的。闪烁的瞬间，也增强了动作的夸张程度。这种夸张并不是指动作幅度有多大，而是指那一刻的情绪表达必须足够强烈。

事实上，这部电影大量使用了美国漫画的表达方式。美国漫画在处理强势人物时，会用一些粗犷的台词来表达，电影中也采用了这一点。

我们在《王牌战士》中使用的黑白闪光灯较少，但在《一人之下》中我们使用了它。比如龙虎山打斗的时候，下雨天突然出现闪电，整个场景变成了黑白，但这里的黑白可能只有三四帧。就在这时，啪的一声，黑白一闪，气味立刻传了出来。

有一个词叫帧内。没做过的同学可能不知道。您可以将其视为卡通版的运动模糊。如果你现在可以在 Photoshop 或游戏中打开这种运动模糊，它实际上是一个功能。但回到我们刚才看的动画片，当时在胶片上画出模糊的感觉是比较困难的，所以他们创造了一个词叫intraframe。

由于手在两个画面之间的摆动，会形成视觉残留，在这个过程中不会将手画成一个整体。 《蜘蛛侠：平行宇宙》有一个特别合适的例子，因为这个孩子，在这个平行宇宙中，有着蜘蛛侠的二维精神融合。电影里她的表情都是卡通的，可能一闪就过去了。 。

我截了几张截图，相当于它的2D动画版，运动模糊的效果，把整条线渲染得非常具体。当这种框架充满项目时，你会明显感受到它与现实游戏的区别。

我刚才提到的所有动画，从中帧到黑白闪光，再到帧内，都使用了我刚才提到的技术。最后还有一个比较有趣的效果大家应该都非常熟悉——表情线。脸上的一滴汗、头上的一条黑线、一点点红晕都可以做到。

这张图左侧显示的效果比较微妙。我们的游戏更加微妙。看右边那些不显眼的线条。有红线和黑线。其实面部肤色也有一些纹路。这一点非常重要。我可以放大这条线，将其放置在屏幕周围，它就变成了一条速度线。

如果你仔细看他左边咧着嘴笑的嘴角，我们实际上是用线在他的嘴角上画了线。使用3D模拟时，不可能从所有视角看起来都那么自然，因此我们需要一些工具来修复缺陷。例如，笑后，嘴边会缺少黑色区域，以区别于他的洁白牙齿。这是我们唯一可以弥补的方法。包括刚才提到的框架，也可以用这个东西来做。

问答

Q1：卡通渲染在画面表现力方面有哪些优势？为什么玩家会认可这种表现形式？

A：你可以把它比作影视行业。卡通渲染现在做的就是还原影视行业以前的表现方式。例如，我们看过皮克斯和梦工厂的一些动画片。它们不同于传统的现实动画。他们具有较强的表现力和夸张的表现手法。他们还具有强烈的色彩感和强烈的个人风格。 。

如果你对这种表达很感兴趣，你会体会到一种不同于传统现实作品的感觉。我们想要实现的是同一件事。玩家现在已经认识到这种表达形式了。其实就是因为在市场上可以清楚地看到，如果在制作作品的时候有自己的态度和表达，而且效果也不错，就很容易获得玩家的认可。

Q2：非写实渲染开发难度大吗？应该使用什么技术或工具？

A：非写实渲染的研发绝对不难。我现在做的可能仅限于PC和移动平台，都是实时渲染框架。在非写实渲染框架方面，我也和他的同学进行了很多交流。事实上，实际使用shader的复杂度并不算太高。

但有一点是，它需要你将技术和艺术结合起来，或者对两者都有所了解。我也提到了刚才用到的一些技术和工具。我们的大部分技术和工具都是由我们自己的团队构建的。这套工具流程和技术流程也是我们自己开发的。这就是困难所在。

困难可能在于你没有很多现成的工具可用，所以我们都得根据想要的效果来创作。包括我自己，在跟随了两三个风格化的项目之后，我也感觉每个项目的工作流程和工具流程都有些不同，根据不同项目的不同需求会有区别。

非常感谢大家的收听，祝大家度过一个愉快的夜晚，再见。

《从TGDC看游戏产业》系列其他文章：