UI Mask in Unity

shellycute

遮罩 (Mask) 就像是賦予一張圖多種外型, 隨著遮罩的設定裁切成各種形狀. 在 Unity, 不管是 UGUI 或 NGUI 都有提供 UI Mask 的功能. 來試試吧!

參考 Unity UI Mask Tutorial, 以 Panel object 提供遮罩給所有子物件 (children)
> 新增一個 UI -> Panel, 並在 Panel 上增加一個 Mask Component
> 在 Panel 下新增 UI -> Image, 並附上 2D 圖檔
> 製作一個包含透明 (Alpha) 部分的圖檔 (.png) 作為 mask image
> 將 mask image 拖拉至 Panel object 的 Image component 裡的 source image 屬性

mask component

NGUI 也是類似的作法: Simply mask a NGUI Texture nested in a NGUI panel,
> 新增 NGUI Panel, 設定 Panel script 的 Clipping 屬性為 Texture Mask
> Import 欲作為 Mask 的透明圖檔, 並將之附於 Panel 屬性
> Panel 下新增任何 UI 子物件 (i.e., UI Texture, UI Sprite, …)

ngui mask

以上 (UGUI, NGUI) 做出來一樣的效果:
ugui mask

PS. Import 透明圖檔 (.png) 後, 修改圖檔的 import settings: Set the texture type to Sprite(2D and UI), 才能讓 UI 物件使用該圖檔

也許 UGUI 與 NGUI 的 Panel 底層都是用 Shader 做出 clipping, 產生 Mask 效果. 那麼其實我們也能自己寫 clipping shader ? 有興趣的話 ~ 參考 Masking and clipping textures in Unity 5.4, NGUI 3.9.8
自己設計 Mask shader 也是挺有趣的 😀

發表留言