Simple extension of the Heaps' Text class that supports outlines using multi-channel SDF. Should work as a drop-in replacement for any Text instance you're using. Tested in HashLink, Flash, and HTML5.
Rendering a font with SDF for Heaps can be a little tricky since not only you need it to be compatible with the shading logic I'm using, you also need to export it in a proper format. Of all the tools I've tried msdf-gdx-gen gave the best results, however it requires Java to run.
Here's an example of a command you can use to create a compatible font:
java -jar msdfgen.jar -t msdf -a sdf -s 64 -r 22 -c latin-9 yourfont.ttf -p 2 -d 2048 2048
Once you have your .fnt and .png files exported, put them somewhere in your project's folder, and then instantiate the related Font object using the toSdfFont
method.
var fnt:Font = Res.yourfont.toSdfFont(48, SDFChannel.MultiChannel);
Note: Non-multichannel fonts are also supported, but you need to export them using a different set of msdfgen.jar export options.
Download all the classes located in the src folder and place them in your project's source folder.
Finally you can create the OutlinedText
object and pass into it the previously instantiated Font:
var txt:OutlinedText = new OutlinedText( fnt );
By default OutlinedText
does not display any outlines, so you need to enable them by setting the outline
property to true
. Now only thing left to do is to mess around with OutlinedText
's properties to create the desired look.
Thickness controls the cut off point for the font rendering. It's the same value as alphaCutoff
passed to the toSdfFont
method but used with reversed logic (ie. alphaCutoff = 0.2
will result in thickness = 0.8
).
Smoothness controls the blur on the edges of the rendered font. It's the same value as smoothing
passed to the toSdfFont
method.
Outline thickness controls the cut off point for the outlines. The outlines will be rendered in between this value and the thickness value.
Outline smoothness controls the blur on the edges of the rendered outlines.
Setting the font
property will instantly reset all outline properties on the OutlinedText
object. This allows OutlinedText
to directly replace any Text
without (hopefully) any changes.
If you want to see some examples on how to use OutlinedText
check out the src-example folder.
You can also check out the results live over here: 4as.github.io/heaps-msdf-text