一、序列帧动画
序列帧动画的原理是如此的简单,可以说只需要足够多张纸以及足够多的时间,就可以实现最简单的动画:
不使用 Animation 工具,只需要使用 Shader 中的内置时间变量,就可以实现最简单的序列帧动画了。就像最早的电影,依次展示一张又一张的图片,只要这些图片是连续的并且切换的足够快,那么当然就可以骗过人的眼睛,得到细腻的动画效果(现在我们的电脑电视本质上依然是这个原理,只不过是以帧的形式表现的)‘
序列帧的优点和缺点都很明显:
- 优点:无需任何计算,直接显示图片,逻辑简单,不用怎么考虑性能
- 缺点:制作非常耗时,需要给出 N 张图片,并且为了不占太多的空间往往单张图片分辨率都很低
这是《Unity3D入门精要》中的一张例图,64张帧动画图像被合并在一张大的图像中,它们的大小相同,都为128 x 128,这些单张的图像有时也被叫做精灵(Sprite)
这也是 Unity3D 图集的处理方案
二、Unity内置时间变量
对于上面的图片,在 Shader 中只需要按照从左上到右下的顺序,依次截取一个个128 x 128的子区域作为当前要显示的纹理,就可以实现最简单帧序列动画了
在此之前,我们需要在 UnityShader 中获取当前场景运行的时间需要知道以下变量:
- _Time:float4(t/20, t, 2t, 3t):其中 t 为自当前场景加载开始所经过的时间
- _SinTime:float4(t/8, t/4, t/2, t):其中 t 为自当前场景加载开始所经过的时间的正弦值
- _CosTime:float4(t/8, t/4, t/2, t):其中 t 为自当前场景加载开始所经过的时间的正弦值
- unity_DeltaTime:float(dt, l/dt, smoothDt, 1/smoothDt):其中 dt 为时间增量,smoothDt 为平滑处理后的时间增量
三、简单的爆炸效果
直接上代码,主要需要注意的有:
- 需要当作半透明对象处理,并且对于纹理,需要勾选 Alpha Is Transparency 属性
- 核心在于片段着色器,根据上一节的内置时间变量推算当前应该截取64块区域中的哪一块,并且得出正确的 uv,采样
Shader "Jaihk662/FrameAni1"
{
Properties
{
_Color("Color", Color) = (1, 1, 1, 1)
_MainTex("Image Sequence", 2D) = "white" {}
_HorizontalAmount("Horizontal Amount", Float) = 8 //对于样例中的图片,横纵需设为8,不要忘记
_VerticalAmount("VerticalAmount", Float) = 8
_Speed("Speed", Range(1, 100)) = 30
}
SubShader
{
LOD 200
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"
#include "Lighting.cginc"
fixed4 _Color;
float _Speed;
float _HorizontalAmount;
float _VerticalAmount;
sampler2D _MainTex;
float4 _MainTex_ST;
struct _2vert
{
float4 vertex: POSITION;
float4 texcoord: TEXCOORD0;
};
struct vert2frag
{
float4 pos: SV_POSITION;
float2 uv: TEXCOORD0;
};
vert2frag vert(_2vert v)
{
vert2frag o;
o.pos = UnityObjectToClipPos(v.vertex);
o.uv = TRANSFORM_TEX(v.texcoord, _MainTex);
return o;
}
fixed4 frag(vert2frag i): SV_Target
{
float time = floor(_Time.y * _Speed);
float row = floor(time / _HorizontalAmount);
float column = time - row * _HorizontalAmount;
row %= _VerticalAmount;
half2 uv = i.uv + half2(column, _HorizontalAmount - row);
uv.x /= _HorizontalAmount;
uv.y /= _VerticalAmount;
fixed4 color = tex2D(_MainTex, uv);
color.rgb *= _Color;
return color;
}
ENDCG
}
}
FallBack "Transparent/VertexLit"
}
可能结果看上去不是很好,这也是上面所说的缺点:为了保证动画流畅,只能牺牲画质
其实对于这样的火焰效果,一个主流的解决方案是使用粒子特效
四、UV动画
UV 动画就是随时间不断改变纹理的 uv 坐标,以展现出“动态的”贴图
以下 Shader 可以实现滚动背景的效果,在没学 Shader 之前,背景的滚动都是通过修改其 transform 实现的
Shader "Jaihk662/ScrollAni1"
{
Properties
{
_MainTex("Base Layer(RGBA)", 2D) = "white" {}
_DetailTex("2nd Layer(RGBA)", 2D) = "white" {}
_ScrollX("Base layer Scroll Speed", Float) = 1.0
_Scroll2X("2nd layer Scroll Speed", Float) = 1.0
_Multiplier("Layer Multiplier", Float) = 1
}
SubShader
{
LOD 200
Tags { "RenderType" = "Opaque" "Queue" = "Geometry" }
PASS
{
Tags { "LightMode" = "ForwardBase" }
ZWrite Off
Blend SrcAlpha OneMinusSrcAlpha
CGPROGRAM
#pragma vertex vert //声明顶点着色器的函数
#pragma fragment frag //声明片段着色器的函数
#include "UnityCG.cginc"
#include "Lighting.cginc"
sampler2D _MainTex;
sampler2D _DetailTex;
float _ScrollX;
float _Scroll2X;
float _Multiplier;
float4 _MainTex_ST;
float4 _DetailTex_ST;
struct _2vert
{
float4 vertex: POSITION;
float4 texcoord: TEXCOORD0;
};
struct vert2frag
{
float4 pos: SV_POSITION;
float4 uv: TEXCOORD0;
};
vert2frag vert(_2vert v)
{
vert2frag o;
o.pos = UnityObjectToClipPos(v.vertex);
o.uv.xy = TRANSFORM_TEX(v.texcoord, _MainTex) + frac(float2(_ScrollX, 0.0) * _Time.y); //frac(): 仅保留小数部分
o.uv.zw = TRANSFORM_TEX(v.texcoord, _DetailTex) + frac(float2(_Scroll2X, 0.0) * _Time.y);
return o;
}
fixed4 frag(vert2frag i): SV_Target
{
fixed4 firstLayer = tex2D(_MainTex, i.uv.xy);
fixed4 secondLayer = tex2D(_DetailTex, i.uv.zw);
fixed4 color = lerp(firstLayer, secondLayer, secondLayer.a) * _Multiplier;
return color;
}
ENDCG
}
}
FallBack "VertexLit"
}
参考资料:
- 《UnityShader入门精要》
- https://opengameart.org/