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

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

FunPlus首席特效專家張韶勇對此感受頗深。他擁有16年特效工作經(jīng)驗，此前在海外做主機游戲的特效，回國后曾在網(wǎng)易阿里等公司負(fù)責(zé)手游的特效，目前加入了FunPlus，負(fù)責(zé)美術(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ù)學(xué)的理解，就會發(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ù)學(xué)多一點理解。

以下是通過整理的演講實錄：

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

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

從主機游戲到手游轉(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)的坐標(biāo)。

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

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

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

其二，通道。我們的圖片有百萬種顏色都是由RGB三個不同的通道組合產(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)生上下左右四個方向的運動，我們就得處理出正值和負(fù)值的區(qū)別。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Flowmap效果。

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

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

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

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

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

再比如我只有這樣一個灰度圖，它的運動也是有很多細(xì)節(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ì)球就會稍微復(fù)雜一些：

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

基本道理就是將當(dāng)前幀往外扭曲，然后下一幀往內(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)生很細(xì)節(jié)的運動以外，可以大幅度降低我們的圖片大小。

像素動畫的的缺點就是動作是重復(fù)的。