UGUI 用图片遮罩

在UGUI或者Sprite中，有图片作为遮罩层的情况，但是因为使用了SpriteAtlas，会造成取得的遮罩的uv是错误的。

所以我们需要得到正确的uv。

有两种方式，其实算法都一样，目的就是获取正确的遮罩层的uv。

第一种，通过外部传入一个vector4的值

在c#中，对材质传递Sprite信息值

if (img.sprite)
{
    Sprite sprite = img.sprite;
    Vector4 result = new Vector4(sprite.textureRect.min.x / sprite.texture.width,
        sprite.textureRect.min.y / sprite.texture.height,
        sprite.textureRect.max.x / sprite.texture.width,
        sprite.textureRect.max.y / sprite.texture.height);

    img.material = Instantiate(heroIcon.material);
    img.material.SetVector("_Rect", result);
}

在shader中，自然需要一个_Rect来接收

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

Shader "Filter2D/Unlit/UGUI Mask"
{
	Properties
	{
		[PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {}
		_MaskTex ("Mask 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

		_Gray("Gray Progress",Range(0,1)) = 1
	}

	SubShader
	{
		Tags
		{ 
			"Queue"="Transparent" 
			"IgnoreProjector"="True" 
			"RenderType"="Transparent" 
			"PreviewType"="Plane"
			"CanUseSpriteAtlas"="True"
		}
		
		Stencil
		{
			Ref [_Stencil]
			Comp [_StencilComp]
			Pass [_StencilOp] 
			ReadMask [_StencilReadMask]
			WriteMask [_StencilWriteMask]
		}

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

		Pass
		{
		CGPROGRAM
			#pragma vertex vert
			#pragma fragment frag

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

			#pragma multi_compile __ UNITY_UI_ALPHACLIP

			inline fixed3 frag_gray(fixed3 color,fixed progress){
				fixed gray = dot(color.rgb, fixed3(0.299, 0.587, 0.114));
				color.rgb = lerp(color.rgb,fixed3(gray, gray, gray),progress) ;
				return color;
			}
			
			struct appdata_t
			{
				float4 vertex   : POSITION;
				float4 color    : COLOR;
				float2 texcoord : TEXCOORD0;
			};

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

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

				OUT.texcoord = IN.texcoord;
				OUT.maskuv = (IN.texcoord.xy - _Rect.xy) / (_Rect.zw - _Rect.xy);
				
				#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;
			fixed _Gray;
			sampler2D _MaskTex;

			fixed4 frag(v2f IN) : SV_Target
			{
				half4 color = (tex2D(_MainTex, IN.texcoord) + _TextureSampleAdd) * IN.color;
				//color.rgb = frag_gray(color.rgb,_Gray);

				half4 mcol = tex2D(_MaskTex, IN.maskuv);
				color.a *= mcol.r;

				color.a *= UnityGet2DClipping(IN.worldPosition.xy, _ClipRect);
				
				#ifdef UNITY_UI_ALPHACLIP
				clip (color.a - 0.001);
				#endif

				return color;
			}
		ENDCG
		}
	}
}

 

 

上面那种需要每个材质都不一样，可能会造成drawCall比较高。

下面是通过把这个Sprite的数值，设置到Image的uv中，类似PositionAsUV1组件的功能。

第二种，需要写一个类，继承BaseMeshEffect

using UnityEngine;
using UnityEngine.UI;

public class SpriteRectToUV12 : BaseMeshEffect
{
    private Image _img;
    protected override void Awake()
    {
        base.Awake();
        _img = GetComponent<Image>();
    }

    public override void ModifyMesh(VertexHelper vh)
    {
        if (!IsActive()) return;
        if (_img && _img.sprite)
        {
            var count = vh.currentVertCount;
            if (count == 0)
                return;

            Sprite sprite = _img.sprite;
            Vector2 uv1 = new Vector2(sprite.textureRect.min.x / sprite.texture.width, sprite.textureRect.min.y / sprite.texture.height);
            Vector2 uv2 = new Vector2(sprite.textureRect.max.x / sprite.texture.width, sprite.textureRect.max.y / sprite.texture.height);

            UIVertex vert = new UIVertex();
            for (int i = 0; i < count; i++)
            {
                vh.PopulateUIVertex(ref vert, i);
                vert.uv1 = uv1;
                vert.uv2 = uv2;
                vh.SetUIVertex(vert, i);
            }
        }
    }
}

在shader中，就需要对uv1和uv2处理

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

Shader "Filter2D/Unlit/UGUI Mask"
{
	Properties
	{
		[PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {}
		_MaskTex ("Mask 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

		_Gray("Gray Progress",Range(0,1)) = 1
	}

	SubShader
	{
		Tags
		{ 
			"Queue"="Transparent" 
			"IgnoreProjector"="True" 
			"RenderType"="Transparent" 
			"PreviewType"="Plane"
			"CanUseSpriteAtlas"="True"
		}
		
		Stencil
		{
			Ref [_Stencil]
			Comp [_StencilComp]
			Pass [_StencilOp] 
			ReadMask [_StencilReadMask]
			WriteMask [_StencilWriteMask]
		}

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

		Pass
		{
		CGPROGRAM
			#pragma vertex vert
			#pragma fragment frag

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

			#pragma multi_compile __ UNITY_UI_ALPHACLIP

			inline fixed3 frag_gray(fixed3 color,fixed progress){
				fixed gray = dot(color.rgb, fixed3(0.299, 0.587, 0.114));
				color.rgb = lerp(color.rgb,fixed3(gray, gray, gray),progress) ;
				return color;
			}
			
			struct appdata_t
			{
				float4 vertex   : POSITION;
				float4 color    : COLOR;
				float2 texcoord : TEXCOORD0;
				float2 uv1 : TEXCOORD1;
				float2 uv2 : TEXCOORD2;
			};

			struct v2f
			{
				float4 vertex   : SV_POSITION;
				fixed4 color    : COLOR;
				half2 texcoord  : TEXCOORD0;
				half2 maskuv  : TEXCOORD1;
				float3 worldPosition : TEXCOORD2;
			};
			
			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;
				OUT.maskuv = (IN.texcoord.xy - IN.uv1) / (IN.uv2 - IN.uv1);
				
				#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;
			fixed _Gray;
			sampler2D _MaskTex;

			fixed4 frag(v2f IN) : SV_Target
			{
				half4 color = (tex2D(_MainTex, IN.texcoord) + _TextureSampleAdd) * IN.color;
				//color.rgb = frag_gray(color.rgb,_Gray);

				half4 mcol = tex2D(_MaskTex, IN.maskuv);
				color.a *= mcol.r;

				color.a *= UnityGet2DClipping(IN.worldPosition.xy, _ClipRect);
				
				#ifdef UNITY_UI_ALPHACLIP
				clip (color.a - 0.001);
				#endif

				return color;
			}
		ENDCG
		}
	}
}

要注意这个Image的Canvas节点中的Additional Shader Channels中要勾选TexCoord1、TexCoord2，不然没效果。

最后注意我这里的遮罩图是一张黑白图，白色区域表示要显示的区域，黑色是透明区。