|Articles & Tutorials|
|Generating bitmap fonts|
|Monday, 21 May 2012 16:35|
Bitmap fonts, also known as raster fonts, stores each glyphs as a bitmap.
Bitmap fonts are often used in videogames as they are much faster to render. The downside is that you lose flexibility in scaling and manipulating text fields. For example, if you need the font in different dimensions, let's say 12 and 18, you'll need to include both set of characters in the bitmap font, increasing memory usage. Nevertheless, with the correct planning, using bitmap fonts surely pays off.
To generate a bitmap font, you can use Hiero, a free Java web app developer by Kevin James Glass. You can find it here: http://slick.cokeandcode.com/ . Download it from the right "Tool webstarts" menu.
Hiero runs on both Mac Os and Windows. Let's see how it works.
When opened, your system will prompt that the application is not signed. It's up to you whether to trust the author or refuse, but since he's well known around I think you can accept.
Here's how Hiero looks like:
You first need to select which font to use in the Font inspector. You can either select a system installed font or browse for a TrueType font file on your disk. Then, select font size and if you want it bold and/or italic or none of the two.
Hiero lets you specify which glyphs to include in your bitmap font in the Sample Text inspector. You can use the ASCII and NEHE buttons to select known set of characters, or specify your own set typing in the text area. File size will increase as you keep adding glyphs, so choose accurately.
In the Effects inspector you can add filters to the glyphs. By default you have Color, which specifies the color of your glyphs, but you can also add Shadows, Gradients and three different types of Outline. Then, you can modify each filter properties or remove them using the X button. Just note that resulting bitmap font may vary depending on effects order, so you may want to do some experimentations.
In the Padding section you can modify the padding of your bitmap font. You may want to use it if you've added several effects and glyphs overlap, or if your specific game engine has particular requirements, otherwise you can keep it as default.
Finally, you'll see the resulting bitmap font in the Rendering section. You can select the background color using the color picker. Switch to Glyph Cache to set your font properties. You may want to fit the entire font in one page, but at the same time keep dimension as low as possible, so choose width and height accordingly. Hit Reset cache to refresh the font if you change the glyphs set.
Each engine has its own restrictions and optimizations, so you may want to check requirement before exporting.
Now, it's time to save your bitmap font. Select File -> Save BMFont files (text)... and choose where to save your .fnt file, along with the related .png.
Sometimes the png files is saved in a odd way. For example, it may be flipped vertically. If that happens, simply open it in any image editor and fix it.
You can also save current setting in the File menu as a .hiero file and reload it later, if you want.