2D outline stroke

Adds an outer outline stroke to a Sprite texture. Alpha acts as the defining border which the stroke follows. This shader comes from GD Quest’s library of free shaders.

Shader code
shader_type canvas_item;

uniform vec4 line_color : hint_color = vec4(1);
uniform float line_thickness : hint_range(0, 10) = 1.0;

void fragment() {
	vec2 size = TEXTURE_PIXEL_SIZE * line_thickness;
	
	float outline = texture(TEXTURE, UV + vec2(-size.x, 0)).a;
	outline += texture(TEXTURE, UV + vec2(0, size.y)).a;
	outline += texture(TEXTURE, UV + vec2(size.x, 0)).a;
	outline += texture(TEXTURE, UV + vec2(0, -size.y)).a;
	outline += texture(TEXTURE, UV + vec2(-size.x, size.y)).a;
	outline += texture(TEXTURE, UV + vec2(size.x, size.y)).a;
	outline += texture(TEXTURE, UV + vec2(-size.x, -size.y)).a;
	outline += texture(TEXTURE, UV + vec2(size.x, -size.y)).a;
	outline = min(outline, 1.0);
	
	vec4 color = texture(TEXTURE, UV);
	COLOR = mix(color, line_color, outline - color.a);
}
Tags
2d, border, outline, sprite, stroke
The shader code and all code snippets in this post are under MIT license and can be used freely. Images and videos, and assets depicted in those, do not fall under this license. For more info, see our License terms.

More from hancan

Waving flag

3D burn dissolve

Related shaders

Line Jitter / Stroke Shake Effect

2D Outline and Rainbow outline 2 in 1

Per object depth-based outline

guest

2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
AndrewD
AndrewD
1 year ago

Good shader, but it doesn’t work well with transperent sprites

makytizmo
makytizmo
7 months ago

Godot 4

Simply replace hint_color with source_color