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 的背景设成不透明, 就知道玩蛋了 : 

　　因此这条路是行不通的, 再见.