Distance Field Font

FlxText uses Freetype to generate bitmap fonts for desktop and Android and for HTML5 you need a tool to generate a bitmap font. These traditional bitmapfont looks fine when they are 1:1 on screen, but they look bad when they are scaled or rotated. The distance field solves this problem. With this you can render crisp text even if it is scale very large, rotated or other transforms. There are benefits using distance field over Freetype and traditional bitmap fonts.

Traditional Bitmap font
– For each font size you need to generate a bitmap font.
– Depending on how many BitmapFont files you use, it can eat the free space on the device and multiple texture atlases can affect the performance.
– Loses quality when scaled, rotated or transformed.

Freetype font
+ Freetype generates bitmap fonts on the fly.
– Too big size can lead to a crash and generating bitmap fonts takes some time on mobile devices.
– At the time of writing Freetype generates a single atlas page for each BitmapFont. Multiple texture atlases can affect the performance.
– Depending on how many TTF files you use, it can eat the free space on the device.
– Loses quality when scaled, rotated or transformed.

Distance Field Font
+ Only needs one bitmap font for all sizes.
+ Keeps quality when scaled, rotated or transformed.

I only implemented for GLES20 support. It is possible to support GLES10 as well, but the rendering wasn’t quite the same and you can’t adjust the smoothness. Also libgdx consider to drop GLES10 and judging from the comments the chances are high it will happen.

Check the wiki for the howto.
Want to read more stuff? Here is a paper.

Take a look at the screenshot to see the differences:
Distance Field Font

Posted in flixel-gdxLeave a comment