โ† All examples

godot shaders

Pixel-exact sprite outline

Draw an outline of a chosen width in texels around the opaque shape of a 2D sprite, with square or rounded corners, for selection highlights, pickups and pixel art.

Recorded render of Pixel-exact sprite outline

What this component contains

  • ATTRIBUTION.md
  • LICENSE
  • README.md
  • component.json
  • demo.tscn
  • inspect_shader.py
  • material.tres
  • preview.png
  • sprite_pixel_outline.gdshader
  • test_package.py
  • verification/native.json

How it works

Shader type
canvas_item
Parameters
outline_color (vec4 = 1, 1, 1, 1), thickness (int = 2), alpha_cutoff (float = 0.5), rounded (bool = yes), outline_only (bool = no)
Use it on
A sprite texture with transparent space around the shape, assigned to the node as usual. The outline is drawn inside the texture's rectangle, so leave a margin at least `thickness` texels wide.
Result
The sprite with a solid line of the chosen colour hugging its silhouette.
Renderers
compatibility: compiled and rendered, forward plus: not verified, mobile: not verified
Placement
res://baltor/godot_shaders/sprite_pixel_outline/

Recorded checks

godot 4.7.2.stable.official.ed1daf0bf

  • contract_static
  • engine_run
  • engine_log_clean
  • shader_in_scene
  • capture_written
  • render_not_uniform
  • shader_changes_pixels

Limits to consider

The outline cannot extend past the texture rectangle; trim or pad sprites accordingly. Cost grows with the square of `thickness` (up to 289 samples at 8). With texture filtering on and the sprite scaled, edges are as soft as the texture sampling. Texture atlases need padding between regions or neighbouring sprites bleed into the outline.