This is investigation about the usefulness of SDF (Signed Distance Field) textures for graphical elements on assets for games. A white paper from valve that describes the method in depth can be found here.
While this may be overkill on this particular asset it felt interesting to challange the limitations with it. 

A breakdown of textures needed for Albedo only.

To be able to color different parts of the graphic I used a color map in conjunction with the SDF. I didn't need the same resolution as the other since it was masked by the SDF.
The textures where authored in Illustrator, Photoshop, Substance Designer and Substance Painter. SDF textures was done by importing the graphics from Illustrator to Photoshop where I added a mid gray inner/outer glow to the black and white linework.
Conclusion
The advantages of this method shows best on large graphics like logotypes and other uniformly sized shapes. There must be enough resolution to hold the smallest shapes, otherwise the small shapes would dissolve. Also, it tend to work best on non compressed sdf textures so using the alpha isn't the best choise. Another drawback is that  using mipmaps destoys the SDF texture on smaller shapes so that needs to be disabled.
That said, it works really well with UI graphics and other 2D art that need to be scalable and I can see the benefit of using this method for large signes and text that the player can pick up and read closely.
Back to Top