shader入门精要读书笔记25 纹理动画

一、前言

Unity Shader中的一些内置时间变量

二、纹理动画

大概分为两种形式：序列帧动画、背景循环滚动动画。

我们使用的图像需要勾选Alpha Is Transparency，因为是透明纹理。

1.序列帧动画

Shader "Unity Shaders Book/Chapter 11/Image Sequence Animation" {
	Properties {
		_Color ("Color Tint", Color) = (1, 1, 1, 1)
		_MainTex ("Image Sequence", 2D) = "white" {}	//纹理
    	_HorizontalAmount ("Horizontal Amount", Float) = 8   //水平方向包含的关键帧数量
    	_VerticalAmount ("Vertical Amount", Float) = 8		//竖直方向包含的关键帧数量
    	_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 = UnityObjectToClipPos(v.vertex);		//转换到裁剪空间
				o.uv = TRANSFORM_TEX(v.texcoord, _MainTex);		//纹理坐标变换大小位置
				return o;
			}  
			
			fixed4 frag (v2f i) : SV_Target {
				float time = floor(_Time.y * _Speed);    //time×速度得到模拟时间，floor是用来取整
				float row = floor(time / _HorizontalAmount);		//对行数做除法
				float column = time - row * _HorizontalAmount;		//余数为列
				//将speed计入模拟出来一个时间，用来计时，
				//这个时间满行数就是row，余数就是列
				
				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"
}

总之，我们是通过引入了时间来实现图片更换的，时间变化，采样的图像就进行变化。

2.滚动的背景

很多2D图像都是用这个，模拟角色在场景中的穿梭，这些背景往往包含了多个层来模拟一种视差效果，这都运用了纹理动画。

本例中做了一个两层的无线滚动的2D游戏背景。

Shader "Unity Shaders Book/Chapter 11/Scrolling Background" {
	Properties {
		_MainTex ("Base Layer (RGB)", 2D) = "white" {}		//较远的背景
		_DetailTex ("2nd Layer (RGB)", 2D) = "white" {}		//比较近的背景
		_ScrollX ("Base layer Scroll Speed", Float) = 1.0		//各自的水平速度
		_Scroll2X ("2nd layer Scroll Speed", Float) = 1.0	
		_Multiplier ("Layer Multiplier", Float) = 1			//控制纹理的整体亮度
	}
	SubShader {
		Tags { "RenderType"="Opaque" "Queue"="Geometry"}		//不透明的，几何
		
		Pass { 
			Tags { "LightMode"="ForwardBase" }
			
			CGPROGRAM
			
			#pragma vertex vert
			#pragma fragment frag
			
			#include "UnityCG.cginc"
			
			sampler2D _MainTex;
			sampler2D _DetailTex;
			float4 _MainTex_ST;
			float4 _DetailTex_ST;
			float _ScrollX;
			float _Scroll2X;
			float _Multiplier;
			
			struct a2v {
				float4 vertex : POSITION;
				float4 texcoord : TEXCOORD0;
			};
			
			struct v2f {
				float4 pos : SV_POSITION;
				float4 uv : TEXCOORD0;
			};
			
			v2f vert (a2v v) {
				v2f o;
				o.pos = UnityObjectToClipPos(v.vertex);	//普通的顶点变换
				
				o.uv.xy = TRANSFORM_TEX(v.texcoord, _MainTex) + frac(float2(_ScrollX, 0.0) * _Time.y);		//进行纹理坐标运算时，对x轴计入时间(包含速度)
				o.uv.zw = TRANSFORM_TEX(v.texcoord, _DetailTex) + frac(float2(_Scroll2X, 0.0) * _Time.y);	//这里使用同一个fixed4，节省插值寄存器空间
				
				return o;
			}
			
			fixed4 frag (v2f i) : SV_Target {
				fixed4 firstLayer = tex2D(_MainTex, i.uv.xy);	//这两个就是平常的采样。
				fixed4 secondLayer = tex2D(_DetailTex, i.uv.zw);
				
				fixed4 c = lerp(firstLayer, secondLayer, secondLayer.a);	//我们使用第二层纹理的透明通道来混和两张纹理
				//这里意思就是实现近的一张纹理透明的地方插入远的那张纹理

				c.rgb *= _Multiplier;		//颜色×_Multiplier提升亮度
				
				return c;
			}
			
			ENDCG
		}
	}
	FallBack "VertexLit"
}

上面这个设置时注意，远处的纹理背景运动速度是要快于近的纹理的(自然效果)。

—终于明白这种背景是怎样实现的了。睡个好觉 。