我想都或多或少聽過(guò)序列幀動(dòng)畫,屬于紋理動(dòng)畫的其中之一,原理跟電影播放一樣,代碼如下:
Shader "Unlit/AnimationTest" {
Properties {
_Color ("Color Tint", Color) = (1, 1, 1, 1)
_MainTex ("Image Sequence", 2D) = "white" {}
_HorizontalAmount ("Horizontal Amount", Float) = 4
_VerticalAmount ("Vertical Amount", Float) = 4
_Speed ("Speed", Range(1, 100)) = 30
}
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"
fixed4 _Color;
sampler2D _MainTex;
float4 _MainTex_ST;
float _HorizontalAmount;
float _VerticalAmount;
float _Speed;
struct a2v {
float4 vertex : POSITION;
float2 texcoord : TEXCOORD0;
};
struct v2f {
float4 pos : SV_POSITION;
float2 uv : TEXCOORD0;
};
v2f vert (a2v v) {
v2f o;
o.pos = mul(UNITY_MATRIX_MVP, v.vertex);
o.uv = TRANSFORM_TEX(v.texcoord, _MainTex);
return o;
}
fixed4 frag (v2f i) : SV_Target {
float time = floor(_Time.y * _Speed);
float row = floor(time / _HorizontalAmount);
float column = time - row * _HorizontalAmount;
// half2 uv = float2(i.uv.x /_HorizontalAmount, i.uv.y / _VerticalAmount);
// uv.x += column / _HorizontalAmount;
// uv.y -= row / _VerticalAmount;
half2 uv = i.uv + half2(column, -row);
uv.x /= _HorizontalAmount;
uv.y /= _VerticalAmount;
fixed4 c = tex2D(_MainTex, uv);
c.rgb *= _Color;
return c;
}
ENDCG
}
}
FallBack "Transparent/VertexLit"
}
序列幀動(dòng)畫的制作主要在于需要每個(gè)時(shí)刻計(jì)算該時(shí)刻下應(yīng)播放的關(guān)鍵幀的位置,并對(duì)該關(guān)鍵幀進(jìn)行紋理采樣。
在上述代碼中,_MainTex是包含了所有關(guān)鍵幀圖像的紋理,_HorizontalAmount和_VerticalAmount分別代表了該圖像在水平方向和數(shù)值方向包含的關(guān)鍵幀個(gè)數(shù),_Speed屬性用于控制序列幀動(dòng)畫的播放速度。
由于序列幀圖像通常是透明紋理,需要設(shè)置Pass的相關(guān)狀態(tài),以渲染透明效果。
fragment中的代碼則是真正計(jì)算每個(gè)時(shí)刻該渲染什么樣的紋理。
float time = floor(_Time.y * _Speed); 中,_Time.y是自場(chǎng)景加載后經(jīng)過(guò)的時(shí)間,將其和_Speed相乘得到模擬的時(shí)間,這其實(shí)是用于調(diào)整動(dòng)畫播放的快慢,并用CG的floor函數(shù)對(duì)結(jié)果值取整來(lái)得到整數(shù)時(shí)間time,接下來(lái)是計(jì)算行索引和列索引
可以自己在網(wǎng)上找張序列幀圖片綁定到一個(gè)material中,用上述shader程序,就可以運(yùn)行調(diào)節(jié)看到具體效果了。