腾讯游戏开发者大会：王牌战士主美谢海天分享二次元游戏黑科技

2020年12月9日，由腾讯游戏学院主办的第四届腾讯游戏开发者大会（TGDC）在线上举行。腾讯互娱魔方工作室群《王牌战士》主创艺术家谢海天发表了题为《从画皮到画骨——盘点二次元游戏中的黑科技》的主题演讲。以下为视频及文字实录：

大家好，我叫谢海天，很高兴在这个平台上跟大家分享我近期的作品。

本次分享的主题是《从画皮到画骨——二次元游戏黑科技盘点》，我将从色彩、造型、动画特效三个角度跟大家聊聊什么是黑科技。

这里给大家放一个动画，这是2000年的日本动漫电影《吸血鬼猎人D》。放出这个动画的原因是我们在制作《王牌战士》的时候参考了一些这个动画。

这部电影有几点很有意思，首先它是一部日本动画电影，但是也在美国院线上映，所以代表了欧美日本的一些审美倾向；其次它是一部逐帧2D动画电影，里面涉及了很多黑科技。

这次我分享的黑科技主题可以用一句话来概括：“用3D技术还原2D动画片效果”。这里面有两个重点，一个是3D技术，一个是2D动画片效果。3D技术就是我们刚才看到的，在赛璐珞屏幕上采用逐帧手绘的方式。

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

颜色

先从色彩部分开始说吧，这也是电影里的剧照，先从明暗关系和色彩对比说起。

左边是剧照，右边是我从剧照中截取的颜色。乍一看，右边的调色盘左边是亮色，右边是暗色。其实一眼望去，大致能感觉到它的颜色有一些变化，但变化不是太大。这是一种实现传统日本动漫角度的方式。

但是从皮肤的角度看，暗部相对来说比较暖，而从盔甲的颜色来看，受到环境光颜色的影响，所以有点冷。如果你是直接从 3D 角度制作 3D 游戏的话，就不需要考虑这些东西了，因为有很多现成的光线追踪，或者一些反弹，可以做到这一点。但这是我们后面会谈到如何处理的问题。

这张图展示了整体和局部色彩对比的关系，同一个人物在下雨天、晴天、下雪天，色彩变化是不一样的。这个也很容易理解，哪怕是正常的电影，一个人的色彩变化也会很多。这张图中，下雨天和下雪天有些相似，因为都是漫反射环境。晴天由于阳光强烈，整体色彩和对比会更强烈一些。

这是Trigger的Promia电影，现在日本动画的色彩已经很浓烈了，有兴趣的可以找一些剧照和幕后花絮，很华丽，华丽程度比上一部要强很多，不过看久了容易视觉疲劳。

这里很明显我是用线条把明暗的颜色连接起来的。从色板中可以明显看出，一个是偏黄的，一个是偏绿的，一个是偏橙的，一个是偏粉的。把这个颜色的饱和度拉得很远了。可以看到有些颜色的饱和度很高，是RGB颜色。打印机的颜色可能打印不出来，所以这个如果打印出来可能会有偏色。这就是他们追求的非常强烈的视觉效果。

了解了这个受众和审美之后，我们该如何将其应用到游戏中呢？这是我们游戏中的角色：Caroline。左侧是她的原始状态，右侧是她的皮肤之一。

大家可以看到左边的角色，她全身的色调非常冷，包括暗部，我们特意把暗部调整成冷紫色，就是为了让她的色彩统一。但这样一来，她的色彩就会显得比较死板。所以虽然她有一头黄发，但我给她加了很重的粉色，其实就是紫色的暗部，作为陪衬。然后她皮肤和衣服的暗部都用冷色调来衬托，达到统一的效果。

另外一个是校园教练，通过对比他的头发，我们可以看到他的头发、皮肤、身体衣服的暗色部分都是一个颜色，让他看上去就像沐浴在阳光下一样。这对应了我刚才说的，亮部和暗部之间要有颜色对比，这是人工处理过的。同时，整体上也要有颜色饱和度的对比。这个是简单的技术描述，我就不多说了。

左边第一张图是实现的效果，第二张图是我们对暗色做的处理。可以看到头发的色彩、饱和度和色彩倾向性都非常强烈。最右边的图可以认为是一个shader，其中一个处理就是将黑色和白色分离出来作为阴影。在黑色区域，将中间的图片叠加，并与我们的亮色混合，得到最终的效果。

我会在每个主题中添加进阶的内容，我们会在这个基础上留出一些空间，做一些净化，这是为了以后的技能提升。我们要追求美观，所以我们会相应地做一些尝试。

右图是《爱、死亡和机器人》的剧照。这是一张美式风格的画面，但角色的白衬衫有向上的反射，看起来很温暖。在普通电影或稍微逼真的画面中，你不会看到如此强烈的反射。在这里，角色的裤子被刻意强调，或者整个环境对他白衬衫暗部的反射受到影响。

