【TGDC】腾讯互娱谢海天：《王牌战士》如何用3D技术还原2D卡通效果_游戏陀螺

2020年12月7日-10日，由腾讯游戏学院举办的第四届腾讯游戏开发者大会（Tencent Game Developers Conference，简称TGDC）在线上举行。腾讯互动娱乐魔方工作室群《王牌战士》项目主美谢海天以《从画皮到画骨——盘点二次元游戏里的那些黑科技》为主题发表演讲。

他以《王牌战士》为例，从色彩、造型、动画特效（包括动画中间帧、黑白闪、帧内、表情线）三个角度，讲解了如何用3D技术还原2D卡通效果。

以下是演讲内容，有删减：

大家好，我是谢海天。我这次主要从色彩、造型、动画特效三个角度讲一下什么叫黑科技。

下图是2000年的一个日本动漫电影《吸血鬼猎人D》，我们在做《王牌战士》项目中，有很多参考这个片子。《吸血鬼猎人D》比较有意思的地方，一它是日本动画电影，同时在美国院线上映，代表了欧美和日本两方的一些审美倾向。其次，它是一个逐帧的2D动画电影，这就说到了黑科技。

我这次分享的主题黑科技，一句话来说，就叫用3D技术还原2D卡通效果。里面有两个关键点，一个是3D技术，一个是2D卡通效果。

3D技术是因为，我们通常看到的游戏，基本上是用PBR技术来做一些比较写实的效果，《吸血鬼猎人D》是在赛璐璐的画面上用逐帧的手绘方式来画的，有一些艺术加工的效果。我也想用3D角度来还原这种2D手绘的加工效果。

色彩：亮部和暗部，整体和局部的色彩对比关系

下图剧照是《吸血鬼猎人D》影片里面的。

我先从亮部、暗部，色彩对比关系来说。左边是剧照，右边是我从上面取出来的颜色，色板左边的那一条是亮部色，右边是暗部色。

一眼看上去，能大概感觉到它的色彩有一些变化，但变化不是太大，这就是日本传统动漫角度的一个实现方式。但从皮肤的角度来看，亮部的颜色，暗部的颜色，暗部相对偏暖一点。盔甲的颜色受到环境色的影响，所以有点偏冷。

如果用3D的角度直接做一个3D游戏的话，不需要考虑这些东西，因为有很多现成的光线追踪，或者说有些反弹就可以做这件事情。

从整体和局部色彩的对比关系来讲，如果同一个角色，在雨天、晴天和雪天，他会有不同的色彩变化。这个里面雨天和雪天会有点接近，因为都是属于一个漫反射的环境。晴天受到阳光的照射比较强烈，整体看起来颜色会跟另外两个对比度强一些。

这是扳机社2019年的《普罗米亚》电影。到了现在，日本动画颜色已经非常强烈了，这个片子的剧照和花絮非常华丽，比《吸血鬼猎人D》要强烈很多，但是看久了会视觉疲劳。

我用线连出来的也是亮部色和暗部色，从色板上明显就能看出来，一个是偏黄偏绿，偏橘色和偏粉红色，它把颜色饱和度的层级拉开得非常过，有一些颜色顶得非常高，是RGB色，用打印机的颜色有可能打印不出来。这就是他们追求的非常强烈的一个视觉效果。

理解了这种受众和审美以后，我们是如何把它用到游戏里面的？

这是我们游戏里面的角色卡洛琳，左边是她的原生状态，右边是她其中一个皮肤。左边这个角色全身都是一个非常冷的颜色，为了让她的色彩能够统一，暗部我们也故意把她调的是偏冷的紫色，但是色彩统一就会显得比较生硬。从色彩的角度来讲，她是黄色头发，我给她用了一个紫色暗部做衬托，她身上衣服的暗部是用的冷色来衬托，达到一个统一。

另外，她是校园教练，对比一下就能够看出来，头发、皮肤、和身体衣服的暗部都是统一的颜色，看起来像是沐浴在阳光中的一个状态。对应刚才我讲的，亮部和暗部要有一个色彩对比，是人为去处理的，同时整体要有一个色彩的饱和度的对比，这就是一个简单的技术说明。

