Tiled texture inside of mask

Allows you to tile a pattern inside of another texture acting as a mask (based on opacity). The pattern texture will scale from its center but you can always offset it using the offset uniform. 


On a texture (TextureRect, Sprite, etc…) add a new ShaderMaterial and a new Shader and put the code below.

In the shader params, put the pattern texture you want to tile (make sure “repeat” is enabled in the import tab).

Play with the tile_factor and the offset, to obtain the result you desire! You can easily animate these values to make the pattern move.


  • pattern: the tilable texture you want to use
  • tile_factor: the scaling factor, the bigger the more tilling
  • tile_offset: offset the texture from its center


Shoutout to Nekoto, for the help!

Shader code
shader_type canvas_item;

uniform sampler2D pattern;
uniform float tile_factor: hint_range(0.0, 10.0);
uniform vec2 tile_offset = vec2(0.0);

void fragment() {
	vec2 pattern_pixel_size = 1.0 / vec2(textureSize(pattern, 0));
	vec2 diff = pattern_pixel_size / TEXTURE_PIXEL_SIZE;
	vec4 in_tex = texture(TEXTURE, UV);
	// brings the uv to -1, 1
	vec2 centered_uv = UV * 2.0 - 1.0;
	vec2 tiled_uv = centered_uv * tile_factor * diff;
	// brings back the uv to 0, 1
	tiled_uv  = tiled_uv * 0.5 + 0.5;
	tiled_uv += tile_offset;
	vec4 pattern_tex = texture(pattern, tiled_uv);
	COLOR.rgb = pattern_tex.rgb;
	COLOR.a = pattern_tex.a * in_tex.a;
2d, masking, pattern, tiling
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 mreliptik

2D dissolve with burn edge

Loading effect (color over grayscale)

2D Rotation deform

Related shaders

Simple tiled texture scroll

Brick/tiled wall

Screenspace Tiled Texturing

Notify of

Inline Feedbacks
View all comments