左边的是我做的模拟，可以称之为用于卡通渲染的光线追踪，因为它的光线追踪不是根据某个特别物理或者现实的范围，而是直接给它赋值一个渐变。

我们来看左边球下面的图片，我给光添加了一个暖黄色，模拟太阳的颜色，在暗的部分做了一个从蓝色到粉色的渐变，也就是在暗的部分覆盖了一层蓝色和冷色，这个冷色是用来和亮的部分的暖黄色形成对比的。

粉红色有什么效果？光线追踪会从球的暗区反弹，让粉红色慢慢渗透到暗区，包括它的投影和明暗边界后面的区域。你会看到更强烈的效果，我们目前正在角色实验中使用这项工作。

下面左边是我们目前制作的王牌战士角色特效，右边是我们正在尝试的画面特效。通过对比，我们可以看出之前的赛璐珞特效很有特色，很有风格，但如果我们想更进一步，想要更多的细节，或者想要更多的表现力，就需要做更多的尝试，找到一个平衡点。

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

这是一个隐性的黑科技，首先要用非实时渲染的效果进行预览，然后在引擎中实现。这两个步骤也是相辅相成的，因为我们做宣传片、海报，所以要在这个基础上再处理。这代表了两个方向，一个是cel，很传统的一种做法；另一个是我们未来想要进化的理念和效果。

造型

我们从这个图的角度来讲一下建模。首先看右边这个图，这个角色是我们游戏内的渲染效果，从这个侧面看可以看到右脸颊上有一个小小的倒三角形。这个效果可不是随随便便就能做出来的东西。稍微懂点灯光的朋友都能明白，这是一个经典的伦勃朗三点光源，产生明中有暗，暗中有亮的效果。卡通渲染要想达到这个效果，就得讲布线。

可以看接线图，小三角形必须剪下来，接线才能捕捉到光影的轮廓，这样才能看到三角形。至于形状是什么样子，可能不同角色会不一样，男的要硬朗点，女的要小点。但是这个小心形一定要剪下来。

接下来我们来看看眼睛。眼睛肯定是球形的，但是有凸透镜效果。如果使用卡通效果，就必须模拟透镜效果，这是非常耗性能的事情。而从胶片卡通效果的角度来看，它不需要如此物理化。

所以我们把眼球做成凹的，它是一个凹面。现在看它的光影，就像是光被折射到玻璃球里面一样。

但其实人的眼睛里还有一个非常重要的点——瞳孔。瞳孔的表现力非常强，不能被遮住，所以我们把瞳孔单独做了一块，放在前面。

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

再往下看嘴巴，如果对这里的布线稍微了解一点的话，就会知道嘴巴和眼球都有口轮匝和眼轮匝的圆圈，这样在移动的时候光影看起来会更自然，其实我们现在的卡通渲染布线中，从鼻子底部到嘴唇是没有圆圈的。

为什么要这么做呢？第一是因为卡通人物在做表情、说话的时候，动作有时候会非常夸张；第二，我们的渲染方式不像传统的方法，它的光影非常分明，你可以看到右边是亮的部分，左边是暗的部分，中间只有一条线的过渡，而不是明显的平滑过渡。这个人在做表情的时候，如果环线太多，就会产生很多不必要的缺陷，影响表现。所以这就是为什么嘴巴需要这样渲染的原因。

还有一些更小的点，比如每根头发的底部边缘有一个小的切角。如果这个角色是从正面打光的，你必须给头发的底部一个暗区，否则头发就会像一张薄纸一样贴在头上。有了这个小切角，我可以人为地为它创造一个假的光影，因为我假设这个角色不会经常做一些倒立或奇怪的光影姿势，而且 90% 的时间他都站在那里看着你。

动画效果

还有一些更高级的技术，比如重塑和增强光影，这是我们在经历了许多挫折之后才实现的。我们先来看看这个。这是我们五星角色的出场画面。

视频里和真实游戏中的处理方式略有不同，视频里可能自由度更大一些，因为相对来说我这个镜头里只要往右看就行了，不需要360度旋转。但在游戏中就需要更严格一些，如果你现在觉得正常的话我就给你看没有处理的状态。

初始状态左边是这样的，调整后右边是这样的，首先我们来看枪管，如果只看这个镜头的话，枪口性价比最高，表现最好的就是直接画一个贴图，贴到枪口上，配合现在的光影处理，这是最省钱，性价比最高，也是视频里效果最好的做法。

其次，人物处理通过对比就能看出来。为什么要这么处理呢？因为我们其实就是在用3D来还原2D的效果。2D的效果可以画出来，但是3D的话，人物如果动了，转了，我可不敢保证它所有的3D光影都是完美的。

所以大家可以看到我没有打开模型之间的自投影，而是用补丁来遮挡。包括手臂和袖子，我都用了一些处理方法让它们看起来更好看。其实在默认状态下，它确实看起来有点糟糕，所以在整理过程中还有很多工作要做。

