Scrolling Starry Background

This shader creates a random scrolling pattern of stars that can be used as a space background, you only need the texture of a single star.

The effect in the cover image and the screenshot was created by overlaying a few TextureRect nodes all with a shader material with the same shader.

The textures used for the larger stars are a 5×5 pixels and a 7×7 pixels textures. The small stars texture is a larger texture with some dots. The background nebula is a NoiseTexture with a gradient with interpolation_mode set to “Constant”.

The star textures can be found here: https://timberlate007.itch.io/shootem-up

Shader code

shader_type canvas_item;

uniform vec2 stars_speed = vec2(0.0);
uniform float stars_density: hint_range(0.0, 1.0, 0.001) = 0.01;

varying vec2 position;

// https://thebookofshaders.com/10/
float random(vec2 st) {
	return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123);
}

// Called for every vertex the material is visible on.
void vertex() {
	position = VERTEX;
}

// Called for every pixel the material is visible on.
void fragment() {
	vec2 uv = (position + TIME * stars_speed) * TEXTURE_PIXEL_SIZE;
	uv = fract(uv) * step(random(floor(uv)), stars_density);
	COLOR = texture(TEXTURE, uv);
}

Live Preview

Tags