Giter Club home page Giter Club logo

heaps-msdf-text's Introduction

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

heaps-msdf-text's People

Contributors

4as avatar

Stargazers

 avatar  avatar  avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.