文章目录
前言
使用ShaderGraph的过程中,我们可以了解ShaderGranph的一些操作,我们便开始ShaderGraph来实现序列帧动画。
一、步骤
- 把项目配置为URP管线
- 在场景中新建一个Quad;
- 然后再创建一个材质,命名为SequenceAnimation,把材质拖到Quad上;
- 再创建一个无光照的ShaderGraph文件,命名为SequenceAnimation,把ShaderGraph拖到上面的创建的材质上
二、Shader Graph流程
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就完成了,我们来看看整体效果