Repeated texture overlay for tilemaps

This shader can be used to apply a repeated texture to a tilemap. It will only apply the texture to fully red parts of the tiles, so that edges can be preserved if you wish. Check out the demo project for the full set up.

Technically you can use this shader for any sprites, not just tiles, but tiles would be the most common use case.

Shader code

shader_type canvas_item;

uniform sampler2D overlay_tex: repeat_enable, filter_nearest;
uniform float scale = 0.006944444; // calculated by 1/texture size e.g. 1/144
varying vec2 world_position;

void vertex(){
	// calculate the world position for use in the fragment shader
	world_position = (MODEL_MATRIX * vec4(VERTEX, 0.0, 1.0)).xy;
}

void fragment() {
	// only apply overlay_tex on the fully red parts of the original tiles
	float mix_amount = floor(COLOR.r);
	
	// sample the overlay_tex using worldPos
	vec4 overlay_color = texture(overlay_tex, world_position * scale);
	
	// combine original color and overlay color together
	COLOR = mix(COLOR, overlay_color, mix_amount);
}

Live Preview

Tags