Unity 粒子特效在UI中使用裁剪效果

1.使用Sprite Mask

首先建立一个粒子特效在UI中显示

新建一个在场景下新建一个空物体，添加Sprite Mask组件，将其的Layer设置为UI相机渲染的UI层， 并将其添加到Canvas子物体中，调整好大小，并选择合适的Sprite，

效果：

2.使用模板测试（以内置管线为例）

首先下载Unity官网上的内置shader源码

查看Unity中粒子特效使用的shader是Standard Unlit

下载之后找到粒子特效的shader源码

将此源码复制出一份重命名shader（命名用以区分，可自定义）

增加模板测试代码

    Properties{..........省略代码........................_StencilComp ("Stencil Comparison", Float) = 6_Stencil ("Stencil Ref", Float) = 1_StencilOp ("Stencil Operation Pass", Float) = 0_StencilWriteMask ("Stencil Write Mask", Float) = 255_StencilReadMask ("Stencil Read Mask", Float) = 255_ColorMask ("Color Mask", Float) = 15..........省略代码........................}

    SubShader{................省略代码..................Stencil{Ref [_Stencil]Comp [_StencilComp]Pass [_StencilOp]ReadMask [_StencilReadMask]WriteMask [_StencilWriteMask]}................省略代码..................}

再将自定义shader面板的代码注释掉，否则无法显示增加的模板值设置

设置粒子特效材质的模板测试值如下：

新建一个Mask材质球，选用UIDefault shader

 设置模板测试值如下：

在Canvas中新建Image，并将材质球设置到Image上

结果：

3.将超出范围的粒子的透明度变为0（以内置管线为例）

取一个区域，在这个范围的粒子透明度为1，超出范围的将透明度设置为0，如下图：

在Shader代码中添加一个属性如下，x为x轴最小值，y为x轴最大值，z为y轴最小值，w为y轴最大值。

 _Rect("Rect",Vector) = (-20,20,-20,20)

在顶点着色器中计算这个粒子的世界坐标

o.posWs = mul(unity_ObjectToWorld, v.vertex).xyz;

在片元着色器中计算是否在此范围中，使用step函数计算顶点的世界坐标是否在区域中，不在区域中为0，属于区域为1。

  col.a *= step(_Rect.x,i.posWs.x) * step(i.posWs.x,_Rect.y);col.a *= step(_Rect.z,i.posWs.y) * step(i.posWs.y,_Rect.w);col.rgb *= col.a;

 结果：

在UI上使用空物体的四个顶点来控制裁剪区域，代码如下：

public class ClipParticle : MonoBehaviour
{public RectTransform m_RectTransform;public Camera m_Camera;public Material m_Material;Vector3[] v;public float _minX;public float _maxX;public float _minY;public float _maxY;public void Start(){v = new Vector3[4];this.CalcVector();}void Update(){if (m_RectTransform.hasChanged){this.CalcVector();}}void CalcVector(){this.OnResetRect();m_RectTransform.GetWorldCorners(v);for (int i = 0; i < 4; i++){//首先将UI坐标转换为屏幕坐标，再将屏幕坐标转换为世界坐标this.SetInfo(m_Camera.ScreenToWorldPoint(RectTransformUtility.WorldToScreenPoint(m_Camera, v[i])));}m_Material.SetVector("_Rect", new Vector4(_minX, _maxX, _minY, _maxY));m_RectTransform.hasChanged = false;}public void SetInfo(Vector3 pos){if (_minX > pos.x){_minX = pos.x;}if (_maxX < pos.x){_maxX = pos.x;}if (_minY > pos.y){_minY = pos.y;}if (_maxY < pos.y){_maxY = pos.y;}}void OnResetRect(){_minX = float.PositiveInfinity;_maxX = float.NegativeInfinity;_minY = float.PositiveInfinity;_maxY = float.NegativeInfinity;}
}

在Cavas下新建一个空物体 

将新建的脚本 ClipParticle挂载到新建的空物体上，调整空物体大小即可调整裁剪区域。

结果：

参考链接：

Game effect tutorial - How to use Mask Particle in Unity 2017 (youtube.com)

UNITY SPRITE MASK TUTORIAL - EASY (youtube.com)