这里借用一张日本杂志的图片来说明一下，我们游戏里确实用到了这种增强视角。但是我们的游戏比较偏向热血漫画，所以不会有这么强烈的变形，而这种漫画比较夸张，它的活动范围和变形都比较大。

左边可以看到脸被打了一拳之后肿起来了。其实我这里就直接放了一个mesh。它有一个先天的优势，因为光照和建模比较简单，我就直接把mesh放在脸上，看起来就是一张肿起来的脸。我们在游戏中经常用这种方法。

右图中，人物其实是脸和手站在最前面，后面的脸其实没有特别变形。从视觉上看，这个镜头的 FOV 大概是正常透视的 50 到 60 度，所以必须做一个空间处理。如果现在单纯的调整摄像机 FOV，效果看起来会很糟糕。这也是视频中用到的技巧。或者也可以用在游戏中，但镜头必须固定。

至于动画效果，这一部分是比较高级的内容，也是游戏的一个难点，我们一些传统的游戏，动画的中间帧一般都是直接用差值计算出来的，或者也是动画师自己做的。

但如果我们要做这种二维动画，或者有点个性的动画，它的中间帧的处理方式就有很多了。这是《爱、死亡和机器人》里的一场追逐戏，感觉就像一闪而过。

即便你看过这部电影，可能也意识不到中间发生了什么，但是你可以感受到他的情感表达非常强烈。

看这张图，第一张还是正常，人跑着，但是追着的时候很焦急很凶猛，下面三张图就直接夸张了，如果把这个效果插到动画中间一帧一闪而过，表情会非常强烈，不过用的时候也要控制，因为这是整体色调的表达。

这种中间帧的动画在我们的游戏中也有使用，但是没有那么强烈。黑白闪和刚才的中间帧动画很像。黑白闪可以算是整个镜头的中间帧。日本人叫黑白闪，但我觉得用这个片段来解释会更清楚。

这是《蜘蛛侠：平行宇宙》中间的一个场景，很明显闪动的瞬间也加强了动作的夸张感，这个夸张不是指动作有多大，而是指那一刻的情绪表达要足够强烈。

其实这部电影用了很多美漫的表达方式，美漫在处理性格强势的角色时，会用一些比较草率的台词，电影里就用到了这些台词。

《王牌战士》中黑白闪光灯用的比较少，但《一人之下》中用到了，比如龙虎山打斗的时候，下雨天突然出现闪电，整个画面就变成黑白的，但这里黑白可能只有三四帧，那一刻，啪，黑白一闪，味道立马就出来了。

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

在两帧之间，手会摆动，这会形成视觉残留，所以手并没有被整体画出来。《蜘蛛侠：平行宇宙》是一个特别适合的例子，因为这个孩子，在这个平行宇宙中，有着一个二维蜘蛛侠的精神融合，电影里她的表情都是卡通式的，可能转瞬即逝。

我截了几张图，相当于它的2D动画版，加上了动态模糊的效果，把整条线呈现的非常具体，当这种帧数充斥在项目中的时候，你会很明显的感觉到它和写实游戏的区别。

我刚才说的所有动画，从中间一帧到黑白闪，再到帧，都是用我刚才说的技巧。最后还有一个比较有意思的效果，大家应该很熟悉——表情线。脸上的一滴汗，一条黑线，一点红晕，都可以做出来。

这张图片的左侧显示了效果，非常微妙。右侧不显眼的线条，一些红线，一些黑线，还有一些面部肤色的线条，相当重要。我可以放大这条线并将其放在屏幕周围，它就变成了一条速度线。

仔细看他左边的嘴角，嘴角的线条其实是我们自己画的，用3D模拟的时候不可能从各个角度看起来都这么自然，需要一些工具来修补缺陷，比如嘴巴张开的时候，边缘会缺少黑色区域来和他的白牙区分开，只能用这个方法来弥补，这个工具也可以用于上面说的帧内。

最后我来总结一下这个黑科技到底是什么。做了这么久这个项目，我发现首先你需要了解整个二次元世界，或者说这一类游戏的美学，然后才能提炼出一些东西。同时你还需要一些技术积累才能实现这些东西。后面我提到的一些动画、特效，都涉及到一个Blend Shape技术的使用，我们也花了很多时间去研究和打磨，最终才实现了这些效果。

我们在做的时候有时候会觉得很迷茫，所谓黑科技是因为我们在做的时候，没有谁之前做过，当然我们也能看到行业内有很多人在研究这些东西，也开始有越来越多的人研究这个技术。但其实它还没有成型，相比于PBR的制作思路，我们的动画方法其实充满了未知的变数。我说这个是黑科技，其实就是我们自己的尝试，寻找各种工具，各种方式来实现我们想要达到的效果。

我们想要达到什么样的效果呢？回到最开始说的效果，Magic Cube现在在做的项目有很多，有中国动画IP，也有日本动画IP，它们都有一套传统的动画美学，跟写实的游戏、电影不一样。我们可以通过这个研究工具，把非常好的画面效果呈现给大家，基本上就是我今天想跟大家分享的内容。