Unity之UGUI-特效遮挡问题

一.问题背景

在项目开发过程中,美术和特效时常会给你出一些难题,比如在一张Image上展示一层特效,然后又在这层特效上展示一张Image,这一坨为一个独立元素,还得在滚动框里滑动,滚动的时候,遮挡逻辑依旧有效。

 上图

Unity之UGUI-特效遮挡问题_第1张图片

二.解决方案
方案1.给顶层图片添加Canvas,调整OrderinLayer的值

1.调整Canvas的RenderMode为ScreenSpace-Camera,给RenderCamera一个摄像机。
2.调整粒子特效的Renderer的Order inLayer的数值,因为新建的UI和Canvas的SortingLayer为Defalut,OrderinLayer为0。想要粒子特效在底图之上,其OrderinLayer的值就要比底图的值大,将粒子特效的OrderinLayer的值调为1。
3.将顶图的OrderinLayer值调为2,比粒子特效的数值大即可。但是UGUI的ImageImspector面板是没有OrderinLayer的属性的。给Image添加Canvas,调节其OrderinLayer的值。

方案2.将顶层Image替换为SpriteRenderer,调节OrderinLayer的值

1.调整Canvas的RenderMode为ScreenSpace-Camera,给RenderCamera一个摄像机。
2.调整粒子特效的Renderer的Order inLayer的数值,因为新建的UI和Canvas的SortingLayer为Defalut,OrderinLayer为0。想要粒子特效在底图之上,其OrderinLayer的值就要比底图的值大,将粒子特效的OrderinLayer的值调为1。
3.将Image改为SpriteRenderer,然后调节OrderinLayer的值

方案3.自制UIMaskMaterial,控制粒子特效的显示区间

1.调整Canvas的RenderMode为ScreenSpace-Camera,给RenderCamera一个摄像机。
2.调整粒子特效的Renderer的Order inLayer的数值,因为新建的UI和Canvas的SortingLayer为Defalut,OrderinLayer为0。想要粒子特效在底图之上,其OrderinLayer的值就要比底图的值大,将粒子特效的OrderinLayer的值调为1。
3.在粒子区间放置一个空Image,添加自制的MaskMaterial材质,然后调整特效的Masking为VisibleInsideMask, 在顶层的图片只需要添加 mask遮罩即可遮挡粒子特效了。

     上图

Unity之UGUI-特效遮挡问题_第2张图片
Unity之UGUI-特效遮挡问题_第3张图片
Unity之UGUI-特效遮挡问题_第4张图片

Unity之UGUI-特效遮挡问题_第5张图片

Unity之UGUI-特效遮挡问题_第6张图片

Unity之UGUI-特效遮挡问题_第7张图片

Unity之UGUI-特效遮挡问题_第8张图片

三.代码

MaskMaterial使用的Shader的脚本为

// Upgrade NOTE: replaced 'mul(UNITY_MATRIX_MVP,*)' with 'UnityObjectToClipPos(*)'

Shader "UI/MaskDefault"
{
	Properties
	{
		[PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {}
		_Color ("Tint", Color) = (1,1,1,1)
		
		_StencilComp ("Stencil Comparison", Float) = 8
		_Stencil ("Stencil ID", Float) = 0
		_StencilOp ("Stencil Operation", Float) = 0
		_StencilWriteMask ("Stencil Write Mask", Float) = 255
		_StencilReadMask ("Stencil Read Mask", Float) = 255

		_ColorMask ("Color Mask", Float) = 15

		[Toggle(UNITY_UI_ALPHACLIP)] _UseUIAlphaClip ("Use Alpha Clip", Float) = 0
	}

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

		Cull Off
		Lighting Off
		ZWrite Off
		ZTest [unity_GUIZTestMode]
		Blend SrcAlpha OneMinusSrcAlpha
		ColorMask 0

		Stencil
		{
			Ref 1
			Comp Always
			Pass Replace
		}

		Pass
		{
		CGPROGRAM
			#pragma vertex vert
			#pragma fragment frag

			#include "UnityCG.cginc"
			#include "UnityUI.cginc"

			#pragma multi_compile __ UNITY_UI_ALPHACLIP
			
			struct appdata_t
			{
				float4 vertex   : POSITION;
				float4 color    : COLOR;
				float2 texcoord : TEXCOORD0;
			};

			struct v2f
			{
				float4 vertex   : SV_POSITION;
				fixed4 color    : COLOR;
				half2 texcoord  : TEXCOORD0;
				float4 worldPosition : TEXCOORD1;
			};
			
			fixed4 _Color;
			fixed4 _TextureSampleAdd;
			float4 _ClipRect;

			v2f vert(appdata_t IN)
			{
				v2f OUT;
				OUT.worldPosition = IN.vertex;
				OUT.vertex = UnityObjectToClipPos(OUT.worldPosition);

				OUT.texcoord = IN.texcoord;
				
				#ifdef UNITY_HALF_TEXEL_OFFSET
				OUT.vertex.xy += (_ScreenParams.zw-1.0)*float2(-1,1);
				#endif
				
				OUT.color = IN.color * _Color;
				return OUT;
			}

			sampler2D _MainTex;

			fixed4 frag(v2f IN) : SV_Target
			{
				half4 color = (tex2D(_MainTex, IN.texcoord) + _TextureSampleAdd) * IN.color;
				
				color.a *= UnityGet2DClipping(IN.worldPosition.xy, _ClipRect);
				
				#ifdef UNITY_UI_ALPHACLIP
				clip (color.a - 0.001);
				#endif

				return color;
			}
		ENDCG
		}
	}
}

四.工程项目

链接:https://pan.baidu.com/s/1VByGBqJ7sCjAjkPPkfzW0A
提取码:h56i
复制这段内容后打开百度网盘手机App,操作更方便哦–来自百度网盘超级会员V4的分享

参考:
UGUI粒子遮罩(UI Mask 遮挡粒子)
UnityShader实例09:Stencil Buffer&Stencil Test

你可能感兴趣的:(Unity组件,unity,粒子特效,遮罩,UGUI)