Reprint address: http://t.csdn.cn/yR73g
Article directory
-
Table of contents
foreword
In the process of using ShaderGraph, we can understand some operations of ShaderGranph, and we start ShaderGraph to realize sequence frame animation.
1. Steps
- Configure the project as a URP pipeline
- Create a new Quad in the scene;
- Then create a material, name it SequenceAnimation, and drag the material onto the Quad;
- Create another unlit ShaderGraph file, name it SequenceAnimation, and drag ShaderGraph to the material created above
Two, Shader Graph process
1. Set the type to transparent under Graph Settings
2. Create Texture 2D under the left panel
3. Drag Texture 2D into the operation view
4. Create the node Sample Texture 2D node
5. Connect the Sample Texture 2D node to Texture 2D
Here we introduce the sequence frame picture, click TexTure2D with the mouse, and the configuration view appears, as shown in the figure
6. Create Tilling And Offset
7. The connection is as shown in the figure. In the figure below, Tilling represents the compression factor, and Offset represents the offset. Since our sequence frame picture is 8x8, Tilling should be set to 1/8 here, we can add two
8. We create two new Float variables, namely Horizontal and Vertical, which represent the row and column of the sequence frame picture. 1/Horizontal, 1/Vertical represents the compression factor of the image. And connected to Tilling. Here you can see the effect of the following pictures, only one of the pictures is displayed.
9. Next, let's operate the offset. The essence of the sequence frame animation lies in the offset. As long as the offset is correctly operated, then I will realize the sequence frame animation. Create a new vector2 node and connect it to Offset. The x of vector2 represents the offset in the x-axis direction, and y represents the offset in the y-axis direction.
10. Next we calculate the value of x, y
time =floor(Time*Speed)
y = -floor(time/Horizontal)
x = time-y*VerticalCreate a Speed variable to control the animation playback speed. Create a Time node and multiply it with Speed
11. According to the above algorithm, we continue to create nodes and calculate the y value. Since the origin of the UV coordinates is in the lower left corner, and the sequence frame picture is calculated from the upper left corner, the inversion operation must be done at the end. Finally, it is connected to the y of Vector2.
12. The value of x is calculated below and connected to x of Vector2
13. Since the output of Vector2 in step 12 is a value greater than 1, here we only calculate the offset, and need to convert it to a decimal again, because the range of UV is 0~1.
Multiply the Vector2 in step 12 with the Vector2 connected to Tilling in step 8 to get the correct offset. as the picture shows.
14. Here our ShaderGraph is completed, let's take a look at the overall effect
https://download.csdn.net/download/weixin_45891168/87620276