UGUI粒子效果裁剪

这里先介绍下简单方便的做法，先看看效果：

具体做法：

1. 首先把mask组件替换为rect mask 2D组件，因为mask的裁剪的原理是根据stencil buffer，而且只会裁剪子节点的UI，不会裁剪粒子。
2. 创建一个空的gameobject，命名为MaskRect，添加sprite mask组件，并选择裁剪的sprite，把scale调整到scrollview content的区域大小。
3. 每个item下面挂在粒子特效，并且设置粒子特效的mask属性为visible inside mask
4. 然后拖动scrollview，你便会发现粒子特效和UI一块被裁剪了

以上粒子特效虽然成功裁剪，但是有一个问题，就是粒子特效裁剪区域不会自适应大小，如果屏幕分辨率发生变化，就得手动调节裁剪区域的大小。

更优雅的方式就是修改shader

修改shader的原理就是让可见区域的alpha为1，不可见修改为0。下面是常用的Addtive和AlphaBlended的Shader源码修改后的代码 可直接挂上去，按照这个方法可以对其他shader进行修改：
Additive：

Shader "Particles/MyAdditive" {

	Properties{

	_TintColor("Tint Color", Color) = (0.5,0.5,0.5,0.5)

	_MainTex("Particle Texture", 2D) = "white" {}

	_InvFade("Soft Particles Factor", Range(0.01,3.0)) = 1.0
	//特效裁切修改-------
	_MinX("MinX", Float) = -1000
	_MaxX("MaxX", Float) = 1000
	_MinY("MinY", Float) = -10
	_MaxY("MaxY", Float) = 10
	//------------------

	}

	Category{

		Tags { "Queue" = "Transparent" "IgnoreProjector" = "True" "RenderType" = "Transparent" }

		Blend SrcAlpha One

		AlphaTest Greater .01

		ColorMask RGB


		Cull Off Lighting Off ZWrite Off Fog { Color(0,0,0,0) }

		BindChannels {

		Bind "Color", color

		Bind "Vertex", vertex

		Bind "TexCoord", texcoord

	}


	SubShader {

		Pass {



		CGPROGRAM

		#pragma vertex vert

		#pragma fragment frag

		#pragma fragmentoption ARB_precision_hint_fastest

		#pragma multi_compile_particles



		#include "UnityCG.cginc"



		sampler2D _MainTex;

		fixed4 _TintColor;
		//特效裁切修改-------
		float _MinX;
		float _MaxX;
		float _MinY;
		float _MaxY;
		//------------------

		struct appdata_t {

		float4 vertex : POSITION;

		fixed4 color : COLOR;

		float2 texcoord : TEXCOORD0;

		};



		struct v2f {

		float4 vertex : POSITION;

		fixed4 color : COLOR;

		float2 texcoord : TEXCOORD0;
		//特效裁切修改-------
		float2 worldPos : TEXCOORD1;
		//------------------

		#ifdef SOFTPARTICLES_ON

		float4 projPos : TEXCOORD2;


		#endif

		};



		float4 _MainTex_ST;



		v2f vert(appdata_t v)
		{

		v2f o;

		o.vertex = UnityObjectToClipPos(v.vertex);

		#ifdef SOFTPARTICLES_ON

		o.projPos = ComputeScreenPos(o.vertex);

		COMPUTE_EYEDEPTH(o.projPos.z);

		#endif

		o.color = v.color;

		o.texcoord = TRANSFORM_TEX(v.texcoord,_MainTex);
		o.worldPos = mul(unity_ObjectToWorld, v.vertex).xy;

		return o;

		}



		sampler2D _CameraDepthTexture;

		float _InvFade;



		fixed4 frag(v2f i) : COLOR

		{

		#ifdef SOFTPARTICLES_ON

		float sceneZ = LinearEyeDepth(UNITY_SAMPLE_DEPTH(tex2Dproj(_CameraDepthTexture, UNITY_PROJ_COORD(i.projPos))));

		float partZ = i.projPos.z;

		float fade = saturate(_InvFade * (sceneZ - partZ));

		i.color.a *= fade;

		#endif
		//特效裁切修改-------
		//是否在区域内
		bool inArea = i.worldPos.x >= _MinX && i.worldPos.x <= _MaxX && i.worldPos.y >= _MinY && i.worldPos.y <= _MaxY;
		//------------------
		return inArea ? 2.0f * i.color * _TintColor * tex2D(_MainTex, i.texcoord) : fixed4(0, 0, 0, 0);

		}

		ENDCG

		}

	}


	SubShader {

		Pass {

		SetTexture[_MainTex] {

		constantColor[_TintColor]

		combine constant * primary

		}

		SetTexture[_MainTex] {

		combine texture * previous DOUBLE

		}

		}

	}


	SubShader {

			Pass {

			SetTexture[_MainTex] {

			combine texture * primary

			}

			}

	}

	}

}

