图片的序列帧播放-Shader

本文介绍了一种使用Shader技术实现图片序列帧播放的方法。通过定义行和列参数分割图片,并利用时间变量控制滚动速度,实现图片按编号依次显示。适合应用于对细节要求不高的场景。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

缘由

在学习过程中遇到了图片的序列帧播放,使用shader实现了该功能,特此记录一下。

原理描述

一般会有一个图片让你播放,例如下面的这个

图片一共4行4列,从左上角开始从左到右,从上到下,依次编号为1,2,3,...12, 我们要实现的就是图片依次按照编号显示。由此我们就需要定义两个参数,分别为行和列,用来分割这个图片,此外我们还需要在设置一个参数去控制滚动的速度,我们可以取时间作为变量,通过经过的时间去判断现在图片应该显示哪张。

确定完需要的参数我们就开始编写,用时间除以总个数(4*4)的余数就是现在需要显示的格子,知道了格子在哪个位置之后我们就需要把他的位置记录下来去显示就好了。

过程

float value = 1.0 / _Line;
float rowValue = 1.0 / _Row;

o.vertex = UnityObjectToClipPos(v.vertex);
o.uv = v.texcoord;
o.uv.y = o.uv.y * value;
//先从最上层开始,逐层递减
o.uv.y = o.uv.y + value * ( _Line - 1 );

//公式为  时间 除以 总格数 得到的 余数 在除以 列数 就得到 他在这一排的第几格 
float b = fmod(_Time.y * _Speed ,( _Row  * _Line)) / _Row;
o.uv.y = o.uv.y - value * floor( b );
o.uv.x = o.uv.x * rowValue;
o.uv.x = o.uv.x + rowValue * fmod(floor(_Time.y  * _Speed), _Row);

总结

由于显示的图片是其中的一小部分所以不适用于很精细的地方。

代码可能还不是最好的,还能再简单点,后面想起来了在修改,现在先这样,该去收衣服了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值