Selection Blur

Hi, this is a simple shader code that I needed for “blur” when selecting a card in my card game, hope other people also find it useful.

I found out using my algorithm can be really expensive on mobile and low-end devices, so I put a parameter to switch between “complex_shader” or just simple shader (where it’s basically just mimicing the blur effect, not real blur effect).

Set complex_blur parameter to true to have real blur; otherwise you can set simple_blur_color to mimic blur effect (better performance).

When having complex blur, you can adjust blur_amount or kernel_size  to your liking (do note that increasing too much kernel_size might be too heaby on low-end devices!).

I hope you guys find it useful! If you have a suggestion for improving this shader or make it better in performance, please do let me know in the comments!

Shader code

shader_type canvas_item;
uniform float blur_amount : hint_range(0.0, 5.0) = 3.0;
uniform float kernel_size : hint_range(0.0, 25.0, 0.1) = 10.0f;
uniform bool is_selected = false;

uniform vec4 simple_blur_color : source_color = vec4(1.0, 1.0, 1.0, 0.2);
// whether to use complex blur or not. complex blur usually has more
// cost, but it's real time and is kinda good ig.
uniform bool complex_blur = false;

void fragment() {
	vec4 color = texture(TEXTURE, UV);
	if (is_selected) {
		if (complex_blur) {
			vec2 texture_size = vec2(textureSize(TEXTURE, 0));
			vec2 pixel_size = 1.0 / texture_size;
			vec4 blur_color = vec4(0.0);
			
			for (float x = -kernel_size; x <= kernel_size; x++) {
				for (float y = -kernel_size; y <= kernel_size; y++) {
					vec2 offset = vec2(x, y) * pixel_size * blur_amount;
					blur_color += texture(TEXTURE, UV + offset);
				}
			}
			
			blur_color /= (kernel_size * 2.0 + 1.0) * (kernel_size * 2.0 + 1.0);
			COLOR = mix(color, blur_color, 0.5);
		} else {
			// we will do simple blur
			COLOR = mix(color, simple_blur_color, simple_blur_color.a);
		}
    }
}

Tags