AmplifyShader UGUI Text 應用之一

Default UI， 這是 Amplify 中一個UI Shader，但對原始 Unity Shader 是屬於哪種其實我不知道...XD
有找到 Unity UGUI Source code，雖然目前不知道可以幹嘛。XDXD

* 首先看一下最終的成像:

  

* 分析成像的組成:

        1. 改變文字顏色

        2. 新增一個圖，對UV做位移與顏色改變

        3. 1+2

** 這邊使用的是 Amplify 的 Default UI Shader ( Asset → Create → Amplify Shader  → Legacy→ Default UI )

* 1. 改變文字顏色

     * * 首先要知道怎麼改UGUI Text 上顏色

           -- 這邊會使用到 Template Parameter Node

                   -- Sprite Texture, _TextureSampleAdd, Tint

           -- a.新增一個 Sprite Texture 指定給 Texture Sample Tex，加上 _TextureSampleAdd，這樣就像指定到 text 上 color

           -- b.將 a 的結果與 Tint, Vertex color 相乘以達色彩增值的效果 

 

     * * 上面的知識有了，我們要做一點變形才能達到最終的成果

           -- 1.1 Sprite Texture指定給Texture Sample後，要利用One Minus將畫面反轉(圖A) ( 注意:input 值在-1~1時適用反轉 )

           -- 1.2 利用 1.1 數值做 Lerp，讓文字始終維持白色(1)，本來透空的部分隨開放的數值做疊加(圖B)

           -- 1.3 將1.2 Lerp 後的結果存起來，但只取 XYZ (RGB)，W(Alpha)值還是使用原本的透空(圖A)

           -- 1.4 將1.3 結果與 Tint, Vertex color 相乘以達色彩增值的效果，會得到下圖左的效果

* 2. 新增圖，對UV做位移與顏色的改變

           -- 2.1 新增一張要來產生 UV 流動的圖(圖A)取 Tiling，與Screen Position(圖B)取 XY 相乘

           -- 2.2 使用Panner 來產生 UV 流動，將2.1輸入到 UV，圖A 的 Offset 輸入到 Speed

          --Texture Transform: 可以透過設定參考的材質，取得參考上參數(Tiling, Offset)(圖A)

           -- 2.3 將2.2已產生UV流動的圖與一個Color新乘，就可以控制流動圖的顏色

           -- 2.4 將2.3結果取RGB與一開始Sprite Texture的Alpha存起來，輸出就可以看到成果(圖C)

           --Register Local Var: 這邊將Sprite Texture輸出的貼圖做成變數，方便取用(圖B)

* 3. 將1與2的結果加起來輸出就可以看到如最終成像的結果囉。

------------------------------------------------------------------------------------------------------------------------------------------------------

剛好 google 找到有人在 Amplify 論壇發問，一併貼上，問如何控制 Alpha 值，有興趣可以看看人家怎麼串，其實跟改顏色是差不多的。