Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/4as/heaps-msdf-text

Simple extension of the Heaps' Text class that supports outlines using multi-channel SDF.
https://github.com/4as/heaps-msdf-text

haxe heapsio msdf sdf

Last synced: 7 days ago
JSON representation

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

Awesome Lists containing this project

README 

        
# 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](https://github.com/maltaisn/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!](/docs/thickness.png)  

  

*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!](/docs/smoothness.png)  

  

*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!](/docs/outlineThickness.png)  

  

*Outline smoothness* controls the blur on the edges of the rendered outlines.  

![Outline smoothness example!](/docs/outlineSmoothness.png)  

  

##### 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](https://4as.github.io/heaps-msdf-text/)