上篇我们介绍了ShaderLab编程实现序列帧动画,这里我们介绍一下如何使用可视化界面ShaderGraph来实现。
在使用ShaderGraph的过程中,我们可以了解ShaderGranph的一些操作,由于上篇文章已经分享了原理方面的知识,这里不再赘述。我们便开始ShaderGraph来实现序列帧动画。
关注公众号:科技探幽
回复 帧动画
1、把项目配置为URP管线
2、在场景中新建一个Quad;
3、然后再创建一个材质,命名为SequenceAnimation,把材质拖到Quad上;
3、再创建一个无光照的ShaderGraph文件,命名为SequenceAnimation,把ShaderGraph拖到上面的创建的材质上
1、再Graph Settings下把类型设置为透明
2、在左侧面板下创建Texture 2D
3、把Texture 2D拖到操作视图中
4、创建节点Sample Texture 2D节点
5、把Sample Texture 2D节点与Texture 2D相连
这里我们把序列帧图片引入进来,鼠标单击TexTure2D,出现配置视图,如图所示
6、创建Tilling And Offset
7、连接如图所示,下图中Tilling代表压缩倍数,Offset代表偏移量。由于我们的序列帧图片是8x8的,所以此处Tilling应设置为1/8,我们可以增加两个
8、我们新建两个Float变量,分别为Horizontal,Vertical,代表序列帧图片行与列。1/Horizontal,1/Vertical代表图片的压缩倍数。并与Tilling相连。这里可以看出后面的图片效果,只显示了其中一帧图片。
9、下面我们来操作偏移量,序列帧动画的精髓都在偏移量上,只要正确的操作了偏移量,那么我就实现序列帧动画。新建一个vector2节点,与Offset相连。而vector2的x代表x轴方向上的偏移,y代表y轴方向上的偏移。
10、下面我们计算x,y的值,
time =floor(Time*Speed)
y = -floor(time/Horizontal)
x = time-y*Vertical
如果对这个算法不熟悉,可以看我上篇文章。
创建Speed变量控制动画播放速度。创建Time节点与Speed相乘
11、根据上面的算法,我们继续创建节点,算出y值。由于UV的坐标原点在左下角,而序列帧图片是从左上角开始计算,所以这里最后要做取反操作。最后在与Vector2的y相连。
12、下面计算x的值,并与Vector2的x相连
13、由于12步中的Vector2的输出为大于1的值,这里我们仅仅计算了偏移,还需要再转为小数,因为UV的范围在0~1。
让12步中的Vector2与第8步中与Tilling相连的Vector2相乘,得到正确的偏移量。如图所示。
14、这里我们ShaderGraph就完成了,我们来看看整体效果