卡通渲染的光线追踪

我在每一个主题，都会给它加一个进阶的内容，留一些空间，做一些净化，为了以后的技能提升，我们审美要有追求。

下图右边这张图是《爱，死亡和机器人》里面的一个静帧截图，这是偏美式的一个画面效果，角色白色的衬衣往上有一个反射光，看起来是暖色的，如果在正常的一个电影，或者说一个稍微写实一点的画面里面，你不会看到这么强烈的反光。这个是故意强调他的裤子或者说整个环境对他白衬衣暗部的反射影响。

左边是我做的一个模拟，我把它称为卡通渲染的光线追踪。因为它的光线追踪并不是基于一个特别物理、后者特别写实度的范围，而是我直接指定了一个渐变。

左边那张球下面的图，灯光颜色我给了暖黄色，模拟太阳的颜色。暗部的颜色做了从蓝到粉红的渐变——在暗部罩一层蓝色，就相当于罩一层冷色，这个冷色是用来跟亮部的暖黄色做对比的。

粉红色会产生什么效果？光线追踪会不停地反弹这个球的深色区域，让粉红色慢慢地渗透到暗部，包括它的投影、明暗交界线后面的区域。

《王牌战士》角色实验

这个工作我们也正在放到《王牌战士》角色实验当中。

左边是我们现在的《王牌战士》角色效果，右边是我们正在尝试中的画面效果。对比来看，之前的赛璐璐效果是很有特点和风格的，但是如果我们要继续往下走，想要更多的细节，或者说技能提升以后想要更多表现力的话，我们需要做出很多尝试，去找到它的一个平衡点。

我们正在进化中的，就是一些明暗交界线的色彩关系，包括高光区域的处理。现在这个角色的色彩里面，就已经包含了光线追踪的效果。但要在游戏里面实时地跑的话，我们会用到一些其他的技术来做，这是一个隐含的黑科技。

首先要用一个非实时渲染效果去做预演，然后再把它在引擎中去实现，这两个是相辅相成的，因为有很多游戏出来以后，我们做很多宣传片，海报等，都要在这个基础上去给它处理。这就代表了两种方向，一个是赛璐璐，非常传统的做法，一个是我们未来进化的思路和效果。

造型：脸、眼睛、嘴巴的布线

右边那张图是我们游戏内的渲染效果，右脸颊有一个小的倒三角形，稍微懂一点打光的朋友都能了解，这是一个比较经典的伦勃朗的三点光源产生的一个明中有暗、暗中有明的效果。如果卡通渲染想要达到这个效果的话，就是要谈到布线的问题。

看左边布线图，小的三角形，一定要切出来布线去卡住这个光影的轮廓，才能看到这个三角形。至于这个造型是什么样子，针对不同的角色有不同的情况，男性就要硬朗一点，女性就要小一点。但是这个小的桃心形是一定要切出来的。

其次看眼睛。

眼睛肯定是个球，但是它有一个凸透镜的效果，如果用卡通去做的话，要模拟玻璃晶状体的效果，那是非常消耗性能的一件事情。而且从赛璐璐的卡通效果来讲，它不需要做得那么的物理。所以这个眼球它其实是一个凹陷的面，光影看起来像是被玻璃球给折射了进去。

但是其实人的眼睛还有一个很重要的东西，就是瞳孔。瞳孔是非常传神的东西，不能被遮掉，所以这个瞳孔我们单独做的一个片放在前面。瞳孔前面还有一个非常明显的高光点，这个高光点能够表达人的心情，是心灵的窗口。高光点仔细看的话，我们做了一个模型在上面，可以用Blend Shape来驱动，让它晃动起来，显得水汪汪。

再看嘴巴。

嘴巴有什么黑科技或者不一样的点呢？嘴巴有一圈一圈的口轮匝肌的布线，动起来光影会比较自然。

如果看我们现在卡通渲染布线的话，其实从鼻底到嘴唇的诊断是没有圈线的。为什么要这么做呢？一是因为卡通角色在做表情，在说话的时候，那个动作是非常夸张的。二是我们的渲染方式不像传统的渲染方式，它的光影非常明确，右边是亮部，左边是暗部，中间只有一条线，没有明显的光滑过渡。

