Unity ScrollView特效裁切最佳方法

Scrollview在开发过程中非常常见，背包、成就、排行榜等一些功能都会遇到，平时的使用过程中可能还好，不会出太多问题，可是一旦策划要在里面的item上增加特效，问题就来了，因为粒子不会被裁切，导致滑动过程中出现问题。

美术给我的特效包含了多个内容，导致解决问题相当复杂

1.特效中有粒子，需要对粒子进行裁切

2.特效中有面片，用的meshrender

3.有的特效要求在图片后面，所以要调整特效和图片层级，这样一来新的问题出现了：图片无法被裁切

为了解决Scrollview的裁切问题我找了很多方法，也尝试了一些：

1.把组件的Mask改为Rect Mask 2D ，然后加上Sprite Mask物体，再修改粒子系统里的Masking属性。这个方法的确可以不使用代码就能裁切特效了，但是不够精准，并且在不同分辨率下如果UI面板大小有变动的话，也要进行相应修改，相当麻烦，而且只能解决问题1，其他效果不能裁切，pass。

2.增加一个相机，视口只拍你想要的区域，然后改变相机深度进行渲染。这种方法看似可行，不过我们的项目canvas使用了camera模式，只用单相机渲染，达不到想要的效果，pass。

3.还是增加一个相机，这次是用的RenderTexture和RawImage组合。然而这种方式拍出来的特效粒子特别模糊，画质感染，pass。

看来看去最好的方法还是还是要使用shader进行裁切了，原理十分简单，就是在shader传入相应的世界坐标，然后在像素里面判断这个像素点所在的世界坐标，如果不在范围内，就把它的Alpha值变为0，自然就不显示了。问题1和问题2中的shader直接修改，问题3的解决方法就是新建一个Material放在Image里面，照样进行裁切。

下面是常用的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;
using GameFramework;

namespace Proj
{
    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()
        {
            var ui = GameFrameEntry.GetModule<UIModule>().GetUI<UI.MainMenu.CardUI>();
            if (ui != null)
            {
                top = ui.TopPosition;
                bottom = ui.BottomPosition;
                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);
        }
    }
}

最后贴一个Image用于裁剪的Shader

Shader "Particles/UICut" 
{
	Properties{
		_TintColor("Tint Color", Color) = (0.5,0.5,0.5,0.5)
		_MainTex("Particle Texture (A = Transparency)", 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+300" "IgnoreProjector" = "True" "RenderType" = "Transparent" }
			//Blend SrcAlpha One//注意这里的混合模式
			Blend SrcAlpha OneMinusSrcAlpha
			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;
						//----end----
					};

					float4 _MainTex_ST;

					v2f vert(appdata_t v)
					{
						v2f o;
						o.vertex = UnityObjectToClipPos(v.vertex);
						o.color = v.color;
						o.texcoord = v.texcoord;//TRANSFORM_TEX(v.texcoord,_MainTex);
						//新增，计算顶点的世界坐标
						o.worldPos = mul(unity_ObjectToWorld, v.vertex).xy;
						//----end----
						return o;
					}

					sampler2D _CameraDepthTexture;
					float _InvFade;

					fixed4 frag(v2f i) : COLOR
					{
					bool inArea = i.worldPos.x >= _MinX && i.worldPos.x <= _MaxX && i.worldPos.y >= _MinY && i.worldPos.y <= _MaxY;
					
					//如果在裁剪框内return原本的效果，否则即隐藏
					//return inArea ? 2.0f * i.color * _TintColor * tex2D(_MainTex, i.texcoord) : fixed4(0,0,0,0);
					return inArea ? tex2D(_MainTex, i.texcoord)*i.color : fixed4(0, 0, 0, 0);
				}
				ENDCG
			}
		}
	}
}