UnityShader实例06:UV动画

UV动画

UV动画，顾名思义，就是针对UV做的动画。在游戏中，一些动态水面，飞流直下的瀑布，流动的岩浆，跳动的火焰等等，很多都是通过操作UV做的动画。在unity中我可以实用挂载脚本或者直接针对UV key动画帧做动画操作，而在本文中将通过shader编写实现三个比较常见的UV动画方式：

1.UV位移动画

2.UV序列帧动画

3.UV旋转动画

先从UV位移动画开始

我们将做一个流动岩浆的效果，在开始前，我们需要介绍下Unity内置变量_Time

float4 _Time : Time (t/20, t, t*2, t*3)

这是个随时间变化的增量，从函数的定义我们可以知道这个变量的4个分量速率比 _Time=20*_Time.x=_Time.y=_Time.z/2=_Time.w/3.

为了方便控制位移动画的速率和方向我们定义一个变量

[csharp]  view plain  copy

 print ?

1. _ScrollingSpeed("Scrolling speed", Vector) = (0,0,0,0)  

在顶点函数中 将uv坐标乘以 _Time 变量和_ScrollingSpeed，下面为关键代码

[csharp]  view plain  copy

 print ?

1. o.uvScroll = TRANSFORM_TEX((v.texcoord.xy+_Time.x*_ScrollingSpeed.xy), _Tex);// 这里只使用了xy上的两个分量对应uv  

VF版本代码01：

[csharp]  view plain  copy

 print ?

1. Shader "PengLu/Self-Illumin/IlluminDiffuseScrollVF"     
2. {    
3.     Properties     
4.     {     
5.         _Color ("Main Color", Color) = (1,1,1,1)    
6.         _MainTex ("Base (RGB)", 2D) = "white" {}  
7.         _Illum ("Illumin (A)", 2D) = "white" {}  
8.         _Tex("Scroll Tex (RGB)", 2D)= "white" {}  
9.         _ScrollingSpeed("Scrolling speed", Vector) = (0,0,0,0)  
10.     }    
11.         
12.     SubShader     
13.     {    
14.           
15.         Tags { "RenderType"="Opaque" }  
16.         LOD 200  
17.          
18.         pass    
19.         {             
20.             CGPROGRAM    
21.             #pragma vertex vert    
22.             #pragma fragment frag    
23.             #include "UnityCG.cginc"  
24.             sampler2D _MainTex,_Illum,_Tex;    
25.             float4 _MainTex_ST,_Illum_ST,_Tex_ST,_Color,_ScrollingSpeed;  
26.                 
27.             struct appdata {    
28.                 float4 vertex : POSITION;    
29.                 float2 texcoord : TEXCOORD0;  
30.                 float2 texcoord1 : TEXCOORD1;    
31.             };    
32.               
33.             struct v2f  {    
34.                 float4 pos : POSITION;    
35.                 float2 uv_MainTex : TEXCOORD0;  
36.                 float2 uv_Illum : TEXCOORD1;   
37.                 float2 uvLM : TEXCOORD2;  
38.                 float2 uvScroll : TEXCOORD3;  
39.             };    
40.               
41.             v2f vert (appdata v)   
42.             {    
43.                 v2f o;    
44.                 o.pos = mul(UNITY_MATRIX_MVP,v.vertex)*_Color;    
45.                 o.uv_MainTex = TRANSFORM_TEX(v.texcoord, _MainTex);  
46.                 o.uv_Illum = TRANSFORM_TEX(v.texcoord, _Illum);  
47.                 o.uvScroll = TRANSFORM_TEX((v.texcoord.xy+_Time.x*_ScrollingSpeed.xy), _Tex);  
48.                 o.uvLM = v.texcoord1.xy * unity_LightmapST.xy + unity_LightmapST.zw;      
49.                 return o;    
50.             }   
51.                
52.             float4 frag (v2f i) : COLOR    
53.             {    
54.                 float4 texCol = tex2D(_MainTex, i.uv_MainTex);  
55.                 float4 IllumTex = tex2D(_Illum,i.uv_Illum);  
56.                 float3 lm = DecodeLightmap (UNITY_SAMPLE_TEX2D(unity_Lightmap, i.uvLM.xy));      
57.                 IllumTex.rgb+=tex2D(_Tex,i.uvScroll).rgb;  
58.                 IllumTex*=IllumTex.a;  
59.                 texCol+=IllumTex;  
60.                 texCol.rgb*=lm;  
61.                 return texCol;    
62.             }    
63.             ENDCG    
64.         }    
65.     }   
66.     FallBack "Diffuse"   
67. }    

