當前位置:股票大全官網 - 財經新聞 - FunPlus首席特效專家張韶勇

FunPlus首席特效專家張韶勇

BIGC北京國際遊戲創新大會每年9月底在北京舉辦,大會致力於打造遊戲行業經驗分享的平臺,通過制作人、內容、技術、硬件、發行平臺、商業營銷等方向的經驗分享,促進中國遊戲產業健康向上發展。

有些用於主機端的特效工具和插件可以和手遊工具相結合,從而提高手遊特效品質和制作效率。

FunPlus首席特效專家張韶勇對此感受頗深。他擁有

要實現這種效果並不難,最近有個叫FluidNinja的Unreal的插件,特效師可以應用Cascade,Niagara粒子系統,貼圖,或者力場在其中模擬出我們想要的運動形式,產出流程圖等貼圖資源,然後再應用到Unity的ASE材質中。這個過程給了特效師設計像素動畫的極大自由,而且十分便捷。

我們先講壹下像素動畫的基本原理:

每壹張圖片其實都是由像素構成的。假如圖片的分辨率是1024x1024,那麽這1024個像素點都有其對應的坐標。

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

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

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

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

那麽我們可以試著將他們合在壹起:把紅綠通道分別對應坐標系的X值和Y值,這樣就可以把圖片的「灰度」和坐標系的數值對應起來。

坐標系大家都很清楚。下圖在坐標系中左下角是(0,0),右上角可以設為(1,1),這就是壹張相片最基本的的坐標系。當然,電腦裏的坐標有些不太壹樣,它是左上角(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張圖來說明實操。平常工作當中,我們經常要做河流、煙霧、巖漿的運動,這幾張靜止的圖片,幾分鐘之內就可以做成運動的圖片。

我們只需要在FlowmapPainter軟件裏,像手指劃過壹樣,順著運動方向抹壹下,它就會根據軌跡流動。

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

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

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

OneMinus——減1,其實就是首先把(0,0)放到左上角去,符合電腦的坐標規則;

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處理的像素動畫。

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

拿這張圖片來舉例,先將原圖導入FlowmapPainter裏面,用塗抹工具順著運動方向抹幾下,於是就可以導出這樣壹張流程圖,十分鐘不到。

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

可以用PS將它的紅色通道灰度調整,不動的部分刷成128灰度;然後把綠色通黑白反相,把不想運動的地方用128灰度的刷壹刷,於是,幾分鐘不到的時間就得到了壹張木星風暴的流程圖。

再比如我只有這樣壹個灰度圖,它的運動也是有很多細節:

可以用CrazyBump拿這張灰度圖直接產生NormalMap,我把藍色通道設置黑的,只

用紅綠通道,就變成了流程圖:

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

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

我們做手遊因為包體的大小會受到控制,特效貼圖用512x512就會是常大的圖了,尤其我們做序列幀的時候。比如說512x512,我們把它分割成4x4=16幀,每個單位都

是256,低於這個值,手機上就會看得很模糊。

遊戲是每秒30幀播放,16幀的序列圖勉強可以在1s內讓妳覺得特效過得去。現在有了序列幀的流動圖,我們就可以將它做到幾倍的特效時長。

比如壹個爆炸特效,左邊這個爆炸是用8x864的序列幀,2秒的特效,很順滑。但假如這是壹個原子彈爆炸,讓妳做30s以上,1秒就是30幀,30秒就得900幀,那得

多大的序列幀貼圖啊?右邊這個就是用了序列幀流程圖的效果,很長但沒有卡頓。

材質球就會稍微復雜壹些:

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

基本道理就是將當前幀往外扭曲,然後下壹幀往內扭曲,關鍵幀縮緊放大後,就出現了兩個中間幀,幀數變多,畫面自然變絲滑。

最後總結壹下像素動畫的優缺點:

優點是可以很快、精確地產生我們想要的運動。方法非常簡單,制作流程圖可以用FlowmapPainter、PS、CrazyBump,還有現在最酷的FluidNinja,借助它我們可以把Unreal、Unity結合起來使用。

序列幀流動圖除了產生很細節的運動以外,可以大幅度降低我們的圖片大小。

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