Making 2D outlines

After this brief introduction to 2D sprite shaders, we will move on to another nice topic for 2D shaders: the auto-outlining of sprites, thanks to dynamic and tweakable stroke shaders. Our goal here is to build more and more advanced shaders to introduce new effects gradually and create more complex outlines around our sprites.

We will first begin with a simple outline using one solid color, then we will see how to use post-processing and HDR emissive colors to add glow, and finally, we will study how to make animated shaders that use the current time in their logic.

Implementing a simple outline

First of all, let’s see how to implement a simple sprite outline for a pixel-perfect sprite. This is a simple technique for adding a stroke that relies only on copying and translating. It doesn’t handle corners, so it doesn’t work very well for smooth sprites, but here is how it will look on our sample pixel-perfect sphere:

...