Autoscrolling Layers in Backgrounds

[dragonaero]

Godot Version

v4.2.stable.official [46dc27791]

Question

I’m trying to create an autoscrolling layer in my background. I’m not trying to have my entire background autoscroll; just some layers specifically.

Here are the various solutions I’ve tried to get this to work.

SHADER

shader_type canvas_item;
 
uniform vec2 direction = vec2(1.0, 0.0);
uniform float speed_scale = 0.01;
 
void fragment(){
    vec2 move = direction * TIME * speed_scale;
    COLOR = texture(TEXTURE, UV + move);
}

This technically works, but this is extremely inefficient. Shaders don’t have export variables, so I wouldn’t be able to easily edit their scrolling; I would have to make a new shader script every time I wanted the background layer to move differently, and that would be a hassle.

CODE FOR PARALLAXLAYER

extends ParallaxLayer

func _process(delta):
	position.x -= 40 * delta

Overwritten by Camera2D, which is also in the scene tree.

CODE FOR SPRITE2D

extends Sprite2D

@export var speed = 40

func _process(delta):
	position.x -= speed * delta

That does seem to work at first…until the texture and its mirror move offscreen.

Here’s a video that shows the intended behavior of the background; it uses the first method (the Shader) since it’s only one that works, although the method is rather inefficient for reasons stated above.

Is there a more efficient way (maybe through scripts) to have an individual layer on a background move on its own?

[mrcdk]

@dragonaero

This technically works, but this is extremely inefficient. Shaders don’t have export variables, so I wouldn’t be able to easily edit their scrolling; I would have to make a new shader script every time I wanted the background layer to move differently, and that would be a hassle.

Shaders uniforms are exposed to the editor under Shader Parameters in the ShaderMaterial Resource

You can modify those in code by using ShaderMaterial.set_shader_parameter()

You can use a ParallaxBackground with a ParallaxLayer and modify the ParallaxBackground.scroll_base_offset which will work together with the Camera2D movement.

(I didn’t setup the mirroring correctly but you get an idea)

You can also use the Sprite2D.region_rect and CanvasItem.texture_repeat to scroll the texture (as long as it does not come from a spritesheet). Set the CanvasItem.texture_repeat to Enabled and the Sprite2D.region_rect to the full texture region. Then you can change the Sprite2D.region_rect.position to scroll the texture.

[dragonaero]

@mrcdk

Shaders uniforms are exposed to the editor under Shader Parameters in the ShaderMaterial Resource

Wait actually???

Maybe I should use my head (as well as clicking everywhere and Google) more lol

Thanks for pointing this out! Now I can continue doing programming wizardry