当这个人在做表情的时候，如果loop的圈线太多，会产生很多不必要的瑕疵，影响表现，所以说这个嘴巴需要这样去做。

还有一些比较小的点，每一个头发的下缘都有一个小切角，因为如果这个角色从正面打光的话，必须要给头发底部一个暗部，否则头发就会像一个薄薄的纸片贴在头皮上。

有了这种小的切角，我可以给它人为的做一个假光影，因为我默认这个角色不会经常做倒立，或者做非常奇怪的姿势，90%的状态就是站在那儿看着你。这个光影在正常状态下，都会有一个看起来比较自然的明暗关系。

造型：修型和增强光影

这是一个比较基础的黑科技处理方式，还有一些更进阶的，修型和增强光影。

这个是我们角色的出场视频。视频和真正游戏内的处理方式略有不同，视频的自由度可能更大一点，因为相对来说我只需要在这个镜头看起来对，就OK了，没必要360度转着看。如果是游戏内的话，就需要更严格一些。

下图，初始状态是左边这样，调整完是右边那样。首先炮筒，如果单纯从这个镜头来讲，整个炮口性价比最高、同时表现效果最好的状态一个处理方式就是直接画一张贴图，给它贴到炮口，匹配现在的光影处理就OK了，这个是视频里做得最经济划算，效果最好的方式。

其次角色的处理。因为我们其实还是在用3D来还原2D的效果，2D的效果完全可以去画的，但我们在3D中，如果这个角色动起来，不可能保证所有3D的光影都是非常完美的。

所以可以看到，我并没有开模型之间的自身投影，是用的面片做了遮挡，包括胳膊、袖子，都在用一些处理方式让它变得更好看。其实默认状态下的确看起来有一些效果不够好，所以这个收尾的过程是有很多工作要做的。

我借用一张日本杂志的图片来说明。这个增强透视我们游戏中也用到了，但我们游戏是比较偏，不会有这么强烈的变形，这种动画片就比较夸张，动作幅度、变形力度都比较大。

可以看到左边打了一拳，脸上肿起来了，这里其实直接放了一个mash在这儿。它天生有一个好处，因为光影、造型比较简单，直接把这个mash贴到脸上，看起来就像是脸上肿起来一块，我们在游戏中也经常会用到这种。

左边那张也是非常经典的用法。其实你如果自己拍过合影，你能感受到，当大家都站在一排拍的时候，远处有人拿相机拍，在两边的人已经被拉伸得没法看了，胖得不行。中间的人稍稍往后靠一点点，脸就显得很小，比较瘦。

右边那张，站在前面的脸和手，还有后面的人脸，其实都没有特别大的透视变形，我目测这个镜头FOV也就是50到60左右，就是正常的一个透视状态，所以必须得把它做一个空间上的处理才能让它的透视。如果只是单纯地调相机FOV的话，看起来效果就非常不好。

动画：动画中间帧，动态模糊

这整个部分都属于进阶的内容，我们传统一些游戏，动画中间帧都是直接用差值来算，或者是动画师去做。但如果我们要做这种二次元，或者说有一点性格的动画，它的动画中间帧就有很多的处理方式。

动画中间帧

下图是《爱，死亡和机器人》里边的一段追逐戏，一闪而过。如果你看过这个片子的话，可能这一下过去，你都没有意识到它中间发生什么，但是你能感觉到，他的情感的表达比较强烈。

这个是发生了什么事情呢？看下图，第一张还是正常的状态，这个人在跑，但是在追的时候，他非常着急想要追过去，面目狰狞。这后面三张图都直接给它夸张化了，动画中间帧如果插入这种效果，一闪而过的话，表现力非常地强，但是用的时候也要很控制才行，因为它是一个整体调性的表达。

黑白闪

黑白闪跟动画中间帧蛮像的，黑白闪可以认为是整个镜头的一个中间帧，黑白闪是日本的叫法，我觉得用下面这个片段跟大家讲更清楚一点。这个是《蜘蛛侠：平行宇宙》的中间一段，闪动的那一瞬间，它也是强化那一瞬间动作的夸张度，这个夸张度并不是说动作幅度有多大，而是那一瞬间的情感表达要够强烈。

