+12

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));
}
Tags
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

Palette Swap (no recolor / recolor)

Screentone – Black spaced pixels

Related shaders

Earthbound-like battle background shader w/scroll effect and palette cycling

guest
2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Studio Adriatic
2 months ago

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

Mmodream
Mmodream
2 months ago

great shader, ty