火焰跳动小案例

         今天了学习一个有趣的小案例----------火焰跳动。先给大家看一下效果图：

这其实是个动图，展现了类似爆炸一样的火焰跳动。其实里面用到了纹理动画中的序列帧技术，序列帧动画的原理非常简单，它就像放电影一样，依次播放一系列关键帧图像，速度足够快时，看起来就是动画效果。缺点就是需要美工的工作量很大。

       这里贴上shader的代码：

     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
}

         首先我们声明多个属性，以设置该序列帧的相关参数，_MainTex就是包括序列帧的纹理，_HorizontalAmount和_VerticalAmount分别表示水平和竖直方向的序列帧的个数，_Speed表示序列帧动画的播放速度。
SubShader {
Tags {"Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent"}

Pass {
Tags { "LightMode"="ForwardBase" }

ZWrite Off
Blend SrcAlpha OneMinusSrcAlpha

             由于序列帧中包含了透明通道，因此可以被当成半透明对象，所以标签中队列使用Transparent透明队列，另外使用Blend混合模式，并关闭深度写入。         

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;
}
片元着色器里面包含帧动画的计算,_Time.y指得是自该场景加载后经历的时间，row一行计算的是行的序列数，column则是列的。注意纹理坐标从上到下依次减小，从左到右依次增加
ENDCG
}  
}
FallBack "Transparent/VertexLit"
}