“BIGC嘉賓說”——FunPlus首席特效專家張韶勇

BIGC北京國際游戲創(chuàng)新大會(huì)每年9月底在北京舉辦，大會(huì)致力于打造游戲行業(yè)經(jīng)驗(yàn)分享的平臺(tái)，通過制作人、內(nèi)容、技術(shù)、硬件、發(fā)行平臺(tái)、商業(yè)營銷等方向的經(jīng)驗(yàn)分享，促進(jìn)中國游戲產(chǎn)業(yè)健康向上發(fā)展。

有些用于主機(jī)端的特效工具和插件可以和手游工具相結(jié)合，從而提高手游特效品質(zhì)和制作效率。

FunPlus首席特效專家張韶勇對此感受頗深。他擁有16年特效工作經(jīng)驗(yàn)，此前在海外做主機(jī)游戲的特效，回國后曾在網(wǎng)易阿里等公司負(fù)責(zé)手游的特效，目前加入了FunPlus，負(fù)責(zé)美術(shù)特效的工作。

在今年的北京國際游戲創(chuàng)新大會(huì)（BIGC）上，張韶勇分享了他對游戲特效技巧-像素動(dòng)畫制作的心得。不僅從美術(shù)角度思考如何在手游上呈現(xiàn)出更好的美術(shù)表現(xiàn)，還嘗試引入主機(jī)端的開發(fā)技術(shù)，讓冗雜的特效制作過程簡化，到快速落地在手游中。

在他看來，藝術(shù)挑戰(zhàn)技術(shù)，技術(shù)啟發(fā)藝術(shù)。新的技術(shù)和工具的出現(xiàn)，為藝術(shù)創(chuàng)作的實(shí)現(xiàn)帶來新的可能性和便捷。數(shù)字藝術(shù)的創(chuàng)作常常受限于游戲開發(fā)所使用的引擎和插件。但是如果美術(shù)多一點(diǎn)對數(shù)學(xué)的理解，就會(huì)發(fā)現(xiàn)很多工具是相通的。

一些在主機(jī)游戲中使用的技術(shù)可以消化，簡化或局部地應(yīng)用到手游開發(fā)中。比如 FluidNinjia 是在 Unreal engine 里使用的插件，但是它輸出的序列幀流程圖等資源可以在ASE中使用。這樣我們就可以使用 Unreal Cascade，Niagara 粒子系統(tǒng)來設(shè)計(jì)特效需要的動(dòng)態(tài)，通過 FluidNinjia 輸出貼圖資源。將其材質(zhì)在ASE中簡化重構(gòu)。

這樣把跨平臺(tái)的工具融會(huì)貫通地使用，極大擴(kuò)展了特效的創(chuàng)作和實(shí)現(xiàn)的空間。這需要特效師對工具后面的數(shù)學(xué)多一點(diǎn)理解。

以下是通過整理的演講實(shí)錄：

今天和大家分享的內(nèi)容是：「像素動(dòng)畫的原理和應(yīng)用」。我很想把它講到就算外行也能弄懂。同時(shí)也通過這個(gè)案例，和大家分享一下美術(shù)崗位怎么用形象思維來解釋數(shù)學(xué)。

我做了16年的特效。之前在美國、加拿大做過《使命召喚》《暗黑血統(tǒng)》等主機(jī)游戲，回國之后先后在網(wǎng)易，阿里游戲，最后來到FunPlus，現(xiàn)在主要負(fù)責(zé)手游的項(xiàng)目。

從主機(jī)游戲到手游轉(zhuǎn)變，我本能地考慮怎么把一些主機(jī)的游戲技術(shù)應(yīng)用到手游上面。其中的一個(gè)典型例子就是像素動(dòng)畫在手游上的應(yīng)用。

我是一名特效師，這個(gè)崗位也可以叫做特效動(dòng)畫師。動(dòng)畫師動(dòng)的是角色的胳膊和腿，而特效師動(dòng)的圖片的像素，因?yàn)?a href='http://m.winnerscn.com/sjwy/heji-13608.html' target='_blank'>大多數(shù)時(shí)候，我們都是利用像素運(yùn)動(dòng)來模擬各種特效。

