轉(zhuǎn)自：http://www.manew.com/thread-110739-1-1.html

雖然距離爐石傳說的卡面特效還有不少距離，但加之特效妹子做的一些點綴，比如加點粒子什么的，看起來也挺不錯，所以記錄一下，恐日后年齡大了記憶力減退再給忘嘍。

此總結(jié)回顧將分為以下三個部分呈現(xiàn)：

第一部分：會展示部分成品效果，簡單介紹材質(zhì)編輯器的組成及特點，基本使用方法及第一種效果：“擾動”的實現(xiàn)；

第二部分：將介紹“移動”、“旋轉(zhuǎn)”效果的實現(xiàn)及兩種混合效果的顯示差異；

第三部分：會對自定義材質(zhì)編輯器作出介紹，并對全文作出總結(jié)。

那就開車吧。

效果展示

↑ 黃蓋身上起火了

↑ 關(guān)羽身上起火了

↑ 李儒身上起火了

↑ 典韋身上起火了

特點

方便特效同學(xué)編輯的材質(zhì)界面，使用自定義材質(zhì)編輯器，可根據(jù)需求自由選擇開啟層數(shù)，開啟層數(shù)越多，特效表現(xiàn)力越強，特效越復(fù)雜，渲染開銷也更高。

使用的時候感覺就像這樣：

目前，每層特效僅包含最基本的兩種模式：移動、旋轉(zhuǎn)，第一層特效額包含一種擾動效果。

下面對效果分別做一下介紹：

擾動：

↑ 擾動標(biāo)簽下面板的配置

↑ 擾動標(biāo)簽下的相關(guān)說明

擾動的原理其實很簡單，就是在對圖片采樣時，給采樣UV坐標(biāo)一點“無規(guī)律”的偏移，比如采樣(0.11,0.51)時偏移到(0.12, 0.50)，采樣(0.23,0.15)時偏移到(0.22,0.17)，可以想象，如果對圖片上每個點都做這種“無規(guī)律”的偏移，那么最終結(jié)果一定是畫面將變得扭曲，而隨著偏移量的增加，扭曲程度也增加，如：

只要理解這種偏移的原理，那么稍加利用，就能實現(xiàn)擾動的效果，比如從一張圖片中采樣顏色并轉(zhuǎn)換為坐標(biāo)偏移量來代替上述的無規(guī)律的偏移，而這張圖一般就叫做噪聲貼圖(NoiseTexture)如：

↑ 一張噪聲貼圖

網(wǎng)絡(luò)上有很多成品噪聲圖，以及生成噪聲圖的方法，因此這里就不再贅述了。

如果進一步將噪聲圖"流動"起來，畫面的流動效果也就隨之出現(xiàn)了，再加之一張遮罩圖控制噪聲影響區(qū)域，就可以基本實現(xiàn)畫面的擾動效果了。

]

↑ Ps下編輯遮罩圖(這里使用紅色通道作為噪聲強度)

↑ 典韋背后的火光擾動了起來

關(guān)鍵部分代碼

以下是鄙人總結(jié)的幾項實現(xiàn)擾動效果時需要注意的事項：

1、環(huán)繞模式一定要選擇Repeat，因為這樣才能讓噪聲圖正確的“流動”起來。

2、從噪聲圖采樣后，乘了一個適配UV單位的參數(shù)，因為坐標(biāo)偏移范圍在-1~1之間，但這對于UV坐標(biāo)顯然是太大了，因此我使用了0.005作為轉(zhuǎn)換參數(shù)，這個參數(shù)可以自己制定，也可以用原圖尺寸處理一下，在這就不贅述了。

3、遮罩不僅可以控制擾動區(qū)域，同時可以控制擾動強度，只需要在繪制遮罩的時候調(diào)整R值即可(當(dāng)然，你也可以用綠色(G)或者藍色(B)通道)，同時，遮罩貼圖的底色必須為黑色，如果使用了白色，全屏都會是擾動效果，原因很簡單就不再解釋了。