Skip to content

Simple extension of the Heaps' Text class that supports outlines using multi-channel SDF.

License

Notifications You must be signed in to change notification settings

4as/heaps-msdf-text

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Introduction

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.

Usage

1. Creating an SDF texture

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

2. Instantiating the MSDF font in your application

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.

3. Create an OutlinedText object and configure it to display the outlines

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).
Thickness example!

Smoothness controls the blur on the edges of the rendered font. It's the same value as smoothing passed to the toSdfFont method.
Smoothness example!

Outline thickness controls the cut off point for the outlines. The outlines will be rendered in between this value and the thickness value.
Outline thickness example!

Outline smoothness controls the blur on the edges of the rendered outlines.
Outline smoothness example!

4. Miscellaneous stuff

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

About

Simple extension of the Heaps' Text class that supports outlines using multi-channel SDF.

Topics

Resources

License

Stars

Watchers

Forks

Languages