Editor Introduction
Many developers want to have as much uniqueness in their games as possible. Some with their art style, some with their music, and some with gameplay. Some developers share their uniqueness with the perfect font for their game, and some have played around with their font to make for some fun and interesting story-building. But finding that perfect one for your game might not be available or even created. So you start to build your own font. You could use font-building programs or, in this tutorial, build with Adobe Illustrator and Font Forge. But after you create them, there could be issues with making the font look cool without adding more font styles or improving the look at different sizes. Thanks to Signed Distance Fields or SDF, you can do this and so much more with them. The issue for most developers is knowing how to use SDF with shaders to achieve these effects.
One developer has built an excellent extension that allows you to not worry about this and develop more font styles, saving the shaders for you. We’ll introduce his comments on the extension down below.
Download label-plus for Cocos Creator 3.5 and above.
What do SDFs do?
The issue can be that when you increase the font size or any other object, the item’s resolution will drop, just as if you tried to take a small png and increase its size by 100 times. To fix this, the use of SDFs are used. SDFs make specific textures that give a pixel a value for the distance corresponding to the boundaries of the image. This means that if an object is on the parameter, it’s 0. The further from the boundary, the more positive it is, and the farther away it is from the boundary within the shape, the more negative it is.
What does Label Plus do?
So using the SDF we discussed allows the fonts to be filled in with the correct pixels, no matter the size, with the help of the SDF shader information. This also allows Label Plus to add more interesting things like outlines, shadows, color changes for each, and the thickness of the font or outlines.
This is a time saver as you can now just build one font and build many different looks for it without the need to build multiple styles of fonts.
So you interested? Download it now from the store and try it out!
More information
Other uses for SDFs in Cocos Creator
Document on using SDF for gaming
