log://amria

Godot 4 Tutorial: Tiled Background Shader

You can make a moving tiled background in Godot 4 using a single TextureRect and a shader instead of multiple sprites. I learned how to create this effect from a Reddit comment and adapted it to make the scrolling effect controlled via scripting. This approach is well-suited for background elements and also has the bonus of being size-independent.

A picture of the completed scene

Shader Creation

  1. In the FileSystem window, create a new Shader resource.
  2. Open the Shader Editor and copy the below code:
// shader_tiling_texture.gdshader
shader_type canvas_item;

uniform float x = 0.0;

void fragment() {
    vec2 pos = UV;
    pos.x = pos.x + x;
    COLOR = texture(TEXTURE, pos);
}
  1. In the FileSystem window, create a new ShaderMaterial resource.
  2. Load the Shader in the ShaderMaterial.

Scene Setup

  1. Create a TextureRect.
  2. Set the TextureRect's texture.
  3. Set the TextureRect's "Expand Mode" to "Ignore Size".
  4. Set the TextureRect's "Stretch Mode" to "Tile".
  5. Set the TextureRect's CanvasItem.Material to the ShaderMaterial you previously created.
  6. Attach a script to the TextureRect and copy the below code:
# tiling_background.gdscript
extends TextureRect

@export var active = false
@export var speed = 0.1

var x = 0.0

func _physics_process(delta):
    if active == true:
        x += speed * delta

    material.set_shader_parameter("x", x)

func pause():
    active = false

func resume():
    active = true

func restart():
    x = 0.0
    active = true

func reset():
    x = 0.0
    active = false

You can now play the effect using $TextureRect.restart() from the parent node.

Reference

I last used this in Godot 4.2.2.stable.