Help with random image overlay on tilemap

Godot Version

v4.1.3.stable

Question

Did not know if this question of mine belonged in the programming section or shaders section so I apologize if this is in the wrong section.

I was wondering if I could get some help on adding an overlay to a tilemap. Similar to the one from The End is Nigh where they used a blank black tileset and put an image overlay over the tileset that randomly distributes itself to each tile.

Here is a link to the info I got from, this will explain better:
https://www.glaielgames.com/teinworkshop/moddermanual/manual/tileset.html#overgraph

Here are two picture as an example of what I am trying to do:
This is the overlay:


This is in game:

Any help with this would be highly appreciated, Thank you!

Well to achieve this you would normally use the clip_children option on any canvas item. The problem is it doesnt work with tiles in tilemaps. A workaround would be to use a polygon as clipping mask. you could probably automate it by checking the tilemap where tiles are and place the corners of the polygon automatically. Its a lot of work but once implemented should work with any tilemap

actually try this shader:

shader_type canvas_item;

uniform sampler2D image;

uniform vec2 image_size; // Size of image in pixels
varying vec4 world_coord;

void vertex(){
	world_coord= (MODEL_MATRIX * CANVAS_MATRIX * SCREEN_MATRIX) * vec4(VERTEX, 1.0, 1.0);
}

void fragment() {
    // Calculate the local position within the TileMap in pixels
    vec2 local_pos = FRAGCOORD.xy - world_coord.xy;

    // Calculate the UV coordinates for tiling
    vec2 uv = mod(local_pos / image_size, 1.0);
    
    // Sample the overlay texture
    vec4 overlay_color = texture(image, uv);
    
    // Output the final color
    COLOR = overlay_color;
}
1 Like

where would this shader script go, please explain in more details

This shader would go on the tilemap. in the shader parameters you put your image and the image_size is the image_size

1 Like

Thank you this works nice! Although for my purposes, unlike The End is Nigh camera, my camera is moving and it creates this weird affect with the image overlay on the tilemap and I am not entirely sure on how to make it not move. Here is a video:

For me it works perfectly. Maybe you put the wrong image_size in the shader-parameter? it has to be the exact size. If it still doenst work, show me how your scene is build up, like which node is a parent of which other node

1 Like

wow thank you! this work perfect now, your right I did not put the exact size of the image.

1 Like