轉(zhuǎn)自：http://www.manew.com/thread-110739-1-1.html
雖然距離爐石傳說(shuō)的卡面特效還有不少距離，但加之特效妹子做的一些點(diǎn)綴梦裂，比如加點(diǎn)粒子什么的怕敬，看起來(lái)也挺不錯(cuò)诗轻，所以記錄一下贮聂，恐日后年齡大了記憶力減退再給忘嘍柬唯。
此總結(jié)回顧將分為以下三個(gè)部分呈現(xiàn)：
第一部分：會(huì)展示部分成品效果认臊，簡(jiǎn)單介紹材質(zhì)編輯器的組成及特點(diǎn)，基本使用方法及第一種效果：“擾動(dòng)”的實(shí)現(xiàn)锄奢；
第二部分：將介紹“移動(dòng)”失晴、“旋轉(zhuǎn)”效果的實(shí)現(xiàn)及兩種混合效果的顯示差異；
第三部分：會(huì)對(duì)自定義材質(zhì)編輯器作出介紹拘央，并對(duì)全文作出總結(jié)涂屁。
那就開(kāi)車(chē)吧。
效果展示
↑ 黃蓋身上起火了
↑ 關(guān)羽身上起火了
↑ 李儒身上起火了
↑ 典韋身上起火了
特點(diǎn)
方便特效同學(xué)編輯的材質(zhì)界面灰伟，使用自定義材質(zhì)編輯器拆又，可根據(jù)需求自由選擇開(kāi)啟層數(shù)，開(kāi)啟層數(shù)越多栏账，特效表現(xiàn)力越強(qiáng)帖族，特效越復(fù)雜，渲染開(kāi)銷(xiāo)也更高挡爵。
使用的時(shí)候感覺(jué)就像這樣：
目前盟萨，每層特效僅包含最基本的兩種模式：移動(dòng)、旋轉(zhuǎn)了讨，第一層特效額包含一種擾動(dòng)效果捻激。
下面對(duì)效果分別做一下介紹：
擾動(dòng)：
↑ 擾動(dòng)標(biāo)簽下面板的配置
↑ 擾動(dòng)標(biāo)簽下的相關(guān)說(shuō)明
擾動(dòng)的原理其實(shí)很簡(jiǎn)單，就是在對(duì)圖片采樣時(shí)前计，給采樣UV坐標(biāo)一點(diǎn)“無(wú)規(guī)律”的偏移胞谭，比如采樣(0.11,0.51)時(shí)偏移到(0.12, 0.50)，采樣(0.23,0.15)時(shí)偏移到(0.22,0.17)男杈，可以想象丈屹，如果對(duì)圖片上每個(gè)點(diǎn)都做這種“無(wú)規(guī)律”的偏移，那么最終結(jié)果一定是畫(huà)面將變得扭曲，而隨著偏移量的增加旺垒，扭曲程度也增加彩库，如：
只要理解這種偏移的原理，那么稍加利用先蒋，就能實(shí)現(xiàn)擾動(dòng)的效果骇钦，比如從一張圖片中采樣顏色并轉(zhuǎn)換為坐標(biāo)偏移量來(lái)代替上述的無(wú)規(guī)律的偏移，而這張圖一般就叫做噪聲貼圖(NoiseTexture)如：
↑ 一張?jiān)肼曎N圖
網(wǎng)絡(luò)上有很多成品噪聲圖竞漾，以及生成噪聲圖的方法眯搭，因此這里就不再贅述了。
如果進(jìn)一步將噪聲圖"流動(dòng)"起來(lái)业岁，畫(huà)面的流動(dòng)效果也就隨之出現(xiàn)了鳞仙，再加之一張遮罩圖控制噪聲影響區(qū)域，就可以基本實(shí)現(xiàn)畫(huà)面的擾動(dòng)效果了笔时。
]
↑ Ps下編輯遮罩圖(這里使用紅色通道作為噪聲強(qiáng)度)
↑ 典韋背后的火光擾動(dòng)了起來(lái)
關(guān)鍵部分代碼
以下是鄙人總結(jié)的幾項(xiàng)實(shí)現(xiàn)擾動(dòng)效果時(shí)需要注意的事項(xiàng)：
1棍好、環(huán)繞模式一定要選擇Repeat，因?yàn)檫@樣才能讓噪聲圖正確的“流動(dòng)”起來(lái)允耿。
2借笙、從噪聲圖采樣后，乘了一個(gè)適配UV單位的參數(shù)右犹，因?yàn)樽鴺?biāo)偏移范圍在-1~1之間，但這對(duì)于UV坐標(biāo)顯然是太大了姚垃，因此我使用了0.005作為轉(zhuǎn)換參數(shù)念链，這個(gè)參數(shù)可以自己制定，也可以用原圖尺寸處理一下积糯，在這就不贅述了掂墓。
3、遮罩不僅可以控制擾動(dòng)區(qū)域看成，同時(shí)可以控制擾動(dòng)強(qiáng)度君编，只需要在繪制遮罩的時(shí)候調(diào)整R值即可(當(dāng)然，你也可以用綠色(G)或者藍(lán)色(B)通道)川慌，同時(shí)吃嘿，遮罩貼圖的底色必須為黑色，如果使用了白色梦重，全屏都會(huì)是擾動(dòng)效果兑燥，原因很簡(jiǎn)單就不再解釋了。
