Sprite动画效果实现

Posted 2021-01-07 dreamnwx1

2D游戏中通过短时间内快速切换贴图来实现动画效果。为了减少贴图数量，可以合并为一张贴图，根据时间来修改UV坐标，达到和切换贴图一样的效果。
在UnityShader的Properties块中，定义属性：

Properties {
    _MainTex ("Base (RGB)", 2D) = "white" {}
    _CellAmount ("Cell Amount", float) = 0.0
    _Speed ("Speed", float) = 12
}

这里定义了合并后的贴图、子贴图数量和切换动画的速度。
在CG代码中可以这么写：

float spriteUV = IN.uv_MainTex;    //得到UV坐标

float cellUVPercentage = 1.0 / _CellAmount;  //每个单元格占有的百分比

float timeVal = fmod(_Time.y * _Speed, _cellAmount);    //按照时间获取当前需要展示的单元格
timeVal = ceil(timeVal);    //向上取整，得到单元格的下标

float xValue = spriteUV.x;
xValue += timeVal;
xValue *= cellUVPercentage;    //修正UV，加上offset
spriteUV = float2(xValue, spriteUV.y);

这里没有修改UV的y分量，如果我们合并的贴图是按grid方式排列，那么是需要对y也做类似操作。
代码部分的主要难点是如何做修正。先求出每一cell所占的百分比cellUVPercentage，如8张贴图并排合并成一张贴图，那么cellUVPercentage=1.0/8=0.125。
第一个cell的区间：0 - 0.125
第二个cell的区间：0.125 - 0.25
......
第八个cell的区间：0.875 - 1.0
所以按照时间分别取得0,1,2,3,...,7,0,1,2,3,....。