比如這個(gè)《星空》?，F(xiàn)在大家看到的是運(yùn)動(dòng)的數(shù)字版，它就代表了像素動(dòng)畫要呈現(xiàn)的效果。.

要實(shí)現(xiàn)這種效果并不難，最近有個(gè)叫Fluid Ninja的Unreal的插件，特效師可以應(yīng)用Cascade，Niagara粒子系統(tǒng)，貼圖，或者力場在其中模擬出我們想要的運(yùn)動(dòng)形式，產(chǎn)出流程圖等貼圖資源，然后再應(yīng)用到Unity的ASE材質(zhì)中。這個(gè)過程給了特效師設(shè)計(jì)像素動(dòng)畫的極大自由，而且十分便捷。

我們先講一下像素動(dòng)畫的基本原理：

每一張圖片其實(shí)都是由像素構(gòu)成的。假如圖片的分辨率是1024x1024，那么這1024個(gè)像素點(diǎn)都有其對應(yīng)的坐標(biāo)。

我們可以用一張“流程圖”來操縱一張圖片像素坐標(biāo)的運(yùn)動(dòng)方向和強(qiáng)度，以得到我們想要的運(yùn)動(dòng)形式。

它涉及到兩個(gè)最基本的概念：

其一是平面坐標(biāo)系，這個(gè)就是上下左右4個(gè)方向。

其二，通道。我們的圖片有百萬種顏色都是由RGB三個(gè)不同的通道組合產(chǎn)生的。

那么我們可以試著將他們合在一起：把紅綠通道分別對應(yīng)坐標(biāo)系的X值和Y值，這樣就可以把圖片的「灰度」和坐標(biāo)系的數(shù)值對應(yīng)起來。

坐標(biāo)系大家都很清楚。下圖在坐標(biāo)系中左下角是（0,0），右上角可以設(shè)為（1,1），這就是一張相片最基本的的坐標(biāo)系。當(dāng)然，電腦里的坐標(biāo)有些不太一樣，它是左上角（0,0），右下（1,1）。

但是為了產(chǎn)生上下左右四個(gè)方向的運(yùn)動(dòng)，我們就得處理出正值和負(fù)值的區(qū)別。

我們讓X和Y分別減去0.5，那么我的圖片就能居中，中間點(diǎn)到了（0, 0）的位置；

原本（0, 1）的區(qū)間就變成（-0.5, 0.5）的區(qū)間，由此我們就能擁有正負(fù)兩個(gè)方向的運(yùn)動(dòng)。

這張圖是 Unreal 和 Unity 中的坐標(biāo)節(jié)點(diǎn)圖標(biāo)：

你看到當(dāng)中紅綠的過度，其實(shí)就是兩個(gè)通道灰度從黑到白的漸變過程，左邊在紅色通道里面，我們將黑色設(shè)置為0，白色設(shè)置為1，那么就有0到1的漸變；右邊的綠色通道也同理，不過我們將它的位置設(shè)置為縱向，從黑色0到白色1。

這就是紅綠通道的灰度值，對應(yīng)坐標(biāo)系的值。

知道了顏色的坐標(biāo)運(yùn)動(dòng)，我們簡單地描述成這樣：

通常圖片的灰度值是0到256，在流程圖的紅色通道里面，黑色產(chǎn)生向右的運(yùn)動(dòng)，白色向左運(yùn)動(dòng)；如果是綠色通道就是黑色向上，白色向下。128的中間灰為靜止?fàn)顟B(tài)。換句話說，它不會(huì)產(chǎn)生任何的運(yùn)動(dòng)。

那么舉一個(gè)實(shí)例，假如我們有這樣一張圖A：

怎樣讓他做左右運(yùn)動(dòng)成這樣？

或者又怎樣如此上下運(yùn)動(dòng)呢？

答案就是做出一張流程圖。

這張流程圖就是黑白兩個(gè)條組成，紅色通道、綠色通道是相同的黑白條（因?yàn)椴挥闷渌较蜻\(yùn)動(dòng)，所以我們把藍(lán)色通道設(shè)置為黑色）。

