纸片人老婆顺滑动作背后十几年图形技术成果

最近两年，很多游戏都突然变得动感了起来。程度轻的，立绘和 CG 开始有了「呼吸」的效果，衣饰会像是在风中飘动。而程度高的，则各种画面上的元素都在扭动。

大概这个感觉（来源：Dao Le Trong）

Steam 上的名作《Nekopara》，算是比较早利用了这种动画技术的游戏之一。这部已经卖出了 200 万套，创造了销售奇迹的美少女游戏，一个重要的功能就是可以让二维的女性角色动起来。

「那个会抖动的东西」—— 大家都懂的羞耻成就

只要按下预设的按键，小姐姐们充满胶原蛋白的肉体就会展现热辣的弹力。不知有多少懵懂的青春少年，在这柔软的天堂中迷失了自我。

《Nekopara》使用的动画系统不是 Live2D，而是另一款类似的 E-mote

也许有人会说：「这就是 Live2D 嘛！」

这种说法对也不对，作为此类技术的先行者，Live2D 很多时候都会被简单地当成这种动画技术的代言，不过这种二维动画技术的真实历史，可就要稍微复杂一点了。

遇到瓶颈

早在 1992 年的《饿狼传说 2》中，初次登场的不知火舞就已经用自己弹性十足的躯体吸引着纯真或者不纯真的少年们，但是在之后的十几年里，像老格斗、横版清关游戏那样，人物动作鲜活的二维游戏反而越来越少。

这是因为，过去游戏里的「精灵」（Sprite）动画系统，核心还是像传统的二维动画一样，是通过一帧一帧有微妙差别的连续画面来实现人物动作的。

这样的动画有两个最主要的缺点。

第一个就是开发时间比较长，整套动画都需要画师一帧一帧来制作。不但对画师的技术水平要求很高，美术资源之间的风格协调也比较麻烦。

另外一个缺点就是资源容量太大。图片素材通常是游戏中占据存储容量最大的资源，远远超过三维模型和各种程序文件。而传统的帧动画，如果想要让画面足够流畅，每秒都要有 10 张以上的图片，要求更高的话甚至能到 30 张以上，积累下来的图片容量就很可观了。

高质量的动画中短短一句话，就需要 50 多张图片来表现（来源：Animator’s Survival Kit, Richard Williams）

在不知火舞的身体只有很少像素点的时代，这种二维动画制作方式还能够被承受，但随着游戏画面品质和分辨率的提升，制作时间和成本也迅速飙升，已经远远比不上素材可以轻易组合复用的三维游戏了。

虽然使用骨骼动画或者拼接动画可以比较快地表现动作，但是由于作为元件的位图本身是固定死的，很多效果还是要靠帧动画来解决。

《奥丁领域》是骨骼动画结合帧动画的二维游戏的一个代表

因此，在很长一段时间里面，游戏里假如出现了比较精美的二维画面，通常只局限于拿不同表情的立绘播个幻灯片来表现一下人物，或者关键的剧情里补上几张 CG，满足一下最基本的叙事需求。

迎来曙光

不过二维绘画这种几乎和人类历史一样长的艺术形式，有着自己的特点和生命力。

受限于电脑硬件、技术和相应工具软件的限制，游戏中再精美尖端的三维画面，也比不上二维绘画细腻丰富，风格多样。

三维建模难以还原细致的手绘画面（来源：Dao Le Trong）

另外一方面，随着二次元萌文化崛起而变得无处不在的纸片人们，并不太适合用三维模型来表现。

大家喜闻乐见的「萌系」、「二次元」画风，根本不符合透视和解剖学。「二次元」风格人物的在不同角度下的美感，很多都要靠有技巧地处理造型来解决。

这样的可爱造型其实并不太严格符合透视和解剖学

如果用三维模型还原这种脑壳大下巴尖的头骨造型，从特定角度看过去，配上三维引擎的光照特点，就显得十分惊悚吓人了。

严谨的转面大概会是这种感觉，emmm…...

