Scrolling background

Sometimes you want a parallax background but you don’t want to actually move the Camera.

Import all of your background images with the Repeat flag “Enabled” if it already loops seamlessly and “Mirrored” if you want it to flip horizontally every other loop. You can make a parallax effect if you alter the scroll speed. Note that for every different scroll speed you’ll need to make another ShaderMaterial since changing the param on one will change it on all sprites that share the same resource.

The image used for the thumbnail is Glacial Mountains: Parallax Background by vnitti.

Shader code
shader_type canvas_item;

uniform float speed;

void fragment () {
	COLOR = texture(TEXTURE, vec2(UV.x + TIME * speed, UV.y));
background, parallax, scrolling
The shader code and all code snippets in this post are under CC0 license and can be used freely without the author's permission. Images and videos, and assets depicted in those, do not fall under this license. For more info, see our License terms.

More from Exuin

Gaussian Blur

Radial Speedlines

Lines Screen Transition

Related shaders

Pixelated Starfield with Parallax Scrolling Effect

Voronoi Synapse-ish Background Shader

Procedural Electric Background Shader


Newest Most Voted
Inline Feedbacks
View all comments
Studio Adriatic
1 year ago

You can have same effect if you manually update offset on Parallax Background

1 year ago

great shader, ty