我們現(xiàn)在回頭看一下，這個(gè)左右運(yùn)動(dòng)就是紅色通道起作用（綠色通道的灰度值是128的中間灰）；而上下運(yùn)動(dòng)就是綠色通道起了作用（紅色通道的灰度值是128的中間灰）。

這張圖就可以解釋背后的原理：當(dāng)我們需要左右運(yùn)動(dòng)的時(shí)候，我們讓紅色通有黑白，讓綠色通道是128灰度，不產(chǎn)生運(yùn)動(dòng)。

同樣的圖，我們將紅色通道設(shè)置為128的灰度，綠色通道有黑白，那么他只有上下運(yùn)動(dòng)。

基于這個(gè)原理，我們找3張圖來說明實(shí)操。平常工作當(dāng)中，我們經(jīng)常要做河流、煙霧、巖漿的運(yùn)動(dòng)，這幾張靜止的圖片，幾分鐘之內(nèi)就可以做成運(yùn)動(dòng)的圖片。

我們只需要在Flowmap Painter軟件里，像手指劃過一樣，順著運(yùn)動(dòng)方向抹一下，它就會(huì)根據(jù)軌跡流動(dòng)。

我們打開“涂抹”出來的流程圖，原理就很顯而易見了：因?yàn)槌宋覀冃枰\(yùn)動(dòng)的部分，其他部分都是128的灰度，運(yùn)動(dòng)著的部分就是比中間灰或亮或暗一些。

.

下面這個(gè)是像素動(dòng)畫用到的材質(zhì)球，我用一張流程圖扭曲了自己的照片。為了說明白一些，我將它分為ABC三個(gè)部分。

A部分看似復(fù)雜，其實(shí)只是加減乘除一樣的算法，目的就是讓圖片的坐標(biāo)移動(dòng)：

One Minus——減1，其實(shí)就是首先把（0,0）放到左上角去，符合電腦的坐標(biāo)規(guī)則；

Append是將橫縱兩個(gè)方向坐標(biāo)合在一起；Flow_Strength則是控制扭曲強(qiáng)度；

下面是B部分，Time，也是很重要的節(jié)點(diǎn)。打個(gè)比方，我們這里有個(gè)坐標(biāo)，時(shí)間就是穿過0的過程，往下是過去，往上是未來，它是一條無限延伸的對角線。

而我們想獲得重復(fù)的效果，就是讓時(shí)間來回重復(fù)，就可以用Fract節(jié)點(diǎn)去掉整數(shù)。

讓時(shí)間這一條線，從0開始，0.1走到0.9，到1的時(shí)候再重復(fù)回到0。意味著時(shí)間永遠(yuǎn)不會(huì)有的整數(shù)，他只會(huì)在0.1 - 0.9之間往復(fù)。這就產(chǎn)生了循環(huán)。

B部分和A部分是一樣的運(yùn)動(dòng)，只是慢了0.5秒。但是可以看到都有跳幀的現(xiàn)象。我們

用淡入淡出的遮罩來過濾掉跳幀部分——也就是C部分的工作。

試著把它還原成更形象的坐標(biāo)圖，這是Time原始的樣子：

我們第一步把它變成小數(shù)往復(fù)：

再減去0.5以獲得負(fù)值：

再用Abs把負(fù)值翻正過來，讓它連續(xù)：

最后再乘以2來增大波動(dòng)幅度，形成連續(xù)的波浪線。

最終我們得到這樣一個(gè)淡入淡出的遮罩圖融合A和B兩部分，形成無縫循環(huán)。

像素動(dòng)畫可以用到很多的地方。比如說這個(gè)星球的游戲界面里，巨型風(fēng)暴原本是一張靜止的圖片。

銀河的運(yùn)動(dòng)、太陽的火焰、木星的風(fēng)暴，全部都是用這種材質(zhì)球處理的，而且效率非常高在這個(gè)特效里，一張很多小點(diǎn)的黑白圖和一張螺旋形狀的流程圖，兩者合在一起，便可

以做出一個(gè)近似黑洞的旋轉(zhuǎn)結(jié)果。

