BIGC北京国际游戏创造大会每年9月底在北京举办，大会致力于打造游戏行业经验同享的平台，通过制作人、内容、技术、硬件、发行平台、商业营销等路线的经验同享，促进中国游戏产业健壮给上进步。

有些用于主机端的特效工具和插件可以和手机游戏工具相结合，从而进步手机游戏特效质量和制作效率。

FunPlus首席特效专家张韶勇对此感受颇深。他拥有16年特效职业经验，此前在海外做主机游戏的特效，回国后曾在网易阿里等企业负责手机游戏的特效，目前加入了FunPlus，负责美术特效的职业。

在现在的北京国际游戏创造大会（BIGC）上，张韶勇同享了他对游戏特效诀窍-像素动画制作的心得。不仅从美术角度思索怎样在手机游戏上呈现出更好的美术表现，还尝试引入主机端的开发技术，让冗杂的特效制作经过简化，到快速落地在手机游戏中。

在他看来，艺术挑战技术，技术启发艺术。新的技术和工具的出现，为艺术创作的实现带来新的也许性和便捷。数字艺术的创作常常受限于游戏开发所运用的引擎和插件。然而如果美术多一点对数学的领会，就会发现很多工具是相通的。

一些在主机游戏中运用的技术可以消化，简化或局部地应用到手机游戏开发中。比如 FluidNinjia 是在 Unreal engine 里运用的插件，然而它输出的序列帧流程图等资源可以在ASE中运用。这样大家就可以运用 Unreal Cascade，Niagara 粒子体系来设计特效需要的动态，通过 FluidNinjia 输出贴图资源。将其材质在ASE中简化重构。

这样把跨平台的工具融会贯通地运用，极大扩展了特效的创作和实现的空间。这需要特效师对工具后面的数学多一点领会。

下面内容是通过整理的演讲实录：

今天和大家同享的内容是：「像素动画的原理和应用」。我很想把它讲到就算外行也能弄懂。同时也通过这个案例，和大家同享一下美术岗位如何用形象思考来解释数学。

我做了16年的特效。之前在美国、加拿大做过《使命召唤》《暗黑血统》等主机游戏，回国之后先后在网易，阿里游戏，最后来到FunPlus，现在主要负责手机游戏的项目。

从主机游戏到手机游戏转变，我本能地思考如何把一些主机的游戏技术应用到手机游戏上面。其中的壹个典型例子就是像素动画在手机游戏上的应用。

我是一名特效师，这个岗位也可以叫做特效动画师。动画师动的是人物的胳膊和腿，而特效师动的图片的像素，由于大多数时候，大家都是利用像素运动来模拟各种特效。

比如这个《星空》。现在大家看到的是运动的数字版，它就代表了像素动画要呈现的效果。

要实现这种效果并不难，最近有个叫Fluid Ninja的Unreal的插件，特效师可以应用Cascade，Niagara粒子体系，贴图，或者力场在其中模拟出大家想要的运动形式，产出流程图等贴图资源，接着再应用到Unity的ASE材质中。这个经过给了特效师设计像素动画的极大自在，而且特别便捷。

大家先讲一下像素动画的基本原理：

每一张图片其实都是由像素构成的。假如图片的分辨率是1024x1024，那么这1024个像素点都有其对应的坐标。

大家可以用一张“流程图”来操纵一张图片像素坐标的运动路线和强度，以得到大家想要的运动形式。

它涉及到两个最基本的概念：

其一是平面坐标系，这个就是上下左右4个路线。

其二，通道。大家的图片有百万种颜色都是由RGB三个不同的通道组合产生的。

那么大家可以试着将他们合在一起：把红绿通道分别对应坐标系的X值和Y值，这样就可以把图片的「灰度」和坐标系的数值对应起来。

坐标系大家都很清楚。下图在坐标系中左下角是（0,0），右上角可以设为（1,1），这就是一张相片最基本的的坐标系。当然，PC里的坐标有些不太一样，它是左上角（0,0），右下（1,1）。

然而为了产生上下左右四个路线的运动，大家就得处理出正值和负值的不同差异。

大家让X和Y分别减去0.5，那么我的图片就能居中，中间点到了（0, 0）的位置；

原本（0, 1）的区间就变成（-0.5, 0.5）的区间，由此大家就能拥有正负两个路线的运动。

这张图是 Unreal 和 Unity 中的坐标节点图标：

你看到当中红绿的过度，其实就是两个通道灰度从黑到白的渐变经过，左边在红色通道里面，大家将黑色配置为0，白色配置为1，那么就有0到1的渐变；右边的绿色通道也同理，不过大家将它的位置配置为纵给，从黑色0到白色1。

这就是红绿通道的灰度值，对应坐标系的值。

了解了颜色的坐标运动，大家简单地描述成这样：

通常图片的灰度值是0到256，在流程图的红色通道里面，黑色产生给右的运动，白色给左运动；如果是绿色通道就是黑色给上，白色给下。128的中间灰为静止情形。换句话说，它不会产生任何的运动。

那么举壹个实例，假如大家有这样一张图A：

如何让他做左右运动成这样？

或者又如何如此上下运动呢？

答案就是做出一张流程图。

这张流程图就是黑白两个条组成，红色通道、绿色通道是相同的黑白条（由于不用其他路线运动，因此大家把蓝色通道配置为黑色）。

大家现在回头看一下，这个左右运动就是红色通道起影响（绿色通道的灰度值是128的中间灰）；而上下运动就是绿色通道起了影响（红色通道的灰度值是128的中间灰）。

