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

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

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

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

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

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

以下是葡萄君整理的演講實錄：

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

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

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

我是一名特效師，這個崗位也可以叫做特效動畫師。動畫師動的是角色的胳膊和腿，而特效師動的圖片的像素，因為大多數(shù)時候，我們都是利用像素運動來模擬各種特效。

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

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

我們先講一下像素動畫的基本原理：

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

我們可以用一張“流程圖”來操縱一張圖片像素坐標的運動方向和強度，以得到我們想要的運動形式。

它涉及到兩個最基本的概念：

其一是平面坐標系，這個就是上下左右4個方向。

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

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

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

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

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

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

這張圖是 Unreal 和 Unity 中的坐標節(jié)點圖標：

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

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

知道了顏色的坐標運動，我們簡單地描述成這樣：

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

那么舉一個實例，假如我們有這樣一張圖A：

怎樣讓他做左右運動成這樣？

或者又怎樣如此上下運動呢？

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

這張流程圖就是黑白兩個條組成，紅色通道、綠色通道是相同的黑白條（因為不用其他方向運動，所以我們把藍色通道設(shè)置為黑色）。

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

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

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

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

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

我們打開“涂抹”出來的流程圖，原理就很顯而易見了：因為除了我們需要運動的部分，其他部分都是128的灰度，運動著的部分就是比中間灰或亮或暗一些。

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

A部分看似復雜，其實只是加減乘除一樣的算法，目的就是讓圖片的坐標移動：

One Minus——減1，其實就是首先把（0,0）放到左上角去，符合電腦的坐標規(guī)則；Append是將橫縱兩個方向坐標合在一起；Flow_Strength則是控制扭曲強度；

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

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

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

B部分和A部分是一樣的運動，只是慢了0.5秒。但是可以看到都有跳幀的現(xiàn)象。我們用淡入淡出的遮罩來過濾掉跳幀部分——也就是C部分的工作。

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

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

再減去0.5以獲得負值：

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

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

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

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

銀河的運動、太陽的火焰、木星的風暴，全部都是用這種材質(zhì)球處理的，而且效率非常高

在這個特效里，一張很多小點的黑白圖和一張螺旋形狀的流程圖，兩者合在一起，便可以做出一個近似黑洞的旋轉(zhuǎn)結(jié)果。

這是我們的一款三消游戲，里面云的動態(tài)、怪物的斗篷、水的運動，都用到了這種Flowmap效果。

這個將怪物吸進瓶子的效果，煙霧消散的效果也是用Flowmap處理的像素動畫。

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

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

如果是像木星上這么復雜的風暴運動我肯定是沒有時間順著方向一點點抹的，太復雜了，不過這也有辦法。

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

再比如我只有這樣一個灰度圖，它的運動也是有很多細節(jié)：

可以用CrazyBump拿這張灰度圖直接產(chǎn)生Normal Map，我把藍色通道設(shè)置黑的，只用紅綠通道，就變成了流程圖：

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

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

我們做手游因為包體的大小會受到控制，特效貼圖用512x512就會是常大的圖了，尤其我們做序列幀的時候。比如說512x512，我們把它分割成4x4=16幀，每個單位都是256，低于這個值，手機上就會看得很模糊。

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

比如一個爆炸特效，左邊這個爆炸是用8x8 64的序列幀，2秒的特效，很順滑。但假如這是一個原子彈爆炸，讓你做30s以上， 1秒就是30幀，30秒就得900幀，那得多大的序列幀貼圖?。坑疫呥@個就是用了序列幀流程圖的效果，很長但沒有卡頓。

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

目的是用序列幀的流動圖為序列幀增加中間幀：

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

最后總結(jié)一下像素動畫的優(yōu)缺點：

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

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

像素動畫的的缺點就是動作是重復的。