Godot Tutorial: Outline Shader for Complex Sprites

Example results with red outline for debugging

Problem statement

You have a sprite that is comprised of multiple Sprite or AnimatedSprite nodes. You want to draw an outline around the entire sprite—that is, all the sprites.

What doesn’t work

Attaching an outline shader to a parent Control’s shader material and then setting all children to inherit the parent’s shader material (“Use Parent Material”). This outline will be applied around every sub-Sprite.

Outlines in black this time. The eyes, mouth, etc have outlines. Undesired.

Using a BackBufferCopy also doesn’t work. There is a dearth of documentation on how to use this node correctly. But the BackBufferCopy would result in the entire screen being buffered into the SCREEN_TEXTURE built-in. You would lose the distinction between foreground and background. (I am assuming your set up uses transparency around your sprite.)

What Works

Viewports. Create this node tree:

ViewportContainer
∟ Viewport
  ∟ Sprite
  ∟ Animated Sprite
  ∟ ...

On your Viewport node, set “Transparent BG”. Then apply your outline shader to the ViewportContainer.

The downside of viewports is that you can’t move around children nodes via the visual editor in Godot. You have to edit the position and other properties in the Inspector (right hand panel). I’m not a fan of child viewports for this reason, but alas.

Alternatives

This user on the Godot forums suggested copying the toon shader method. You can create two copies of your complex sprite. Overlay them. Apply the naive outline shader (from “What doesn’t work”) to the lower complex sprite. This method is hacky since you will need to apply any transparency manipulation shaders to BOTH instances. I chose not to use this method since I do fade my sprites (with a dither shader).

Anyways, I hope that saves you some time. Good luck with game dev.