UGUI 特效怎樣在UI上裁剪

　　恰好碰到有人問怎樣把粒子特效放到 UI 上而且能正確被 Mask 裁剪, 首先想到給粒子效果的 Shader 添加模板模仿通常 UI 的模板方式, 應該就能正確裁剪了吧, 不過沒那麼簡單, 咱們看到在通常 UI 上, 沒在 Mask 下的 UI 對比在 Mask 下的 UI, 它們的材質設置是不同的, 也就是說有哪一個組件對材質進行了修改, 查了一下就是 Mask 組件, 它會收集子節點下的全部對象, 而後對能夠修改的材質進行修改, 因此才能自動控制裁剪.

　　爲了搞清楚, 這裏作了一下測試:

1. 建立一個 UI Shader, 直接從 UI/Default 複製過來, 代碼和內建徹底同樣.

 

2. 建立 ScrollView, 並添加一個默認圖片, 添加一個 Quad 使用 MyImage 材質 

　　普通 Image 看到材質被修改了

 

　　這個 Quad 就跟普通特效同樣, 材質是沒有被修改的

 

3. 咱們建立一個類繼承 MaskableGraphic 看看添加上去以後有什麼效果

using UnityEngine;
using UnityEngine.UI;

[ExecuteInEditMode]
public class MyUI : MaskableGraphic
{
}

　　看到只要它繼承了MaskableGraphic 就會被 Mask 找到, 而後材質就會被設置爲裁剪了. 只不過這個 Quad 的渲染已經徹底跟它的模型沒有任何關係了...

 

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

　　引擎提供的方法就比較簡單了, 只要加一個 Sprite Mask, 外加粒子渲染器中選上 Masking 選項便可. 不過因爲使用上的緣由, UI 系統就只能使用相機渲染模式了, 由於 Overlay 模式不能控制顯示對象, 粒子系統就沒法被顯示出來.

1. 添加 Sprite Mask 

2. 粒子效果打開 Masking, 讓它在 Mask 範圍內顯示 

　　這樣就能在 Sprite Mask 範圍內顯示了, 不過官方提供的方法若是越簡單, 出問題的概率就越大, 果真, 若是有多個 Sprite Mask 的話, 它們之間即便沒有層級關係, 也是會穿插的...

　　同一個層級的兩個 Mask, 兩個粒子發射器發射不一樣顏色的球, 結果粒子能在另外一個 Sprite Mask 中顯示出來...

 

　　接下來看看它們在 Scroll View 中的表現吧 : 

　　好吧, 直接跪了, Scroll View 的 Mask 或者換成 RectMask2D 都是沒法對 Sprite Mask 裁剪的, 厲害了...

　　問題愈來愈多了哈, 繼續來, 眼睛一瞟發現 Scroll View 內的例子效果比窗口外的模糊? 檢查一下 :

 

　　原來渲染順序都不符合需求啊, 它是在 UI 渲染以前渲染的, 把 Scroll View 的背景設成不透明, 就知道玩蛋了 : 

　　因此這條路是行不通的, 再見.