AlphaBlended:

Shader "Particles/MyAlphaBlended" {

	Properties{

	_TintColor("Tint Color", Color) = (0.5,0.5,0.5,0.5)

	_MainTex("Particle Texture", 2D) = "white" {}

	_InvFade("Soft Particles Factor", Range(0.01,3.0)) = 1.0
	_MinX("MinX", Float) = -1000
	_MaxX("MaxX", Float) = 1000
	_MinY("MinY", Float) = -10
	_MaxY("MaxY", Float) = 10

	}

	Category{

		Tags { "Queue" = "Transparent" "IgnoreProjector" = "True" "RenderType" = "Transparent" "PreviewType" = "Plane" }

		Blend SrcAlpha OneMinusSrcAlpha

		Cull Off Lighting Off ZWrite Off Fog { Color(0,0,0,0) }
		//AlphaTest Greater .01

		ColorMask RGB

		BindChannels {

		Bind "Color", color

		Bind "Vertex", vertex

		Bind "TexCoord", texcoord

		}



		// ---- Fragment program cards

		SubShader {

		Pass {



		CGPROGRAM

		#pragma vertex vert

		#pragma fragment frag

		#pragma fragmentoption ARB_precision_hint_fastest

		#pragma multi_compile_particles



		#include "UnityCG.cginc"



		sampler2D _MainTex;

		fixed4 _TintColor;

		float _MinX;
		float _MaxX;
		float _MinY;
		float _MaxY;
		struct appdata_t {

		float4 vertex : POSITION;

		fixed4 color : COLOR;

		float2 texcoord : TEXCOORD0;

		};



		struct v2f {

		float4 vertex : POSITION;

		fixed4 color : COLOR;

		float2 texcoord : TEXCOORD0;

		float2 worldPos : TEXCOORD1;

		#ifdef SOFTPARTICLES_ON

		float4 projPos : TEXCOORD2;


		#endif

		};



		float4 _MainTex_ST;



		v2f vert(appdata_t v)
		{

		v2f o;

		o.vertex = UnityObjectToClipPos(v.vertex);

		#ifdef SOFTPARTICLES_ON

		o.projPos = ComputeScreenPos(o.vertex);

		COMPUTE_EYEDEPTH(o.projPos.z);

		#endif

		o.color = v.color;

		o.texcoord = TRANSFORM_TEX(v.texcoord,_MainTex);
		o.worldPos = mul(unity_ObjectToWorld, v.vertex).xy;

		return o;

		}



		sampler2D _CameraDepthTexture;

		float _InvFade;



		fixed4 frag(v2f i) : COLOR

		{

		#ifdef SOFTPARTICLES_ON

		float sceneZ = LinearEyeDepth(UNITY_SAMPLE_DEPTH(tex2Dproj(_CameraDepthTexture, UNITY_PROJ_COORD(i.projPos))));

		float partZ = i.projPos.z;

		float fade = saturate(_InvFade * (sceneZ - partZ));

		i.color.a *= fade;

		#endif
		//是否在区域内
		bool inArea = i.worldPos.x >= _MinX && i.worldPos.x <= _MaxX && i.worldPos.y >= _MinY && i.worldPos.y <= _MaxY;

		return inArea ? 2.0f * i.color * _TintColor * tex2D(_MainTex, i.texcoord) : fixed4(0, 0, 0, 0);

		}

		ENDCG

		}

	}

	SubShader {

		Pass {

		SetTexture[_MainTex] {

		constantColor[_TintColor]

		combine constant * primary

		}

		SetTexture[_MainTex] {

		combine texture * previous DOUBLE

		}

		}

	}


	SubShader {

			Pass {

			SetTexture[_MainTex] {

			combine texture * primary

			}

			}

	}

	}

}

