The simplest outline shader (canvas_item)

GodotShaderBoy

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);
}
Live Preview
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

Related shaders

Comments 5

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

    0

    1. Added the video in the description. It uses partly transparent pixels if there are any around a character. It's not designed to work with pixel art or sprites that do not have partly transparent pixels around the character.

      1
  2. 浪琴老板

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

    1