VF版本代码01效果：

UV序列帧动画

序列帧动画是游戏比较常用的一种动画形式，在unity自带的粒子系统中就可以设置序列帧动画（下图），但是这个只能用于粒子系统的粒子效果，如果是自己做的模型就要使用序列帧动画就得自己写脚本或shader，下面我们将用shader实现序列帧动画效果。

首先得准备一张序列帧的贴图，如下图这样的：

然后我们需要声明三个变量：

[csharp]  view plain  copy

 print ?

1. _SizeX ("SizeX", Float) = 4//列数  
2. _SizeY ("SizeY", Float) = 4//行数  
3. _Speed ("Speed", Float) = 200//动画的播放速度  

在frag函数里面处理动画

[csharp]  view plain  copy

 print ?

1. int indexX=fmod (_Time.x*_Speed,_SizeX);//获得列数的循环  
2. int indexY=fmod ((_Time.x*_Speed)/_SizeX,_SizeY);//获得行数的循环  

fmod函数是取余函数，int用来强制取整，当然也可以用floor函数来取整

为了直观解释，将用下面的列表列出上面变量的值的对应关系，假设_SizeX=_SizeY=4  

_Time.x*_Speed	0	1	2	3	4	5	6	7	8	9	10	11	12	13	14	15
indexX	0	1	2	3	0	1	2	3	0	1	2	3	0	1	2	3
indexY	0	0	0	0	1	1	1	1	2	2	2	2	3	3	3	3

_Time.x*_Speed	16	17	18	19	20	21	22	23	24	25	26	27	28	29	30	31
indexX	0	1	2	3	0	1	2	3	0	1	2	3	0	1	2	3
indexY	0	0	0	0	1	1	1	1	2	2	2	2	3	3	3	3

参考网络上的例子我还有写了另外一种获得循环动画的代码（我是孔乙己啦），和上面两句功能是一样的，貌似消耗稍微少一点

[csharp]  view plain  copy

 print ?

1. int index = floor(_Time .x * _Speed);  
2. int indexY = index/_SizeX;  
3. int indexX = index - indexY*_SizeX;  

通过列表对应，可以看出获取循环数的差别

index	0	1	2	3	4	5	6	7	8	9	10	11	12	13	14	15
indexX	0	1	2	3	0	1	2	3	0	1	2	3	0	1	2	3
indexY	0	0	0	0	1	1	1	1	2	2	2	2	3	3	3	3

index	16	17	18	19	20	21	22	23	24	25	25	27	28	29	30	31
indexX	0	1	2	3	0	1	2	3	0	1	2	3	0	1	2	3
indexY	4	4	4	4	5	5	5	5	6	6	6	6	7	7	7	7

接下来将获得的循环数与uv贴图的UV进行操作

[csharp]  view plain  copy

 print ?

1. fixed2 seqUV = float2((i.texcoord.x) /_SizeX, (i.texcoord.y)/_SizeY);//将uv切分  
2. seqUV.x += indexX/_SizeX;//U方向上循环  
3. seqUV.y -= indexY/_SizeY;//V方向上循环  

VF版本代码02：

[csharp]  view plain  copy

 print ?

