Repeated texture overlay for tilemaps

jess.codes

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
grass, grass tiles, repeated texture, seamless, tilemap
Get demo project
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 jess.codes

Related shaders

guest

6 Comments
Oldest
Newest Most Voted
Russell
Russell
1 year ago

this is very nice, thanks for sharing

4
Reply
Sebastian
Sebastian
1 year ago

I love your videos. Can you show us the pixelart water shader sometime?

7
Reply
Zinic
Zinic
11 months ago

If you get texture bleeding (texture is applied over a large area when a red pixel is adjacent to a transparent pixel) then I found there are a couple ways to address this:

  • If the red pixel(s) is from a tile and is adjacent to another tile that has transparent pixels, then you can fix the bleeding by padding the tiles with a colored stripe first and importing the atlas and configuring it to have 1 pixel separation within Godot.
  • Fill transparent pixels with a color set to an opacity of 20%. This will prevent bleeding onto the transparent pixel. This may be an acceptable solution if you know the color below the transparent layer and setting the color to match the color below it. This can make the opacity nearly unnoticeable.
  • Use the double texture method from the video. Set the transparent pixels to blue and then just convert it back to transparent.
1
Reply
Advisor
Advisor
8 months ago
Reply to  Zinic

use built-in method of Image.fix_alpha_edges()

everything is done already

EDIT: unrelated to shader (just raw image data of texture)

Last edited 8 months ago by Advisor
1
Reply
RKI3000
RKI3000
1 month ago
Reply to  Zinic

I found another fix. The core problem is that right now the shader only checks the red channel in the rbg. By checking if b and g are equal to 0.0, and a (alpha) is equal to 1.0, it fixes the problem.
The problem is that sometimes you transparent pixels, even though they have an alpha value of 0.0, can still have a r value of 1.0.

Here is a version of the shader with this fix, as well as the scale variable changed to just being the size of the texture in px (the 1/px_size formula is done for you)

shader_type canvas_item;

uniform sampler2D overlay_tex : repeat_enable, filter_nearest;
uniform float tex_scale = 90.0;
varying vec2 world_position;

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

void fragment() {
	float scale = 1.0 / tex_scale;
	
  bool is_red = (COLOR.r == 1.0 && COLOR.b == 0.0 && COLOR.g == 0.0 && COLOR.a == 1.0);

  if (is_red) {
    vec4 overlay_color = texture(overlay_tex, world_position * scale);
    COLOR = overlay_color;
  }
}
2
Reply
Zinic
Zinic
1 month ago
Reply to  RKI3000

Oh that’s really good to know. I was pretty confused back then.

0
Reply