UnityShader 过场动画镂空图片_unity ui镂空shader-优快云博客

1.前言

快捷的去将图片的中心裁剪一个形状，在游戏做不同形状的转场动画非常实用。

2.效果

3.逻辑

裁剪效果：在shader中获得需要裁剪图片的Alpha值，如果裁剪图片的Alpha不为零，我们就将背景图片的Alpha值赋值为零。

缩放效果：当裁剪好后直接控制背景图片的缩放就可以完成缩放，作为一个严谨的程序员当然得把功能实现齐全。在shader参数里面添加一个缩放得变量scale，然后在将 uv的中心点从左下角，移动到中心在进行缩放、在把中心点移回左下角。如果你不理解为什么那就不用理解了，直接上代码

4.代码

 
Shader "MyShader/UIHollowOut"
{
    Properties
    {
        _BgAlpha ("Bg Alpha", Range(0,1)) = 0.8 // 背景透明度
        _HollowOut ("HollowOut Texture", 2D) = "white" {} // 镂空图片
        _HollowOutScale("Scale",Range(0,10)) = 0.5    // 镂空缩放
    }
    SubShader
    {
        Tags{ "Queue" = "Transparent" // 渲染器队列 ： 透明
        "IgnoreProjector" = "True" // 忽略投影器
        "RenderType" = "Transparent" // 渲染类型 ： 透明
         }
        Pass
        {
            Tags {"LightMode" = "ForwardBase"}
			ZWrite off
			Blend SrcAlpha OneMinusSrcAlpha // 开启混合
			
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
 
            #include "UnityCG.cginc"
 
            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
            };
 
            struct v2f
            {
                float2 uv : TEXCOORD0;
                float4 vertex : SV_POSITION;
                float2 hollowOutUv : TEXCOORD1;
            };
            
            // 定义变量
            sampler2D _MainTex;
            sampler2D _HollowOut;
            float4 _HollowOut_ST;
            fixed _HollowOutScale;
            fixed _BgAlpha;
 
            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = v.uv;
                o.hollowOutUv =TRANSFORM_TEX(v.uv, _HollowOut);
                return o;
            }
 
            fixed4 frag (v2f i) : SV_Target
            {
                // 将镂空uv坐标从左下角转为中间
                i.hollowOutUv = i.hollowOutUv - float2(0.5,0.5);
                // 多镂空uv进行缩放
                i.hollowOutUv = i.hollowOutUv * pow(_HollowOutScale,4);
                // 将镂空uv转回左下角
                i.hollowOutUv = i.hollowOutUv + float2(0.5,0.5);
                // 读取镂空图片颜色
                fixed4 colHollowOut = tex2D(_HollowOut, i.hollowOutUv);
                
                // 原背景颜色
                fixed4 col = tex2D(_MainTex, i.uv);
                // 剔除镂空图片范围
                col.a = col.a * (1 - colHollowOut.a);
                col.a = min(col.a,_BgAlpha);
                
                return col;
            }
            ENDCG
        }
    }
}