Pixelated Dissolve with Block Size

Inspired by:
https://godotshaders.com/shader/pixel-perfect-dissolving/

For pixel art games, this dissolve shader can be more suitable than a standard noise texture approach. Snapping the UV coordinates to the texel ensures that the transparency step affects the whole texel, rather than one display pixel at a time. In other words, the dissolve effect will appear to pixelate the original texture and not smoothen over fragments from the monitor display.

In addition, this shader adds a new parameter called block size. This further snaps the UV coordinates to a variable amount of texels, rather than just one. As a result, the dissolve effect can appear blockier or grainier, depending on whether the value is increased or decreased respectively.

Parameter values used below.

Cover image: progress = 0.5, block_size = 2

Screenshot 1: progress = 0.5, block_size = 1

Screenshot 2: progress = 0.5, block_size = 4

Screenshot 3: progress = 0.5, block_size = 8

Shader code

shader_type canvas_item;

uniform float progress : hint_range(0, 1);
uniform float block_size = 1;

float random(vec2 uv) {
    return fract(sin(dot(uv, vec2(12.9898, 78.233))) * 438.5453);
}

void fragment() {
	vec4 color = texture(TEXTURE, UV);
	vec2 uv_snapped = floor(UV / TEXTURE_PIXEL_SIZE / vec2(block_size));
	color.a *= step(progress, random(uv_snapped));
	COLOR = color;
}

Live Preview

Tags