Tileset Worldspace Noise/Decal Overlay

Ever wanted to spice up your 2D tilesets and add some texture? This worldspace tileset shader will overlay a noise texture and decal on top of tilesets in worldspace. This is great for adding in foliage, moss, sand, or any other kind of texture on top of your tilesets. This shader is also pixel aligned so that your texture will align with the pixels in your tiles.

Uniforms

• Noise – A noise texture to be overlaid (should have transparency).
• Decal – A tileable decal texture to be overlaid whever there is visible noise (should be larger than your tile size)
• Display Decal – A bool to denote whether or not to show the decal texture.

The cover image above is a tileset with 16×16 tiles, setup using a NoiseTexture2D with Simplex Smooth for the noise and a 512×512 decal texture for the decal.

Instructions

Create and save a material, and copy the shader code over into it. Add a noise texture and a decal texture (optional). In your tileset settings, select all the tiles you want the shader to apply to, and add your shader material into the material box under Rendering.

Shader code

shader_type canvas_item;

// Noise and decal tileset shader by Big Boy Games (Jesse)

uniform sampler2D noise : repeat_enable, filter_nearest;
uniform sampler2D decal : repeat_enable, filter_nearest;
uniform bool displayDecal = false;
varying vec2 worldUV;

void vertex() {
	worldUV = (MODEL_MATRIX*vec4(VERTEX, 0.0, 1.0)).xy;
}

void fragment() {
	vec2 noiseCorrect = vec2(1.0,1.0)/vec2(textureSize(noise, 0));
	vec2 decalCorrect = vec2(1.0,1.0)/vec2(textureSize(decal, 0));
	
	COLOR.rgb = mix(COLOR.rgb, texture(noise, worldUV*noiseCorrect).rgb, texture(noise, worldUV*noiseCorrect).a);
	
	if (displayDecal) {
		COLOR.rgb = mix(COLOR.rgb, texture(decal, worldUV*decalCorrect).rgb, texture(decal, worldUV*decalCorrect).a * texture(noise, worldUV*noiseCorrect).a);
	}
}

Live Preview

Tags