這是我們的一款三消游戲，里面云的動(dòng)態(tài)、怪物的斗篷、水的運(yùn)動(dòng)，都用到了這種

Flowmap效果。

這個(gè)將怪物吸進(jìn)瓶子的效果，煙霧消散的效果也是用Flowmap處理的像素動(dòng)畫。

制作流程圖有很多討巧的方法：

拿這張圖片來舉例，先將原圖導(dǎo)入Flowmap Painter里面，用涂抹工具順著運(yùn)動(dòng)方向抹幾下，于是就可以導(dǎo)出這樣一張流程圖，十分鐘不到。

如果是像木星上這么復(fù)雜的風(fēng)暴運(yùn)動(dòng)我肯定是沒有時(shí)間順著方向一點(diǎn)點(diǎn)抹的，太復(fù)雜了，不過這也有辦法。

可以用PS將它的紅色通道灰度調(diào)整，不動(dòng)的部分刷成128灰度；然后把綠色通黑白反相，把不想運(yùn)動(dòng)的地方用128灰度的刷一刷，于是，幾分鐘不到的時(shí)間就得到了一張木星風(fēng)暴的流程圖。

再比如我只有這樣一個(gè)灰度圖，它的運(yùn)動(dòng)也是有很多細(xì)節(jié)：

可以用CrazyBump拿這張灰度圖直接產(chǎn)生Normal Map，我把藍(lán)色通道設(shè)置黑的，只

用紅綠通道，就變成了流程圖：

不過最酷的還是用FluidNinja這個(gè)插件，如火球、煙霧、爆炸，流體等各種運(yùn)動(dòng)，我們都可以用3種方式百分百地控制生產(chǎn)它們的運(yùn)動(dòng)。

第一種就是粒子系統(tǒng)。無非是用運(yùn)動(dòng)的粒子產(chǎn)生不同的黑白間隔比例，配上算法，就有了種種流體模擬的效果。不光是單幀，也可以設(shè)置成序列幀。第二種是用黑白圖片，第三種是用力場。它讓像素動(dòng)畫特效設(shè)計(jì)增加了極大的空間。

我們做手游因?yàn)榘w的大小會(huì)受到控制，特效貼圖用512x512就會(huì)是常大的圖了，尤其我們做序列幀的時(shí)候。比如說512x512，我們把它分割成4x4=16幀，每個(gè)單位都

是256，低于這個(gè)值，手機(jī)上就會(huì)看得很模糊。

游戲是每秒30幀播放，16幀的序列圖勉強(qiáng)可以在1s內(nèi)讓你覺得特效過得去。現(xiàn)在有了序列幀的流動(dòng)圖，我們就可以將它做到幾倍的特效時(shí)長。

比如一個(gè)爆炸特效，左邊這個(gè)爆炸是用8x8 64的序列幀，2秒的特效，很順滑。但假如這是一個(gè)原子彈爆炸，讓你做30s以上， 1秒就是30幀，30秒就得900幀，那得

多大的序列幀貼圖?。坑疫呥@個(gè)就是用了序列幀流程圖的效果，很長但沒有卡頓。

材質(zhì)球就會(huì)稍微復(fù)雜一些：

目的是用序列幀的流動(dòng)圖為序列幀增加中間幀：

基本道理就是將當(dāng)前幀往外扭曲，然后下一幀往內(nèi)扭曲，關(guān)鍵幀縮緊放大后，就出現(xiàn)了兩個(gè)中間幀，幀數(shù)變多，畫面自然變絲滑。

最后總結(jié)一下像素動(dòng)畫的優(yōu)缺點(diǎn)：

優(yōu)點(diǎn)是可以很快、精確地產(chǎn)生我們想要的運(yùn)動(dòng)。方法非常簡單，制作流程圖可以用Flowmap Painter、PS、CrazyBump，還有現(xiàn)在最酷的FluidNinja，借助它我們可以把Unreal、Unity結(jié)合起來使用。

序列幀流動(dòng)圖除了產(chǎn)生很細(xì)節(jié)的運(yùn)動(dòng)以外，可以大幅度降低我們的圖片大小。

像素動(dòng)畫的的缺點(diǎn)就是動(dòng)作是重復(fù)的。