这张图就可以解释背后的原理：当大家需要左右运动的时候，大家让红色通有黑白，让绿色通道是128灰度，不产生运动。

同样的图，大家将红色通道配置为128的灰度，绿色通道有黑白，那么他只有上下运动。

基于这个原理，大家找3张图来说明实操。平常职业当中，大家经常要做河流、烟雾、岩浆的运动，这几张静止的图片，几分钟之内就可以做成运动的图片。

大家只需要在Flowmap Painter软件里，像手指划过一样，顺着运动路线抹一下，它就会根据轨迹流动。

大家打开“涂抹”出来的流程图，原理就很显而易见了：由于除了大家需要运动的部分，其他部分都是128的灰度，运动着的部分就是比中间灰或亮或暗一些。

下面这个是像素动画用到的材质球，我用一张流程图扭曲了自己的照片。为了说明白一些，我将它分为ABC三个部分。

A部分看似复杂，其实只是加减乘除一样的算法，目的就是让图片的坐标移动：

One Minus——减1，其实就是首先把（0,0）放到左上角去，符合PC的坐标制度；Append是将横纵两个路线坐标合在一起；Flow_Strength则是控制扭曲强度；

下面是B部分，Time，也是很重要的节点。打个比方，大家这里有个坐标，时刻就是穿过0的经过，往下是过去，往上是未来，它是一条无限延伸的对角线。

而大家想获取重复的效果，就是让时刻来回重复，就可以用Fract节点去掉整数。

让时刻这一条线，从0开始，0.1走到0.9，到1的时候再重复回到0。意味着时刻永远不会有的整数，他只会在0.1 - 0.9之间往复。这就产生了循环。

B部分和A部分是一样的运动，只是慢了0.5秒。然而可以看到都有跳帧的现象。大家用淡入淡出的遮罩来过滤掉跳帧部分——也就是C部分的职业。

试着把它还原成更形象的坐标图，这是Time原始的样子：

大家第一步把它变成小数往复：

再减去0.5以获取负值：

再用Abs把负值翻正过来，让它连续：

最后再乘以2来增大波动幅度，形成连续的波浪线。

最终大家得到这样壹个淡入淡出的遮罩图融合A和B两部分，形成无缝循环。

像素动画可以用到很多的地方。比如说这个星球的游戏界面里，巨型风暴原本是一张静止的图片。

银河的运动、太阳的火焰、木星的风暴，全部都是用这种材质球处理的，而且效率特别高

在这个特效里，一张很多小点的黑白图和一张螺旋形状的流程图，两者合在一起，便可以做出壹个近似黑洞的旋转结局。

这是大家的一款三消游戏，里面云的动态、怪物的斗篷、水的运动，都用到了这种Flowmap效果。

这个将怪物吸进瓶子的效果，烟雾消散的效果也是用Flowmap处理的像素动画。

制作流程图有很多讨巧的方式：

拿这张图片来举例，先将原图导入Flowmap Painter里面，用涂抹工具顺着运动路线抹几下，于是就可以导出这样一张流程图，特别钟差点。

如果是像木星上这么复杂的风暴运动我肯定是没有时刻顺着路线一点点抹的，太复杂了，不过这也有办法。

可以用PS将它的红色通道灰度调整，不动的部分刷成128灰度；接着把绿色通黑白反相，把不想运动的地方用128灰度的刷一刷，于是，几分钟差点的时刻就得到了一张木星风暴的流程图。

再比如我只有这样壹个灰度图，它的运动也是有很多细节：

可以用CrazyBump拿这张灰度图直接产生Normal Map，我把蓝色通道配置黑的，只用红绿通道，就变成了流程图：

不过最酷的还是用FluidNinja这个插件，如火球、烟雾、爆炸，流体等各种运动，大家都可以用3种方法百分百地控制生产它们的运动。

第一种就是粒子体系。无非是用运动的粒子产生不同的黑白间隔比例，配上算法，就有了种种流体模拟的效果。不光是单帧，也可以配置成序列帧。第二种是用黑白图片，第三种是用力场。它让像素动画特效设计增加了极大的空间。

大家做手机游戏由于包体的大致会受到控制，特效贴图用512x512就会是常大的图了，尤其大家做序列帧的时候。比如说512x512，大家把它分割成4x4=16帧，每个单位都是256，低于这个值，手机上就会看得很模糊。

游戏是每秒30帧播放，16帧的序列图勉强可以在1s内让你觉得特效过得去。现在有了序列帧的流动图，大家就可以将它做到几倍的特效时长。

比如壹个爆炸特效，左边这个爆炸是用8x8 64的序列帧，2秒的特效，很顺滑。但假如这一个原子弹爆炸，让你做30s以上， 1秒就是30帧，30秒就得900帧，那得多大的序列帧贴图啊？右边这个就是用了序列帧流程图的效果，很长但没有卡顿。

材质球就会稍微复杂一些：

目的是用序列帧的流动图为序列帧增加中间帧：

基本道理就是将当前帧往外扭曲，接着下一帧往内扭曲，决定因素帧缩紧放大后，就出现了两个中间帧，帧数变多，画面天然变丝滑。

最后拓展资料一下像素动画的优缺点：

优点是可以很快、精确地产生大家想要的运动。方式特别简单，制作流程图可以用Flowmap Painter、PS、CrazyBump，还有现在最酷的FluidNinja，借助它大家可以把Unreal、Unity结合起来运用。

序列帧流动图除了产生很细节的运动以外，可以大幅度降低大家的图片大致。

像素动画的的缺点就是动作是重复的。