【ShaderGraph】塞爾達神廟柵欄特效
作者：Yumir
哈嘍艾瑞巴蒂，我是yumir。
用ShaderGraph做了幾個簡單的效果之后，我需要實踐一個稍微復(fù)雜一點的效果，于是干脆把塞爾達神廟里面導(dǎo)師的柵欄實現(xiàn)一下吧。
一、效果分析
看似復(fù)雜的特效實際上都是很多個簡單的部分的組合，就像復(fù)雜的世界是由最簡單的分子構(gòu)成的，所以遇到復(fù)雜效果第一件事就是分析，我將該粒子特效分為三個階段兩個狀態(tài)，首先是默認狀態(tài)，內(nèi)容是：
柵欄內(nèi)漂浮的光點。
閃爍的鏤空符文。
浮光流動的光柵欄。
再來是觸發(fā)狀態(tài)，先是林克觸碰符文之后發(fā)生以下變化：
浮出發(fā)光實心符文。
光圈放大。
光點隨光圈向外飛出。
接著進入第三階段出現(xiàn)柵欄發(fā)亮并爆破的效果。當破碎的柵欄消失整個特效動畫也結(jié)束了。
二、第一階段
1、柵欄內(nèi)漂浮的光點。
首先是粒子系統(tǒng)的參數(shù)，這個粒子是整個效果中最簡單的。
新建一個ShaderGraph，并新建對應(yīng)的材質(zhì)球，拖拽到粒子上（這個操作講了很多次，后文就直接說明ShaderGraph是怎么做的吧- -）
這個粒子用的Shader我在之前的文章用過就是那個讓粒子發(fā)光的Shader，可以設(shè)置貼圖和顏色，也可以被粒子系統(tǒng)更改顏色（VertexColor），其實只是把這幾個屬性相乘后輸出顏色和透明度，簡單常用的Shader。
注意要修改這兩個位置的數(shù)值，默認新建的ShaderGraph這里的設(shè)置為不透明和0.5，需要自行修改。（本文所有的Shader都是）
該粒子用到了一個從中心往外漸變的圓形透明貼圖，因為之前做導(dǎo)師消失效果的時候用的是綠色所以我還是用了綠色，可以自己改顏色（所有顏色都可以改）。
效果：
2、閃爍的鏤空符文。
粒子系統(tǒng)的參數(shù)如下，利用循環(huán)和顏色漸變做出呼吸燈的效果。
用到的Shader和上一個特效一樣，貼圖是我自己畫的一個鏤空的小魚：
效果：
3、浮光流動的光柵欄。
該粒子的渲染模式是Mesh，使用了一個沒有頂部和底部的模型，模型已經(jīng)打包到文末的相關(guān)資源包中，當然你要自己用建模軟件做也不難，在第三階段還有兩個柵欄特效，也是同樣的設(shè)置。
這部分的ShaderGraph又由兩個部分組成，一個是柵欄，另一個是柵欄上的浮光，并且柵欄在第三階段也有使用，所以做完柵欄的效果之后記得復(fù)制兩份再進入下一步。
柵欄
利用UV的X軸上的值的sin值，由于UV的x值是0~1，需要使用Multiply增加sin圖的頻率，得到了一個黑白相間的豎線圖像，用Subtract（或者Add）調(diào)整柵欄間的間距。
再利用Lerp根據(jù)前面運算的結(jié)果判斷每個像素位的顏色。最后是粒子Shader固定操作。
柵欄上的浮光
在上一篇文章提到過，在ShaderGraph中有三個噪聲節(jié)點可以用來實現(xiàn)很多看似復(fù)雜的特效，稍有了解的同學應(yīng)該能知道現(xiàn)在需要做的就是利用Voronoi制作一個水流波紋的紋理。
新建一個Voronoi節(jié)點并將細胞密度調(diào)整到合適大小，我使用了一個時間節(jié)點使該紋理UV的y軸不斷變化，通過Multiply控制移動的方向和速度，為了效果更好一點又實用這個時間節(jié)點的值修改Angle Offset的值使細胞有更多的律動。
最后將紋理圖輸出到Power（乘方），因為輸入值使0~1所以值不為1的像素位自乘次數(shù)越多越接近0，1永遠為1.
將結(jié)果與柵欄的黑白紋理相乘得到一個只有白線部分帶有光斑的紋理，對紋理上色后與原來的彩色柵欄紋理相加，就完成了。
回到粒子系統(tǒng)調(diào)試材質(zhì)球的參數(shù)：
效果：
三、第二階段
1、浮出發(fā)光實心符文。
這個粒子是不循環(huán)的，透明度是在生命周期快要結(jié)束的時候才開始減淡，稍微有一點點放大的效果。
用的也是上面說到的粒子發(fā)光Shader，顏色是白色，貼圖是我自己畫的實心的魚：
效果：
2、光圈放大。
同樣是不循環(huán)粒子，和實心符文粒子同時發(fā)生，其他參數(shù)是根據(jù)實際情況微調(diào)的。
使用的還是簡單粒子發(fā)光Shader，貼圖是一個鏤空的圓。
效果：
3、光點隨光圈向外飛出。
這個粒子用到了一個圓形發(fā)射器，需要速度變化和顏色變化，不循環(huán)。
由于在粒子系統(tǒng)中設(shè)置了初始顏色所以在材質(zhì)球上沒有做顏色更改，偷懶沒有做新的貼圖直接用了第一個光點粒子的貼圖，依舊是發(fā)光粒子Shader。
效果：
四、第三階段
1、逐漸發(fā)亮的柵欄。
這個粒子逐漸發(fā)亮的效果主要是來源于透明度變化（所以應(yīng)該說是逐漸發(fā)白？）用到了開頭說到的那個模型。
之前復(fù)制的柵欄ShaderGraph在這里可以直接用，柵欄顏色不一樣，其他的設(shè)置所有的柵欄是一致的：
效果：
2、殘留的柵欄消失。
柵欄炸裂后原地還有一些殘留的柵欄，是漸漸消失的，也是用透明度調(diào)整：
這里要用到之前復(fù)制的另一份柵欄ShaderGraph，我嫌兩個顏色礙事把間隔的顏色直接設(shè)置為（0，0，0，0），通過簡單運算將原本的柵欄摳空。
這里的貼圖也是自己隨意畫的，用來將原本的柵欄扣空，其他參數(shù)應(yīng)該和原來的柵欄保持一致：
效果：
3、柵欄爆破。
這個效果用到了九個粒子，每個粒子用到的屬性一致只是數(shù)值需要調(diào)整，這里只列出其中一個。
這九個粒子分別在前、左、右由上至下分布，實用unity的Quad網(wǎng)格作為發(fā)射器形狀：
粒子的初始旋轉(zhuǎn)角度還有速度也不一樣:上層粒子底部向外，中層粒子不旋轉(zhuǎn)，下層粒子頂部向外；上層和下層粒子的初始速度會比中層的粒子的初始速度稍微慢一點。
粒子系統(tǒng)參數(shù)：
柵欄破碎噴射的碎片粒子使用的貼圖不是我自己畫的，由于這個圖是黑白的，所以直接用貼圖的R值作為透明度，其他與普通粒子的Shader無異。
在材質(zhì)球上對顏色和貼圖進行設(shè)置：
效果：
五、最終效果
默認狀態(tài)：
觸發(fā)狀態(tài)：
相關(guān)的素材：
鏈接：https://pan.baidu.com/share/init?surl=V49SaVWIwun03l2yoemZ9w
提取碼：7diz
完整項目：
鏈接：https://pan.baidu.com/share/init?surl=DqgSbOz4c1VqgnTCd-zCfA
提取碼：gtpp
歡迎加入游戲開發(fā)群歡樂攪基：1082025059
對游戲開發(fā)感興趣的童鞋可戳這里進一步了解：http://www.levelpp.com/
