UGUI 实现引导

实现ui的引导有很多种方式，一般都是在再外层盖上一个 掩码层。 然后把需要引导的区域镂空出来。

镂空的区域可以用很多ui的拼接，个人感觉这种方式比较麻烦。下面给出一种解决方案，直接在着色器中实现镂空的区域。

直接把镂空的区域传给着色器，然后再着色器中把这个区域透明掉即可。

1. 根据ui控件，得到镂空区域 代码如下：

   
   
       Vector3[] fourCornersArray = new Vector3[4];
        if (bOnce)
        {
            mButton.GetWorldCorners(fourCornersArray);
        }
        else
        {
            mButton1.GetWorldCorners(fourCornersArray);
        }
        Camera cameraTmp = null;
        if (mCanvas.renderMode == RenderMode.ScreenSpaceOverlay)
        {
        }
        else
        {
            cameraTmp = mCanvas.worldCamera;
        }
        Vector2 pos0 = RectTransformUtility.WorldToScreenPoint(cameraTmp, fourCornersArray[0]);
        //  Vector2 pos1 = cameraTmp.WorldToScreenPoint(fourCornersArray[1]);
        Vector2 pos2 = RectTransformUtility.WorldToScreenPoint(cameraTmp, fourCornersArray[2]);
        //  Vector2 pos3 = cameraTmp.WorldToScreenPoint(fourCornersArray[3]);
        strLog = string.Format("x = {0}, y = {1}, z = {2}, w = {3}", pos0.x, pos0.y, pos2.x, pos2.y);
        wndMask.SetRect(pos0.x, pos0.y, pos2.x, pos2.y);
       

2.在掩码层中，保存这个区域。然后把这个区域传给着色器。还可以根据这个区域，显示 引导箭头的位置

   
   
 public void SetRect(float lef, float top, float right, float bottom)
    {
        clipRect = new Vector4(lef, top, right, bottom);
        mMaterial.SetVector("_MaskCull", new Vector4(lef, top, right, bottom));
        mMaterial.SetFloat("_bNeedSet", 1);
        RectTransform rc = transform as RectTransform;
        // Vector2 sPos = new Vector2(lef, top + (bottom - top) / 2);
        Vector2 sPos = new Vector2(lef + (right - lef) / 2, top);
        Vector2 localPoint;
        Camera cameraTmp = null;
        if (mCanvas.renderMode == RenderMode.ScreenSpaceOverlay)
        {
        }
        else
        {
            cameraTmp = mCanvas.worldCamera;
        }

        RectTransformUtility.ScreenPointToLocalPointInRectangle(rc, sPos, cameraTmp, out localPoint);
        //localPoint.x -= mLable.rect.width / 2;
        localPoint.y -= mLable.rect.height / 2;  这边可以根据实际引导箭头要显示在 上下左右 ，进行处理即可
        mLable.anchoredPosition = localPoint;
        mLable.gameObject.SetActive(true);

    }

3.在掩码层中根据这个区域，做事件的派发

   
   
   if (Input.GetMouseButtonUp(0))
        {
            Vector2 vPos = Input.mousePosition;
            if (vPos.x >= clipRect.x && vPos.y >= clipRect.y &&
                vPos.x <= clipRect.z && vPos.y <= clipRect.w)
            {
               ExecuteEvents.Execute<ISubmitHandler>(mPanel.gameObject, new PointerEventData(EventSystem.current), ExecuteEvents.submitHandler);
            }
        }

4.着色器

Shader "Unlit/MyUIMask"
{
	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

		//[HideInInspector]
		_MaskCull ("Mask Cull", Vector) = (0,0,100,200)
		_bNeedSet ("Need Mask Cull", Int) = 0
	}

	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
			
			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;
				//-------------------add----------------------
				float2 vScenePos : TEXCOORD2;
				//-------------------add----------------------
			};
			
			fixed4 _Color;
			fixed4 _TextureSampleAdd;
			float4 _ClipRect;
			//-------------------add----------------------
			float4 _MaskCull;
			int _bNeedSet;
			//-------------------add----------------------
			v2f vert(appdata_t IN)
			{
				v2f OUT;
				OUT.worldPosition = IN.vertex;
				OUT.vertex = mul(UNITY_MATRIX_MVP, OUT.worldPosition);

				OUT.texcoord = IN.texcoord;
				
				#ifdef UNITY_HALF_TEXEL_OFFSET
				OUT.vertex.xy += (_ScreenParams.zw-1.0)*float2(-1,1);
				#endif
				if (_bNeedSet > 0)
				{   
					//模拟硬件除W的过程，转换到NDC空间
					OUT.vScenePos = OUT.vertex / OUT.vertex.w;
					//NDC空间转换到屏幕空间，得到实际屏幕上位置的点
					OUT.vScenePos  = (OUT.vScenePos*_ScreenParams.xy + _ScreenParams.xy)/2;
				}
				OUT.color = IN.color * _Color;
				return OUT;
			}

			sampler2D _MainTex;

			fixed4 frag(v2f IN) : SV_Target
			{
				half4 color = (tex2D(_MainTex, IN.texcoord) + _TextureSampleAdd) * IN.color;
				float Alpha = 1;
				if (_bNeedSet > 0)
				{
					Alpha *= (IN.vScenePos.x >= _MaskCull.x);
					Alpha *= (IN.vScenePos.x <= _MaskCull.z);
					Alpha *= (IN.vScenePos.y >= _MaskCull.y);
					Alpha *= (IN.vScenePos.y <= _MaskCull.w);
				}
				color.a *= (1-Alpha);
				
				color.a *= UnityGet2DClipping(IN.worldPosition.xy, _ClipRect);
				
				
				
				#ifdef UNITY_UI_ALPHACLIP
				clip (color.a - 0.001);
				#endif
				return color;
			}
			ENDCG
		}
	}
}