Unity Shader Weaver 教學
Shader Weaver 是一個以節點為基礎的著色器創建工具，專門用於 2D / Sprite / UI 效果，透過直覺的工作流程可輕鬆創造令人印象深刻的 2D 效果，並可節省大量時間。Shader Weaver 主要使用 Handles / Gizmos 來製作效果，您可以在 Shader Weaver 中使用工具繪製 Mask 並創建 Remap textures 紋理，並且支援使用繪圖版操作。Shader Weaver 可支援 Unity 5 / 2017 / 2018 / 2019 版本。
Shader Weaver 特點
增加樣本 - 收錄豐富的樣本效果可以用於學習與使用，包括著色器和紋理。官方展示與教學的所有效果都收錄於資源包。
操作介面 - Shader Weaver 提供清楚與直覺化的操作介面。
操作簡單 - Use handles/gizmos like what you use to do.
Mask Texture Creation 創建遮罩紋理 - Draw masks to divide areas for individual sub-effects. 繪製遮罩以劃分各個子效果的區域。
UV Distortion - A visual way to distort uv coordinates.
UV Remapping - A unique way to make path along effects and object surrounding effects.
即時預覽 - Nice width/height corresponding preview.
複製貼上 - 支援複製與貼上的操作，節點可以帶到其他 Shader Weaver 專案重複使用。
Depth Sorting - Decide nodes' display order by depth sorting.
Visual Modes - View textures' individual rgba channel and choose what to see by setting layers.
Sync - No extra files to sync over version control system. 所有的 Shader Weaver 資料都儲存於 .shader 檔案。
相容性高 - 可相容於 UGUI、NGUI、Playmaker、Bolt、Corgi Engine、DOTween、Odin、Anima2D 等。
Make the change, use 2D dedicated shader creation tool to enhance visual quality of your game.
以下教學使用 ShaderWeaver 提供的貼圖示範，您可以自行替換為不同的貼圖。
一、建立基本Shader
1.開啟Window >ShaderWeaver打開編輯視窗。
2.開啟［ShaderWeaver>Tutorials>Tutorial1 - Intro］將ButtonBlue貼圖拖曳到ROOT欄位中並按下Save儲存目前的Shader即可完成建立。
3.儲存後可在右上角預覽，執行Open可打開已建立好的Shader。
或點選已建立好的Material材質球並看到Inspector屬性編輯器，執行Open in Shader Weaver開啟編輯視窗。
二、使用Image節點
1. 按住 Image 拖曳到編輯視窗即可新增一個 Image 節點。
2. 接著增加 Image圖片節點，可開啟[ShaderWeaver>Tutorials>Tutorial2 - Color Node]將Diamond貼圖拖曳到Image1欄位中，並將Image1右側節點按住拖曳到ROOT左側節點上，最後在按下Update更新編輯。
3.按下 Edit 進入圖片效果編輯。
Basic可編輯基本移動、旋轉、縮放。
Move動態移動
使用滑鼠拖曳製作動態移動的效果，如果不再需要移動將 Move 數值歸零即可。
Spin動態旋轉
Radial散射(輻射)
4. 透過使用Factor稍後可透過Inspector 控制移動、旋轉、幅射的效果，也可使用C# 控制。而新增 Factor 時可選擇Float(浮點數)與Range(範圍)兩種類型。
Float：在Custom Parameters下方欄位輸入要新增Factor的名稱，例如製作移動的話輸入Move，然後按下New Float 建立 Factor 。
新增後下方會增加一條欄位
進入到Image編輯視窗後將Factor選擇Move並按下Update更新編輯。
點一下右上角預覽圖示，並看到Inspector屬性編輯器下方會多出一個Move的調整欄位，可拉動並預覽效果。
Range：在Custom Parameters下方欄位輸入要新增Factor的名稱(例如：Range1)並按下New Range 按鈕建立。
將新增出來的Range1調整為Mni 30到Max 80
進入圖片編輯並在Radial類型更改為X0.1 Y0.1並將 Factor選擇Range1
按下Update並看到Inspector屬性編輯器下方會多出的Range1調整欄位，拉動並預覽效果。
將image1下的Depth圖層改為-1並按下Update可將效果改為從主圖後方散出。
完成。
三、使用Mask節點
1.基礎Mask使用
開啟新的ShaderWeaver並拖曳新增一個Image到編輯視窗內，將任一貼圖拖曳到Image１欄位後儲存一個新的Shader。
右鍵點選Image1節點右側並選擇Break Conn將連接取消。
將Mask拖曳新增到編輯視窗內並連接後按下Edit開啟Mask編輯。
上方可調整筆畫大小、透明度、解析度、反轉
右側可選擇畫筆、橡皮擦、智慧選取範圍、滴管選取範圍
在左側方塊內試著隨意畫一筆。
按下Update即可預覽Mask遮蓋效果。
以上是遮罩的基本使用步驟。
2.延伸使用-文字閃動
開啟[ ShaderWeaver>Tutorials>Tutorial3 - Mask Node ] 將title拖曳到ROOT節點的欄位。
開啟[ ShaderWeaver>Textures ]將ramp拖曳到Image1欄位中。
點擊mask2節點下面的Edit按鈕，開啟編輯視窗。
如有先前的Mask範圍請先使用Eraser清除，使用Dropper點選左框內的文字黑色部分，即可建立Mask遮罩的範圍。
按下Update並預覽效果。
點擊image1節點下面的Edit按鈕，開啟編輯視窗。
在Basic將旋轉調整為-1。
切換到Move將X軸調整為0.2
按下Update並預覽效果。
製作完成。
四、使用UV節點
基礎使用方法
本段教學使用UV節點製作火焰動畫效果。
1.開啟新的ShaderWeaver視窗，可開啟 [ ShaderWeaver>Textures ] 將flame火焰圖片拖曳到ROOT欄位，然後儲存成一個新的Shader。
2.將UV拖曳到編輯視窗新增節點，並與ROOT連接，這裡需要一個四方連續的波紋圖片，可開啟 [ ShaderWeaver>Textures ] 將wave拖曳到UV欄位。
3.點擊uv1節點下面的Edit按鈕，開啟編輯視窗。
4.在Move將Y軸向上拖曳移動（數值隨意）
5.在UV將R、G、B、A向上任一方向拖曳移動（數值隨意）
6.按下Update即可預覽。
完成。
延伸使用 - 增加Factor
1.在Custom Parameters新增兩個Range並命名適當的名稱的名稱(例如：Speed與Amount) 範圍保持預設的0~1即可。
2.回到UV編輯，在Move將Factor選擇Speed
3.在UV右側欄位的Blend Factor選擇Amount。
(如無顯示請點擊右下角的+展開)
4.按下Update按鈕後，點擊ShaderWeaver預覽圖，即可快速在Inspector屬性編輯器調整Speed與Amount數值並預覽效果。
調整效果如下：
Amount : 0.6→ Amount : 0.8→
Speed : 0.5→ Speed : 1→
完成。
延伸使用– 改變主圖的效果
1.點選flame.png然後看到Inspector屬性編輯器下將Wrap Mode改為Repeat並按下Apply套用。
效果變更後→
完成。
五、使用Remap節點
奔跑的馬火焰特效
1.開啟新的ShaderWeaver視窗，可開啟 [ ShaderWeaver>Tutorials>Tutorial5 - Remap Node 1 ] 將horse拖曳到ROOT節點，並儲存一個新的Shader。
2.將Image拖曳新增到編輯視窗並連接ROOT，可開啟 [ ShaderWeaver>Textures ] 將flame火焰圖片拖曳到image1節點。
3.將Remap與Image拖曳新增到編輯視窗建立新節點，參照下圖連接節點，可開啟 [ ShaderWeaver>Tutorials >Tutorial5 - Remap Node 1 ] 將horse馬的圖片拖曳到image3節點。
4.在remap2按下Edit開啟Reamap編輯視窗。
將解析度更改為512x512將跳出視窗，按下Yes套用。
在Drag分頁將Drag數值改為X：0.07、Y：0.06，然後按下鍵盤Enter運算。注意！請使用鍵盤英文字母區的 Enter 鍵，使用右側數字區的 Enter 鍵是沒有動作的。
注意紅色與綠色的漸層，稍後加入ＵＶ時會用到。
按下Update按鈕預覽效果，即可看到紅色的火（靜態）。
5.在image1節點下面按下Edit按鈕，開啟編輯視窗
在Basic分頁將Scale的X軸調整為0.5
在切換到Move內頁將Move的X調整為0.15
按下Update按鈕，即可預覽火焰擺動的效果
6.將UV拖曳到編輯視窗新增UV節點，接著開啟 [ ShaderWeaver>Textures ] 將wave拖曳到uv4欄位。
按下uv4下的Edit按鈕開啟編輯視窗，並在Basic分頁將Scale的XY軸調整為0.6。
切換到Move分頁將Move的X軸調整為0.15
切換到UV將R的Y軸調整為0.2，G的X軸調整為0.15
按下Update按鈕，即可看到火焰的擺動加入隨機效果，更加生動。
完成。
六、使用Alpha節點
閃電特效
1.開啟新的ShaderWeaver視窗，可開啟 [ ShaderWeaver>Examples>Projects>Card_Lightening ] 將card_ligtening卡牌圖片拖曳到ROOT欄位，將Mask拖曳到編輯視窗內新增一個節點並連結ROOT，然後儲存成一個新的Shader。
按下mask1下的Edit按鈕開啟編輯視窗。
使用Wand點選卡牌畫面處選取大部分的範圍
在使用Brush將剩下漏掉的區域補上
完成遮罩
2.拖曳Image新增兩個Image節點分別為Image2與Image3，開啟 [ ShaderWeaver>Examples>Projects>Card_Lightening ]分別指定兩張圖片：
將lighteningBg指定到Image2
將lightening指定到Image3，並調整Image3的Depth為２
按下Image2下的Edit按鈕開啟編輯視窗
在Basic分頁將位置與縮放調整到適當位置及大小
將渲染通道選擇ROOT與mask1，並看到右邊欄位將Loop取消勾選，檢查Blend Op是否為Blend (預設)
按下Image3下的Edit按鈕開啟編輯視窗
在Basic分頁將位置與縮放調整到適當位置及大小
將渲染通道選擇為Everything，並看到右邊欄位將Loop取消勾選，Blend Op修改為Add Inner
將Alpha拖曳到編輯視窗內新增一個節點，接著開啟[ ShaderWeaver>Textures ]將ramp拖曳到alpha4欄位中
按下alpha4下的Edit按鈕開啟編輯視窗，在Move分頁將Move的Y軸向下即可，看到右邊欄位將Loop取消勾選並將Start調整為-1、Spd調整為1，然後在Spd Factor下方的欄位輸入＂_Time.y%1<0.2?(_Time.y%0.04<0.02?1:0):0＂
將渲染通道選擇為Everything
按下Update預覽效果。
製作完成。