有没有办法，可以既廉价又有效地让「二次元」的人物呈现出三维的动感呢？。

第一个突破点，是矢量图形技术。我们常见的由像素组成的图片，比如 JPEG、PNG 这种的，都叫做位图（Bitmap）。矢量图形和传统的位图不同，反而和三维建模的原理相似，是靠虚拟空间中的坐标来计算画面应该如何被投射到屏幕上。

和三维图像的成像原理相似，矢量图形只是虚拟空间的一系列坐标，被投射到屏幕上

矢量图形不像传统的位图绘画方式，需要用各种工具人为指定每个像素应该显示什么颜色。计算机看不懂位图里每个像素的作用和意义，但是却能明白如何调整和计算矢量图坐标数值的变化。矢量图形也因此可以很方便地进行变形和填色，而不用担心填色范围出错，或者图像质量损失。

这就是为什么 Flash 可以计算出非常顺滑的变形动画。这种动画完理论上想要多少中间帧就可以有多少中间帧，效率和效果在很多情况下远远胜过用手一张一张绘制。

矢量图形的变形相对简单，效果也十分顺滑（来源：Toondra）

有一些聪明人就想到，可不可以使用矢量图形易于变形的特点，来让二维画面通过变形来实现像三维图形一样的转面呢？毕竟在二维平面上所表现的所谓的「空间感」和「立体感」，说白了也不过就是遵循透视原则安排画面来形成的视觉错觉而已。

并没有一个真正的「立方体」在转动，只有几根线条在变形而已

这就是最早的《Live2D Vector》。这套软件通过对矢量图片进行变形和转换，可以让简单的平面角色图片实现三维感觉的转头和移动效果。

由于 Live2D Vector 的案例已经不可考，本图为 Live2D Cubism 的早期作品《条码女友》

新的发展

虽然这样的角色只能进行有限度的活动，但是已经比起静态的图片或者幻灯片好太多。普通人也可以通过软件调整参数甚至自采素材来定制属于自己的会动的纸片人妹子。

通过自采的素材来制作的 Live2D 角色（来源：brian_tsui）

当然，矢量图片毕竟还是有很多限制。虽然占用容量资源减小了，但是复杂画面的呈现会消耗很多 CPU 运算资源。而且矢量图片也没法呈现日后越来越流行的，被称为「厚涂风格」的油画、水粉风格的画面。

在 2010 年前后，正是移动互联网和独立游戏迅速发展的时代。个人开者对新的二维、三维工具需求很高。很快二维动画技术就在其他方向上有所发展。

最新的思路就是将位图转化为网格模型，从而把位图和矢量模型结合起来，通过分配和计算模型上每个节点（正式的叫法是「顶点」）对图片的影响力，来决定在变形时位图上的像素应该如何被重新安排。

位图在标记转化以后，就可以作为矢量模型使用（来源：Dao Le Trong）

任何图片，只要经过正确的标记和处理，都可以被转化成可以被调整和变形的矢量模型。这种做法不但减轻了制作动态元素的成本，还可以完整保留图片本身的绘画风格。在此之上，如果再结合已经十分成熟的骨骼动画系统，就能用相对低廉的成本和工作量，制作出媲美大成本手绘帧动画的最终表现效果。

结合骨骼系统后的表现效果十分出色（来源：Dao Le Trong）

到今天，这种技术的运用已经十分广泛了。在《英雄联盟》的登录界面上，手机舰娘枪娘游戏的立绘里，在美少女游戏的动态 CG 中，都可以看到位图矢量变形的身影。各种虚拟主播、虚拟偶像，使用矢量位图变形技术的也不少。

《龙之皇冠》里出色的动画效果让人印象深刻

由于主流游戏引擎、影视软件对于这种表现方式的支持越来越成熟，这种一切会都动起来的效果在未来只会变得更加普遍。考虑到新版本的 Live2D 已经支持 360 度的人物旋转和 VR，相信以后的还会有更多令人期待的发（lao）展（po）在等着我们。