The simplest outline shader (canvas_item)

Simple outline shader. Does not work with pixel art and requires partly transparent pixels around the character.

https://www.youtube.com/watch?v=EU022XHDOHw&t=56s

# 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 sprite

 

Credits to the creator of this cool necromancer sprite!

https://creativekind.itch.io

 

Shader code
shader_type canvas_item;

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

void fragment() {
  COLOR = mix(COLOR, vec4(outline_c,  COLOR.a), progress - COLOR.a * progress);
}
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 GodotShaderBoy

Simple Thin Outline

Simple medium thick outline

2D shader: Out of body ghost effect (Pixel Art)

Related shaders

Wind Waker 2d Water Shader Canvas_Item

2D Outline and Rainbow outline 2 in 1

Object Outline Shader

Subscribe
Notify of
guest

5 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
GOGODOGGO
GOGODOGGO
1 month ago

Why does this code achieve an outline effect? It doesn’t seem to set up an outline explicitly. Could you explain?

GOGODOGGO
GOGODOGGO
1 month ago
Reply to  GodotShaderBoy

Understood, thank you very much for your response.

浪琴老板
浪琴老板
1 month ago

You’re a genius who makes use of the translucency of the edges, but it’s also very restrictive