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. }
12. SubShader
13. {
15. Tags { "RenderType"="Opaque" }
16. LOD 200
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;
27. struct appdata {
28. float4 vertex : POSITION;
29. float2 texcoord : TEXCOORD0;
30. float2 texcoord1 : TEXCOORD1;
31. };
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. };
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. }
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

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

[csharp] view plain copy

print?

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

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

接下来将获得的循环数与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. }
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) }
18. SubShader {
19. Pass {
21. CGPROGRAM
22. #pragma vertex vert
23. #pragma fragment frag
24. #pragma multi_compile_particles
26. #include "UnityCG.cginc"
28. sampler2D _MainTex;
29. fixed4 _TintColor;
30. fixed _SizeX;
31. fixed _SizeY;
32. fixed _Speed;
34. struct appdata_t {
35. float4 vertex : POSITION;
36. fixed4 color : COLOR;
37. float2 texcoord : TEXCOORD0;
38. };
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. };
49. float4 _MainTex_ST;
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. }
64. sampler2D _CameraDepthTexture;
65. float _InvFade;
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);
78. // 以下三行代码和之前两行代码功能一样
79. // int index = floor(_Time .x * _Speed);
80. // int indexY = index/_SizeX;
81. // int indexX = index-indexY*_SizeX;
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. }
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) }
16. SubShader {
17. Pass {
19. CGPROGRAM
20. #pragma vertex vert
21. #pragma fragment frag
22. #pragma multi_compile_particles
24. #include "UnityCG.cginc"
26. sampler2D _MainTex;
27. fixed4 _TintColor;
28. fixed _Speed;
30. struct appdata_t {
31. float4 vertex : POSITION;
32. fixed4 color : COLOR;
33. float2 texcoord : TEXCOORD0;
34. };
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. };
45. float4 _MainTex_ST;
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. }
60. sampler2D _CameraDepthTexture;
61. float _InvFade;
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.csdn.net/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
		}
	}
}