网站建设朋友圈,抖音seo排名,如需锦州网站建设,wordpress栏目管理大家好#xff0c;我是阿赵。 在Unity引擎里面用shader播放序列图#xff0c;估计很多人都有用到了#xff0c;我自己而已写过好几个版本。这里大概介绍一下。
一、原理 先说目的#xff0c;我现在有一张这样的图片#xff1a; 这张图片上面#xff0c;有9个格子我是阿赵。 在Unity引擎里面用shader播放序列图估计很多人都有用到了我自己而已写过好几个版本。这里大概介绍一下。
一、原理 先说目的我现在有一张这样的图片 这张图片上面有9个格子可以理解成是一个动画的9个序列帧接下来通过写一个简单的Shader按照顺序逐个的显示出来形成一个循环的动画
ASE里面直接就有这样一个播放序列帧动画的节点叫做Flipbool UV Animation节点
从节点可以看出做这个UV动画需要的参数有这些 1、原始的UV坐标 2、序列图的行列数比如我刚才那张图就是3x3的行列式 3、播放速度 4、第几帧开始播放 5、当前播放的时间。 然后返回的结果是一个新的UV坐标 所以从原理上来说这个序列帧播放其实是根据当前时间算出当前需要播放第几帧然后通过行列数算出截取第几帧所在的图片的UV坐标然后返回。
二、实现的代码 这个UV序列帧动画的代码我也写过好几个版本但感觉还是ASE的看起来比较标准一点所以我就参考ASE的Flipbool UV Animation节点把它翻译成一个方法
float2 GetSequenceAnimUV(float2 uv,float cols,float rows,float speed,float startFrame)
{float totalTiles cols * rows;float colsOffset 1.0f / cols;float rowsOffset 1.0f / rows;float speedVal _Time.y * speed;float2 offsetTiling float2(colsOffset, rowsOffset);float currentIndex round(fmod(speedVal startFrame, totalTiles));currentIndex (currentIndex 0) ? totalTiles : 0;float lineNum round(fmod(currentIndex, cols));float offsetX lineNum * colsOffset;float rowCount round(fmod((currentIndex - lineNum) / cols, rows));rowCount (int)(rows - 1) - rowCount;float offsetY rowCount * rowsOffset;float2 offsetXY float2(offsetX, offsetY);float2 result uv*offsetTiling offsetXY;return result;
}使用的时候传入uv、行列数、速度、开始帧这几个参数之后就可以返回一个当前帧的UV然后拿这个UV去采样整张图片就可以了
三、扩展应用
1、自己控制时间流逝
从上面的代码可以看出这个序列帧动画会自己播放是因为使用了_Time.y这是一个时间代表了从加载场景完成到当前的时间是会自己增加的。 如果想不用这个系统的时间而是由自己来控制时间有2个办法
1.改变speed参数
speed可以使正数、负数或者是0。当speed越大时播放得越快当speed为负数时动画就是倒着播放。当速度为0时动画播放就停止了。 不过我觉得速度参数只是一个控制播放快慢的手段不是控制时间的方式。
2.自己控制time 这个方法是不使用_Time.y而是自己传入timeVal参数。这样我们需要在其他脚本比如C#里面维护一个时间变量。 这样做的好处是在不改变播放正常速度时我们可以任意的跳转到某一个时间点。比如现在需要做一个时光回退的效果突然间整个世界都回溯到之前几秒钟通过统一传入某个时间戳所有动画都可以一起回退到之前的状态。 当然用time参数也可以实现加速减速和暂停。 自己控制time参数的方法如下
float2 GetSequenceAnimUVByTime(float2 uv, float cols, float rows, float speed, float startFrame,float timeVal)
{float totalTiles cols * rows;float colsOffset 1.0f / cols;float rowsOffset 1.0f / rows;float speedVal timeVal * speed;float2 offsetTiling float2(colsOffset, rowsOffset);float currentIndex round(fmod(speedVal startFrame, totalTiles));currentIndex (currentIndex 0) ? totalTiles : 0;float lineNum round(fmod(currentIndex, cols));float offsetX lineNum * colsOffset;float rowCount round(fmod((currentIndex - lineNum) / cols, rows));rowCount (int)(rows - 1) - rowCount;float offsetY rowCount * rowsOffset;float2 offsetXY float2(offsetX, offsetY);float2 result uv * offsetTiling offsetXY;return result;
}2、自己控制播放指定帧 有时候做一些比较特殊的序列帧动画需要根据情况播放特定很准确的某一帧或者在某几帧之间重复。 这样的情况如果使用Time作为控制似乎就比较的不适合了。所以根据实际情况改一下可以把传入的速度参数和时间参数都去掉变成传入想播放第几帧
float2 GetSequenceAnimUVByIndex(float2 uv, float cols, float rows, float currentFrame)
{float totalTiles cols * rows;float colsOffset 1.0f / cols;float rowsOffset 1.0f / rows;float2 offsetTiling float2(colsOffset, rowsOffset);float currentIndex currentFrame;currentIndex (currentIndex 0) ? totalTiles : 0;float lineNum round(fmod(currentIndex, cols));float offsetX lineNum * colsOffset;float rowCount round(fmod((currentIndex - lineNum) / cols, rows));rowCount (int)(rows - 1) - rowCount;float offsetY rowCount * rowsOffset;float2 offsetXY float2(offsetX, offsetY);float2 result uv * offsetTiling offsetXY;return result;
}
