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

1.使用Sprite Mask

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

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

效果：

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

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

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

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

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

增加模板测试代码

cs 复制代码

    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
        ..........省略代码........................
    }

cs 复制代码

    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轴最大值。

cpp 复制代码

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

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

cpp 复制代码

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

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

cpp 复制代码

  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上使用空物体的四个顶点来控制裁剪区域，代码如下：

cs 复制代码

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)