1. Shader "PengLu/Particle/SequenceAdd" {  
2. Properties {  
3.     _TintColor ("Tint Color", Color) = (0.5,0.5,0.5,0.5)  
4.     _MainTex ("Particle Texture", 2D) = "white" {}  
5.     _InvFade ("Soft Particles Factor", Range(0.01,3.0)) = 1.0  
6.     _SizeX ("SizeX", Float) = 4  
7.     _SizeY ("SizeY", Float) = 4  
8.     _Speed ("Speed", Float) = 200  
9. }  
10.   
11. Category {  
12.     Tags { "Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent" }  
13.     Blend SrcAlpha One  
14.     AlphaTest Greater .01  
15.     ColorMask RGB  
16.     Cull Off Lighting Off ZWrite Off Fog { Color (0,0,0,0) }  
17.       
18.     SubShader {  
19.         Pass {  
20.           
21.             CGPROGRAM  
22.             #pragma vertex vert  
23.             #pragma fragment frag  
24.             #pragma multi_compile_particles  
25.  
26.             #include "UnityCG.cginc"  
27.   
28.             sampler2D _MainTex;  
29.             fixed4 _TintColor;  
30.             fixed _SizeX;  
31.             fixed _SizeY;  
32.             fixed _Speed;  
33.               
34.             struct appdata_t {  
35.                 float4 vertex : POSITION;  
36.                 fixed4 color : COLOR;  
37.                 float2 texcoord : TEXCOORD0;  
38.             };  
39.   
40.             struct v2f {  
41.                 float4 vertex : POSITION;  
42.                 fixed4 color : COLOR;  
43.                 float2 texcoord : TEXCOORD0;  
44.                 #ifdef SOFTPARTICLES_ON  
45.                 float4 projPos : TEXCOORD1;  
46.                 #endif  
47.             };  
48.               
49.             float4 _MainTex_ST;  
50.   
51.             v2f vert (appdata_t v)  
52.             {  
53.                 v2f o;  
54.                 o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);  
55.                 #ifdef SOFTPARTICLES_ON  
56.                 o.projPos = ComputeScreenPos (o.vertex);  
57.                 COMPUTE_EYEDEPTH(o.projPos.z);  
58.                 #endif  
59.                 o.color = v.color;  
60.                 o.texcoord = TRANSFORM_TEX(v.texcoord,_MainTex);  
61.                 return o;  
62.             }  
63.   
64.             sampler2D _CameraDepthTexture;  
65.             float _InvFade;  
66.               
67.             fixed4 frag (v2f i) : COLOR  
68.             {  
69.                 #ifdef SOFTPARTICLES_ON  
70.                 float sceneZ = LinearEyeDepth (UNITY_SAMPLE_DEPTH(tex2Dproj(_CameraDepthTexture, UNITY_PROJ_COORD(i.projPos))));  
71.                 float partZ = i.projPos.z;  
72.                 float fade = saturate (_InvFade * (sceneZ-partZ));  
73.                 i.color.a *= fade;  
74.                 #endif  
75.                 int indexX=fmod (_Time.x*_Speed,_SizeX);  
76.                 int indexY=fmod ((_Time.x*_Speed)/_SizeX,_SizeY);  
77.   
78. //              以下三行代码和之前两行代码功能一样     
79. //              int index = floor(_Time .x * _Speed);  
80. //              int indexY = index/_SizeX;  
81. //              int indexX = index-indexY*_SizeX;  
82.   
83.                 fixed2 seqUV = float2((i.texcoord.x) /_SizeX, (i.texcoord.y)/_SizeY);  
84.                     seqUV.x += indexX/_SizeX;  
85.                     seqUV.y -= indexY/_SizeY;  
86.                 return 2.0f * i.color * _TintColor * tex2D(_MainTex, seqUV);  
87.             }  
88.             ENDCG   
89.         }  
90.     }     
91. }  
92. }  

VF版本代码02效果：

UV旋转动画

UV旋转动画在游戏开发中用得相对比较少，特效师一般会采用其他方式代替，这里将用shader实现一个UV旋转的动画。 UV旋转实际上一个2D旋转，有关2D旋转的理论在 这里 。这边文章里讲得比较透彻，在这里我只需要拿到最终结果公式：

x' = r*cosα*cosθ - r*sinα*sinθ = x * cos θ – y * sin θ

y' = r*sinα*cosθ +r*cosα*sinθ = y * cos θ + x * sin θ

那么开始，同意需要声明一个变量来控制旋转方向和速度；

[csharp]  view plain  copy

 print ?

1. _Speed ("Speed", Float) = 200  

接下来就要在frag函数里面操作UV，关键代码如下：

[csharp]  view plain  copy

 print ?

1. //将uv偏移0.5，使旋转中心到贴图中心  
2. float2 uv=i.texcoord-0.5;  
3. //定义一个二元变量，存储时间变量的正弦和余弦值  
4. float2 rotate = float2(cos(_Speed*_Time.x),sin(_Speed*_Time.x));  
5. //获得旋转后的uv坐标值  
6. uv=float2((uv.x*rotate.x-uv.y*rotate.y),(uv.x*rotate.y+uv.y*rotate.x));  
7. //将偏移的uv偏移回来  
8. uv+=0.5;  

VF版本代码03

[csharp]  view plain  copy

 print ?

