AmplifyShader Icon Trail

Icon Trail, UI 的效果,一開始是看到 Asset Store 賣的效果,就自己串看看,下面為基礎簡化控制項的應用。

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

* 分析成像的組成:

        1. 渲染 Icon 底圖,支援半透明,有 Alpha Channel
        2. 渲染外框線、(遮罩)數量
        3. 外框線的旋轉、染色

* 1. 渲染 Icon 底圖

         這邊用一張有 RGBA 通道的 PNG 圖, RGB*Alpha 取得要渲染的部分。
         ** 記得要將 Blend Mode 修改為 Alpha Blend

* 2. 渲染外框線、遮罩數量

         外框線: 用一張有 RGB 的黑白圖,重點是以 R/G/B 任一 Channel 來當 Alpha 遮罩

         外框線(遮罩)數量: 自製漸層 Alpha 遮罩,與外框線相乘就可以取得最終要渲染的部分

* 3. 外框線的旋轉、染色

         旋轉: 用 Rotator 設定 UV 的旋轉,Anchor 要修正到 0.5, 0.5,多一個係數與 Time 相乘來控制旋轉的速度

         染色: 將外框線的 RGB 乘上 Color 的 RGB 

* 4. 底圖 + 外框線

         底圖的 RGBA + 外框線的 RGBA 就可以得到最後的結果囉

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

         這個效果串起來其實不複雜,反而是想怎麼寫拆解步驟比較花時間.....XD

留言

這個網誌中的熱門文章

UE4: Spine2D 導入與基本使用