Spirit Crossing – Emote VFX & SDF Shader

I was tasked with creating several “emote” VFX for spirit NPCs. The team iterated on a style and eventually landed on a “paper cutout” look for emotes. In order to effectively implement this style, I ended up using Signed Distance Field mask textures to allow for cutouts which could be “eroded” with an alpha value.

In order to produce these mask textures, I created a custom tool in Python which allowed myself and other artists to easily create an SDF from the alpha channel of a given image.

Most textures had a pair of these mask textures – one for the inner “smooth” outline, and one for the outer “chunky” angular outline. This is used to implement the “paper cutout” look, with a white border around the inner shape.

For some emotes, I also experimented with a “hand-animated” look. For example, the bubbles for the “sick” effect seen above uses a flipbook to switch between multiple cutout masks, in addition to stepped time values for appear/disappear transitions to produce a low framerate look.