Shader准备好之后需要做的就是给这个Shader传递数值了

1.获取数值，这里并没有去进行什么计算，我直接在Viewport上挂了上下两个点，到时候直接用这两个物体的世界坐标Y值就行了，注意调整锚点方式，这样面对不同分辨率的情况，不管Canvas怎么变，我这里的的裁切范围总是确定的

2.传递数值，直接在特效上挂这个脚本

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;


public class Cut : MonoBehaviour
{
    ParticleSystem[] particleSystems;
    Image[] images;
    MeshRenderer[] renders;
    List<Material> m_materialList = new List<Material>();//存放需要修改Shader的Material
    float top;
    float bottom;

    void Awake()
    {
        gameObject.SetActive(false);
        Limit();
    }

    void Limit()
    {
        //-----------紧测试使用，实际项目中，自己通过管理类获取对应数值----------//
        AdaptComp adaptRadio = FindObjectOfType<AdaptComp>();
        top = GameObject.Find("Top").transform.position.y * adaptRadio.GetRadio();
        bottom = GameObject.Find("Bottom").transform.position.y * adaptRadio.GetRadio();
        ///----------------------------------------------------------------------//

        particleSystems = transform.GetComponentsInChildren<ParticleSystem>();
        images = transform.GetComponentsInChildren<Image>();
        renders = transform.GetComponentsInChildren<MeshRenderer>();
        //获取所有需要修改shader的material
        for (int i = 0; i < particleSystems.Length; i++)
        {
            Material[] mat = particleSystems[i].GetComponent<Renderer>().materials;//有的地方有多个材质 拖尾材质
            for (int j = 0; j < mat.Length; j++)
            {
                if (mat[j].name != "Default-Material (Instance)")
                {
                    m_materialList.Add(mat[j]);
                }
            }
        }

        for (int i = 0; i < images.Length; i++)
        {
            m_materialList.Add(images[i].material);
        }

        for (int i = 0; i < renders.Length; i++)
        {
            m_materialList.Add(renders[i].material);
        }
        //这里是竖版 所以对X轴没有做限制
        for (int i = 0; i < m_materialList.Count; i++)
        {
            m_materialList[i].SetFloat("_MaxY", top);
            m_materialList[i].SetFloat("_MinY", bottom);
        }
        gameObject.SetActive(true);
    }
}

3.注意这里的top和bottom的值一定要计算下，同比例的分辨率用款或者高计算当前缩放值，不同比例的分辨率，以宽适配就用宽来计算缩放，否则用高计算缩放值。不计算缩放裁剪区域上下会在不同分辨率有误差！这里给出adaptcomp的代码，挂在相应的Canvas下面即可！

adaptcomp

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class AdaptComp:MonoBehaviour
{ 
    /// <summary>
    /// 制作标准分辨率,竖屏
    /// </summary>
    private const float STANDARD_W = 1080f;
    private const float STANDARD_H = 1920f;

    /// <summary>
    /// 缩放系数
    /// </summary>
    private float scaleRatio = 1;

    /// <summary>
    /// 是否以高作为适配基准,如果以高为准，
    /// Canvas scaler的match设置为1
    /// 否则设置为0
    /// </summary>
    private bool adaptH = false;

    private CanvasScaler mCanvasScaler;

    void Awake()
    {
        mCanvasScaler = GetComponent<CanvasScaler>();
        mCanvasScaler.uiScaleMode = CanvasScaler.ScaleMode.ScaleWithScreenSize;
        mCanvasScaler.referenceResolution = new Vector2(STANDARD_W, STANDARD_H);
        mCanvasScaler.screenMatchMode = CanvasScaler.ScreenMatchMode.MatchWidthOrHeight;
        adaptH = STANDARD_H / STANDARD_W > Screen.height / (float)Screen.width;//谁变小就以谁为基准
        mCanvasScaler.matchWidthOrHeight = adaptH ? 1 : 0;
    }

    public float GetRadio()
    {
        scaleRatio = adaptH ? Screen.height / STANDARD_H : Screen.width / STANDARD_W;
        return scaleRatio;
    }
}

看看不同分辨率下的裁剪效果：
10801920

10802160

768*1024