上面的图片为表面着色器的输入图片,要用Shader实现动画效果。
首先,定义属性:
Properties {
_MainTex ("Base (RGB)", 2D) = "white" {}
_TexWidth("Sheet Width",float) = 0.0
_CellAmount("Cell Amount",float) = 0.0
_Speed("Speed",Range(0.01,32)) = 12
}
_MainTex即为上面图片的输入接口,_TexWidth为图片的像素长度,以上图片导入到Unity中,大小为1024*256,所以_TexWidth的值应为1024,_CellAmount是上图中动画帧的个数,数一下为9,_Speed是动画播放的速度。
然后,开始编写表面着色器的代码:
void surf (Input IN, inout SurfaceOutput o) {
float2 spriteUV = IN.uv_MainTex;
float cellPixelWidth = _TexWidth/_CellAmount;//计算每个动画帧的长度
float cellUVPercentage = cellPixelWidth/_TexWidth;//计算每个动画帧的百分比
float timeVal = fmod(_Time.y*_Speed,_CellAmount);//时间乘以速度取模动画帧数量
timeVal = ceil(timeVal);//进一法取整
float xValue = spriteUV.x;
xValue += cellUVPercentage*timeVal*_CellAmount;
xValue *= cellUVPercentage;
spriteUV = float2(xValue,spriteUV.y);
half4 c = tex2D (_MainTex, spriteUV);
o.Albedo = c.rgb;
o.Alpha = c.a;
}
虽说效果是做出来了,但是对于它的实现代码还是有些不理解,不理解计算timeVal是什么作用,还有为什么要用_Time.y来乘以速度,为什么要对帧数量取模,下面把UV的x值增加cellUVPercentage*timeVal*_CellAmount不知是为何,还有xValue *= cellUVPercentage;不明白为什么要这样。
有没有人知道这个动画实现的原理?欢迎大家来共同学习探讨。