1. Shader "PengLu/Particle/RotationAdd" {  
2. Properties {  
3.     _TintColor ("Tint Color", Color) = (0.5,0.5,0.5,0.5)  
4.     _MainTex ("Particle Texture", 2D) = "white" {}  
5.     _InvFade ("Soft Particles Factor", Range(0.01,3.0)) = 1.0  
6.     _Speed ("Speed", Float) = 200  
7. }  
8.   
9. Category {  
10.     Tags { "Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent" }  
11.     Blend SrcAlpha One  
12.     AlphaTest Greater .01  
13.     ColorMask RGB  
14.     Cull Off Lighting Off ZWrite Off Fog { Color (0,0,0,0) }  
15.       
16.     SubShader {  
17.         Pass {  
18.           
19.             CGPROGRAM  
20.             #pragma vertex vert  
21.             #pragma fragment frag  
22.             #pragma multi_compile_particles  
23.  
24.             #include "UnityCG.cginc"  
25.   
26.             sampler2D _MainTex;  
27.             fixed4 _TintColor;  
28.             fixed _Speed;  
29.               
30.             struct appdata_t {  
31.                 float4 vertex : POSITION;  
32.                 fixed4 color : COLOR;  
33.                 float2 texcoord : TEXCOORD0;  
34.             };  
35.   
36.             struct v2f {  
37.                 float4 vertex : POSITION;  
38.                 fixed4 color : COLOR;  
39.                 float2 texcoord : TEXCOORD0;  
40.                 #ifdef SOFTPARTICLES_ON  
41.                 float4 projPos : TEXCOORD1;  
42.                 #endif  
43.             };  
44.               
45.             float4 _MainTex_ST;  
46.   
47.             v2f vert (appdata_t v)  
48.             {  
49.                 v2f o;  
50.                 o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);  
51.                 #ifdef SOFTPARTICLES_ON  
52.                 o.projPos = ComputeScreenPos (o.vertex);  
53.                 COMPUTE_EYEDEPTH(o.projPos.z);  
54.                 #endif  
55.                 o.color = v.color;  
56.                 o.texcoord = TRANSFORM_TEX(v.texcoord,_MainTex);  
57.                 return o;  
58.             }  
59.   
60.             sampler2D _CameraDepthTexture;  
61.             float _InvFade;  
62.               
63.             fixed4 frag (v2f i) : COLOR  
64.             {  
65.                 #ifdef SOFTPARTICLES_ON  
66.                 float sceneZ = LinearEyeDepth (UNITY_SAMPLE_DEPTH(tex2Dproj(_CameraDepthTexture, UNITY_PROJ_COORD(i.projPos))));  
67.                 float partZ = i.projPos.z;  
68.                 float fade = saturate (_InvFade * (sceneZ-partZ));  
69.                 i.color.a *= fade;  
70.                 #endif  
71.                 float2 uv=i.texcoord-0.5;  
72.                 float2 rotate = float2(cos(_Speed*_Time.x),sin(_Speed*_Time.x));  
73.                 uv=float2((uv.x*rotate.x-uv.y*rotate.y),(uv.x*rotate.y+uv.y*rotate.x));  
74.                 uv+=0.5;  
75.                 return 2.0f * i.color * _TintColor * tex2D(_MainTex, uv);  
76.             }  
77.             ENDCG   
78.         }  
79.     }     
80. }  
81. }  

VF版本代码03效果：

PS：贴图的Wrap Mode要设置成Clamp，原因你懂的 ^_^

原文链接：http://blog.youkuaiyun.com/u011047171/article/details/46776713

添加一个浮动的Shader实现：

Shader "Custom/WaveShader" {
	Properties{
		_WaveSpeed("WaveSpeed",float)=4
		_MaxHight("MaxHeight(峰值)",float)=3
		_Frenquncy("WaveF(频率)",float)=3
	}
		SubShader{
			Tags{ "Queue" = "Transparent" }
			Pass{
			CGPROGRAM
	#pragma vertex vert
	#pragma fragment frag
	#include "UnityCG.cginc"
			float _WaveSpeed;
		float _MaxHight;
		float _Frenquncy;
		struct a2v {
			fixed4 vertex : POSITION;

		};
		struct v2f {
			fixed4 pos : SV_POSITION;

		};
		v2f vert(a2v v)
		{
			v2f o;
			v.vertex.y += _MaxHight*sin(v.vertex.x*_Frenquncy + _Time.y*_WaveSpeed);
			o.pos = mul(UNITY_MATRIX_MVP,v.vertex);
			return o;
		}
		fixed4 frag(v2f v) :SV_Target
		{
			return fixed4(1,1,1,1);
		}
			ENDCG
		}
	}
}