Mapping repeating pattern image onto TileMap

Archive
1
:information_source: Attention Topic was automatically imported from the old Question2Answer platform.
:bust_in_silhouette: Asked By Vinterskog

So, I’m having the following problem. I have a simple tileset for a TileMap that is designed to be used in auto tile mode. The “interiors” of that tileset (meaning the walls or whatever) are just one solid color, and then there’s basically just a framing around them.

Anyway, I want to replace this solid color (black in my case, could be any color of course) with an image to create different variations of the tile set by just specifying different “patterns”. So, where ever there is this one solid color in the tileset, the pattern image will be rendered instead.

This works nicely with the following shader which is attached to the TileMap via a shader material:

shader_type canvas_item;

uniform sampler2D pattern;

void fragment() {
	vec2 t_size = vec2(textureSize(pattern, 0).xy);
	vec2 st_size = vec2(textureSize(TEXTURE, 0).xy);
	vec4 src_color = texture(TEXTURE, UV);
	
	if (all(greaterThan(src_color.rgb, vec3(0.0)))) {
		COLOR = src_color;
	} else {
		COLOR = vec4(texture(pattern, st_size / t_size * UV.xy).rgb, src_color.a);		
	}
}

Here’s the problem: This only works if the tile size of the TileMap is for example 16 and the pattern image has a resolution of 16x16. However, if I want the TileMap to work with 8x8 tiles, I cannot for the life of me figure out how to still map the complete 16x16 pattern onto it. I’ve wrecked my head around this for days now, tried lots of weird calculations but it never comes out right. I did manage to do this in screen space, which is easy, but that looks super weird as soon as there is any movement, like scrolling or just resizing the window.

I hope I managed to describe my problem clearly. Some help would be greatly appreciated - if this is at all possible to do. I’ve either missed something very obvious or this is actually not an easy problem at all. :smiley: