Bitmap fonts in Flixel

I thought that bitmap fonts were like the ones that you install in your OS, not the true-type ones. I was a little surprised to find out that it was essentially a sprite-sheet. Pleasantly surprised that is. Artists can work on a font and leave it in the picture format. I can look at the sheet and get a good feel for how things are going to look. It removes some of the complexity that exists around fonts.

You may have read my recent article on animated sprites and Flixel, where I started playing with the library. I have been playing with this library as apposed to FlashPunk, which many seem to enjoy more. I like how Flixel does things and will take a look at FlashPunk in the future. For now however, this is how Flixel does bitmap fonts.

It is important to note that this example is not pure Flixel, it has been extended with Flixel Power Tools. At the bottom of the previous link you will find a very nice example of what Flixel Power Tools can do. It has a very nostalgic feeling to it. Anyways onto the code.

Using the above image and the Flixel Power Tools extension to Flixel, you can get this result

all with just this code.

font = new FlxBitmapFont(
	godFont, 16, 16, 
	FlxBitmapFont.TEXT_SET10 +".?0123456789", // TEXT_SET10 is the characters [A-Z]
	20, 0, 0);
font.setText(
	"using bitmap fonts\nin flixel is\nas easy as?. 123", 
	true, 0, 8, 
	FlxBitmapFont.ALIGN_CENTER, false);
FlxDisplay.screenCenter(font); // center width

add(font);
// to modify text past this point
// i used font.text = "new" to set the text

Essentially you are just linking characters to the locations in the sprite and then displaying text becomes very simple. I assume the characters are just evaluated to the index in the sprite sheet and viola. It seems very fast and it also takes away a lot of the grunt work involved. Visit the documentation on FlxBitmapFont if you want to know more.