寶可夢游戲在進入戰斗前會有類似這樣轉場動畫。

例子中使用的紋理質量較差，邊緣比較模糊，和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開始的地方，ENDCGCGPROGRAM#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_TOPif (_MainTex_TexelSize.y < 0)o.uv1.y = 1 - o.uv1.y;#endifreturn 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實例

總結

以上是生活随笔為你收集整理的shader实例：实现类似宝可梦 Pokemon 的战斗转场的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。