shader实例：实现类似宝可梦 Pokemon 的战斗转场

宝可梦游戏在进入战斗前会有类似这样转场动画。

例子中使用的纹理质量较差，边缘比较模糊，和shader无关。

这个UI是盖在所有UI最前面的。可以使用shader来完成这个工作，而不是复杂的动画。

使用一张这样的灰度图，用动画控制cutoff值来决定产生遮罩的像素从而产生动画。

Shader 代码如下：

Shader "UI/UITransitions"
{
	// 通过材质可以控制的变量，使用inspector设置
	Properties
	{
		_MainTex("Texture", 2D) = "white" {}
		_TransitionTex("Transition Texture", 2D) = "white" {}
		_Color("Screen Color", Color) = (1,1,1,1)
		_Cutoff("Cutoff", Range(0, 1)) = 0
		_Fade("Fade", Range(0, 1)) = 0
	}

	// 对应多个变体。如：一个subshader给pc用，另一个给手机用
	SubShader
	{
		// 不剪切背表面、不写z、ztest永远通过
		Cull Off ZWrite Off ZTest Always

		// 每个pass会渲染一次物体。如：一个pass处理平行光，再加一个处理点光
		Pass
		{
			// Unity的HLSL开始的地方，ENDCG
			CGPROGRAM
			#pragma vertex vert
			#pragma fragment frag

			#include "UnityCG.cginc"

			// semantic 指明值怎么用，如：TEXCOORD0在ps中会得到插值
			struct appdata
			{
				float4 vertex : POSITION;
				float2 uv : TEXCOORD0;
			};

			// SV_POSITION SV_ ( system value )
			struct v2f
			{
				float4 vertex : SV_POSITION;
				float2 uv : TEXCOORD0;
				float2 uv1 : TEXCOORD1;
			};

			float4 _MainTex_TexelSize;

			// 每顶点处理
			v2f vert(appdata v)
			{
				v2f o;
				o.vertex = UnityObjectToClipPos(v.vertex);
				o.uv = v.uv;
				o.uv1 = v.uv;

				// 统一dx和gl对于uv的取值方式
				// _TexelSize: https://docs.unity3d.com/Manual/SL-PlatformDifferences.html
				#if UNITY_UV_STARTS_AT_TOP
				if (_MainTex_TexelSize.y < 0)
					o.uv1.y = 1 - o.uv1.y;
				#endif

				return o;
			}

			// 对应Properties中的名称，才可以使用
			sampler2D _MainTex;
			sampler2D _TransitionTex;
			fixed4 _Color;
			float _Cutoff;
			float _Fade;

			// 每像素处理
			// 需要指定 SV_Target（也就是frame buffer屏幕上看到的图像）
			fixed4 frag(v2f i) : SV_Target
			{
				fixed4 transit = tex2D(_TransitionTex, i.uv1);

				fixed4 col = tex2D(_MainTex, i.uv);

				// 小于cutoff值，使用_Color插值此像素
				if (transit.r < _Cutoff)
					return col = lerp(col, _Color, _Fade);

				return col;
			}					
			ENDCG
		}
	}
}

完整unity package 已经上传
shader已经详细中文注解

如何使用：
1 导入package
2 打开UITransitions Scene

3 选择UITransitions 材质，调整属性、更换mask图

4. Properties说明:
Transition Texture :遮罩纹理
Screen Color: 遮罩颜色
Cutoff : 遮罩大小（需要用动画去控制的值）
Fade: 遮罩混合度

完整unity package 已经上传
shader已经详细中文注解

更多Shader实例