Embedded Files
編輯紀錄
2020/11/29_初版撰寫
基本邏輯&製作原因
基本邏輯&製作原因
Outline/InnerLine的計算邏輯都是一樣，都是把UV做四個方位的偏移後加減，最終根據要外框線還是內框線跟原生的圖檔做加減計算。
※如右圖
展示效果
展示效果
右上圖為純Outline與InnerLine的展示，外框線為藍色、內框線為紅色
右下圖為搭配貼圖的設計，外框線根內框線的貼圖是分開的
效能演示
效能演示
一般來講大量的Text用不同Material會產生大量的Draw call，統一使用同一個Shader的話可以使用Batch來演算所有相同Material的字體。
基本計算
基本計算
基本計算，取出Sprite跟Alpha當基本參數，以便後續計算。
Outline計算
Outline計算
先取UI Outline Texture為變數方便後續取用
設定一個float變數，偏移UV產生四個方向(上下左右)的圖案，最終整合四個方位的Alpha，再減掉原生Sprite的Alpha，會得到向外擴張的Alpha，最終Lerp就可以得到外框線。
Innerline計算
Innerline計算
跟上述的方法幾乎一樣，只是最最終的計算不一樣，內框線是將所有偏移的UI的alpha做乘算，在-1後會取得反向的Alpha，最中乘以原生UI就會得到像內的縮小的Alpha，最終Lerp就可以得到內框線。
最終貼圖計算/Alpha計算
最終貼圖計算/Alpha計算
將上述的Alpha用Lerp計算後，就可以得出效果，最終導向ShaderColor就完工了
這個步驟不需要講什麼
Google Sites
Report abuse