它插入了很多美漫的表达方式，因为美漫在处理很强烈的性格的时候，会用一些比较潦草的线条来表现强烈的情感，这个就被用到电影里边。

我们在《王牌战士》的时候用得比较少黑白闪，《一人之下》在做表演的时候，比如说有在龙虎山打斗，下雨天突然间来一个闪电，整个画面都变成了黑白，但那个黑白可能就只有三四帧，一个黑白闪，那个味道马上就出来了。这个我把它归到特效里面，因为我们是特效同学来去做这件事情的。

帧内

还有一个叫法，帧内，可以认为是卡通版的动态模糊，如果你在photoshop或者说在游戏里面可以打开动态模糊的话，它其实就是一个功能，打开以后自带动态模糊，就能让他在运动的时候看起来有一些模糊的效果。

但要回到我们刚才看的动画片里边来说，在胶片上画一个模糊的感觉是比较难的，所以他们创造了一个词帧内，就是在两个帧之间，由于手的摆动形成了一个视觉残留。

我选了《蜘蛛侠：平行宇宙》，正好有个特别合适的例子。这个小孩是蜘蛛侠的一个精神集成，电影里边对他的表达是一个卡通的做法，相当于是二维动画版的动态模糊，把整条线都给非常具体地呈现出来了。

当这种帧内充斥在这个项目中的时候，你会能明显地感觉到跟写实游戏很不一样的地方。

表情线

最后有一个特效，表情线，脸上滴一滴汗，一头黑线，有点小红晕都是可以做的。

左边是表现出来效果，比较含蓄，右边不起眼的几条线，有红线、黑线，还有一些面部皮肤颜色的线，这是挺重要的一个东西。这个线我可以把它放大，放在屏幕的周围，它就变成了速度线。

仔细看他左边咧开嘴的嘴角，嘴角的线也是用我们的线摆上去的。这就回到刚才的问题，用3D模拟的时候，不可能在所有视角看起来都是那么的自然，我们需要有一些工具去修补它的瑕疵，比如说他咧开嘴以后，嘴巴的边缘缺少一些黑色的区域来跟他白色的牙齿做区分，我们只能用这种方式去弥补它，包括像刚才说的帧内也可以用这个东西去做。

总结

这个黑科技到底是什么呢？其实我做了这么久的项目以后，这种品类的项目我发现一点，首先你要理解二次元、或者说这种品类游戏的审美，能提炼出一些东西来，同时还需要一些技术的积累来去表达、去实现这些东西。

我后面提到的动画和特效的一些做法，都涉及到一个Blend Shape的技术。这个是我们自己花了很长时间去研究、去打磨，最后实现出来的效果。

所谓的黑科技，我们能够看到行业中已经开始越来越多的人去研究这个技术了，但其实它并没有成型，相对PBR的一个制作思路来说，我们这种卡通的做法充满了未知的变数。我说这是黑科技，其实就是我们自己尝试在寻找各种各样的工具、各种各样的道路来实现我们想要达到的效果。

魔方在做的很多项目，有国漫动画IP，有日本动画IP，他们都有一整套传统动画的审美，这跟写实的游戏和电影都是不一样的，我们就想能够通过这种我们研究出来的工具，把一个非常好的画面效果呈现给大家。

Q&A

Q：卡通渲染在画面表现力上有什么优势，玩家为什么会认可这种表现形式？

你可以把它类比成影视行业，卡通渲染现在在做的事情就是在还原一个影视行业有过的表现形式，比如说我们看过皮克斯的动画片，也看过梦工厂的动画片，它跟传统的、或者更加写实的动画是不一样的，有更强烈的表现力，有更夸张的表现手法，而且色彩感也会比较强，有很强烈的个人风格。

如果你对这种表现非常有兴趣的话，你会体会到一种跟传统、或者跟写实题材的作品不一样的感受，我们想做到的也是这么一件事情。现在市场上，你在做一个作品的时候，你有自己的态度、有自己的表达，如果这种态度和表达能够获得很好的效果的话，玩家会认可这种表现形式。