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 OffLighting OffZWrite OffZTest [unity_GUIZTestMode]Blend SrcAlpha OneMinusSrcAlphaColorMask [_ColorMask]Pass{CGPROGRAM#pragma vertex vert#pragma fragment frag#include "UnityCG.cginc"#include "UnityUI.cginc"#pragma multi_compile __ UNITY_UI_ALPHACLIPstruct 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_OFFSETOUT.vertex.xy += (_ScreenParams.zw-1.0)*float2(-1,1);#endifif (_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_ALPHACLIPclip (color.a - 0.001);#endifreturn color;}ENDCG}}}