Simple Thin Outline

GodotShaderBoy August 19, 2024August 19, 2024

Works by using two diagonal copies of the texture, perfect for achieving a thin outline. However, this method is not suitable for creating thick outlines.

Works for Godot 4.3 (currently latest)

# Learn how to create 2D shaders like these

Want to master 2D shaders? Learn how to create stunning effects like these and more by gaining a deep understanding of the GDShader language in Godot:

https://godot2dshaders.com/

# Credits

Credits to the creator of this cool necromancer sprite!

Credits character https://creativekind.itch.io

See more about this shader

Shader code

shader_type canvas_item;

uniform vec3 outline_color: source_color;
uniform float progress: hint_range(0.0, 1.0);

void fragment() {
	vec4 line_negative = vec4(outline_color.rgb, texture(TEXTURE, UV - 0.002).a);
	vec4 line_positive = vec4(outline_color.rgb, texture(TEXTURE, UV + 0.002).a);
	vec4 outline = mix(line_negative, line_positive, line_positive);
	COLOR.rgba = mix(COLOR, outline, progress * (1.0 - COLOR.a));
}