Single BG Retro Parallax (Scanline Interrupt Style)

Old consoles like the Game Boy and NES didn’t have fancy stacked backgrounds, but could still get parallax by using a trick:

Since the systems drew pixel line by pixel line across the screen, they could interrupt that process every line and offset the background being drawn.

For this shader, you only need one background on a TextureRect, and then a matching vertical texture that determines how much of an offset you want to apply.

You can either use a Gradient2D that’s aligned vertically, or manually make a texture where the darker the value the faster that scanline moves. It’ll only sample from the left side of the texture. Check example project.

You can also do unique “hblank” effects with this since it’s a general X axis offset, you’re not limited to parallax! If your gradient has thin repeating stripes for example you could get old-school glitchy stuff, try things out!

Shader code

shader_type canvas_item;

uniform float strength = 1.0;
uniform float manual_offset = 1.0;
uniform bool auto_scroll = false;
uniform sampler2D parallax_map : filter_nearest;

void fragment() {
	float texels = float(textureSize(TEXTURE,0).x);
	float time = max(TIME*float(auto_scroll),1.0);
	float pixel_offset = floor(((1.0-texture(parallax_map,vec2(0,UV.y)).y) * time * manual_offset * strength) * texels);
	float uv_offset = pixel_offset / texels;
	vec2 new_uv = UV;
	new_uv.x += uv_offset;
	COLOR = texture(TEXTURE, new_uv);
}

Live Preview

Tags