Unity Shader 之 实现序列图动画播放功能
1、打开Unity，新建一个空工程，具体如下图
2、向工程中导入一个序列图，具体如下图
3、在工程中新建一个 Shader 脚本，可以命名为“SequenceAnimation”，双击脚本进行代码编辑，具体如下图
4、“SequenceAnimation”脚本的具体代码和代码说明如下图
5、“SequenceAnimation”脚本具体内容如下：
Shader "Custom/SequenceAnimation" {
Properties{
_MainColor("Main Color", Color) = (1,1,1,1) // 颜色修改参数
_MainTex("Main Texture", 2D) = "white" {} // 序列贴图参数
_HorNum("Horizontal Number", float) = 4 // 水平序列图个数
_VerNum("Vertical Number", float) = 2 // 竖直序列图个数
_Speed("Speed", float) = 7 // 控制序列图播放速度参数
}
SubShader{
Pass{
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"
// 对应属性的参数生命，才能在 CG编程中使用
sampler2D _MainTex;
float4 _MainColor;
float _HorNum;
float _VerNum;
float _Speed;
// 定义数据结构获取顶点信息和纹理坐标
struct appdata{
float4 vertex : POSITION;
float2 uv : TEXCOORD0;
};
// 定义数据结构获取顶点信息和纹理坐标
struct v2f{
float4 vertex : SV_POSITION;
float2 uv : TEXCOORD0;
};
v2f vert (appdata v){
v2f o;
// 物体的模型到世界矩阵 * 从世界到摄像机的矩阵 * 投影的矩阵
o.vertex = UnityObjectToClipPos(v.vertex);
o.uv = v.uv;
return o;
}
// 实现序列图动画变化的关键函数
float4 SequenceAnimationFunc(v2f i){
// 是序列图仅显示序列图中的一个图
half2 uv = float2(i.uv.x / _HorNum, i.uv.y / _VerNum);
float time = floor(_Time.y * _Speed);
float row = floor(time / _HorNum);
float col = time - row * _HorNum;
uv.x += col / _HorNum;
uv.y -= row /_VerNum;
// 把前面的 uv 数据与序列图组合显示，并且混合颜色
fixed4 color = tex2D(_MainTex, uv);
color.rgb *= _MainColor.rgb;
return color;
}
float4 frag (v2f i):Color{
// 调用序列图动画函数，实现序列图动画效果
float4 color = SequenceAnimationFunc(i);
return color;
}
ENDCG
}
}
}
6、脚本编译正确，会带Unity，在场景中添加两个 Image，在工程中新建两个材质，并分别把 shader 赋值为 “Standard”和 “SequenceAnimation”，作为对比效果，具体如下图
7、把材质赋值序列图，并把参数对应赋值上，然后把两个材质分别赋值给对应Image，具体如下图
8、运行场景，就是先了序列图播放效果，具体如下图
