[游戏开发][渲染]实现新手引导蒙板遮罩裁剪的几种方式

//扣圆
Shader "GameEffects/GuideCircleMaskClip"
{
    Properties
    {
		_Color("Color",Color) = (0,0,0,1)
        _Center("Center",Vector) = (0,0,0,0)
        _MaxRadius("_MaxRadius",Range(0,500)) = 100
		_MinRadius("_MinRadius",Range(0,700)) = 200
    }

    SubShader
    {
        Tags
        {
            "Queue"="Transparent"
            "IgnoreProjector"="True"
            "RenderType"="Transparent"
        }

        Pass
        {
			Lighting Off
			ZWrite Off
			AlphaTest Off
			Fog { Mode Off }
			Offset -1, -1
			Blend One OneMinusSrcAlpha

			CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #include "UnityCG.cginc"

            struct appdata_t
            {
                half4 vertex   : POSITION;
            };

            struct v2f
            {
				half4 vertex   : SV_POSITION;
				half4 screenPos : TEXCOORD0;
            };

			half4 _Color;
			half2 _Center;
			half _MaxRadius;
			half _MinRadius;

            v2f vert(appdata_t v)
            {
                v2f o;
				o.vertex = UnityObjectToClipPos(v.vertex);
				o.screenPos = ComputeScreenPos(o.vertex);
                return o;
            }

            fixed4 frag(v2f i) : SV_Target
            {
				half2 screenPos = i.screenPos.xy / i.screenPos.w * _ScreenParams.xy;
				half screenDis = min(_MaxRadius,max(_MinRadius,distance(screenPos.xy, _Center.xy)));
				half percent = (screenDis - _MinRadius) / (_MaxRadius - _MinRadius);
				fixed4 color = _Color;
				color.a = lerp(0, _Color.a, percent);
                return color;
            }
			ENDCG
        }
    }
}

第二种方式：

实现原理：实际上就是先利用渲染队列渲染，然后再利用ZTest，改变渲染的遮挡关系。

PS：Depth Testing:深度测试，也叫深度缓冲。只有最靠近观察者的物体会被绘制。深度即Z,该值越小表示离观察者越近，该值越大表示离观察者越远。

具体操作步骤：

1、修改NGUI的Unlit - Transparent Colored Shader，将ZWrite改为On。

2、创建3个Panel，分别为叫GameObject、Mask、Cutout，里面分别创建一个Sprite，

3、将Panel的渲染方式改为Explicit，渲染队列分别改为3000(GameObject)、3002(Mask)、3001(Cutout)，这一步会是渲染按照GameObject->Cutout->Mask的顺序渲染。

4、调整他们的Z轴：GameObject为300，Mask为200，Cutout为100。这一步会使渲染的遮挡关系发生改变，会使Cutout挡住Mask。我们再把Mask下面的Sprite透明度调为1。最后神奇的事情出现了！