Texture Scrolling with Visual Shader, GDShader and AnimationPlayer

 

1. Visual Shader

- time : Time variable value, which is often used to create effects that change over time.

- Panning : Node is available only in Godot 4 and above. Node is used to move texture. Try adjusting the value at scale or offset to move UV, both of which are vector 2.

- Texture2D : Here we use GradientTexture2D. What is adjusted in this texture

- Color: Add color and adjust the gap between colors as shown in the picture.

- Interpolation: Make it Constant or have consistent color without color blending.

The output node is already available. Drag the color line to click on Albedo. The object will be displayed.

2. GDShader

This is a Shader code writing. Here, an example is just moving the noise texture.

Describe the code as far as know.

uniform: It is a variable declaration that can be adjusted on the right hand side.

sampler2D: It is a texture. Here, use the noise texture in the image below.

fragment(): It is a function to display the color of each pixel.

ALBEDO: It is a special variable in the shader. It is a vector 3.

vec2 is a value in vector 2.

texture(): It is a function that returns a value. In this case, sample2D, UV is used.

UV: It is a vector 2. The coordinate values ​​used to indicate the position on the texture for each pixel of the object.

If you want to move the texture, what you need to remember is vec2(x,y)*TIME+UV. If you want to move it back to the other side, subtract the UV.

The principle of texture sliding is obtained by pressing show generate shader code.

3. AnimationPlayer

Texture was created using Krita and Material uses Standard Material.

Sliding texture using the AnimationPlayer node, we  Key-frame at the UV/Off-set.

If you want the background to be transparent, choose Alpha.