Bitmap Font: How to create one by yourself?

So what is a bitmap font?

Simple bitmap font image

Simple font image

Every game developer has face it during the development: Display a text in the game to show damages or a conversation between two characters. For performance reason, standard fonts (understand TTF ) are not used directly. The preferred way is to use a bitmap font: it is a big image containing all characters used to display a text for a predefined size. The image (a png  file) is linked with a text file with the extension fnt  describing where each character is located in the image and give all necessary information to display the text. (base height, interline, …).

There are many tools to generate both image and description file used by the bitmap font from a standard font (The free java tool Hiero, the awesome paid tool bmGlyph, the online tool BitFontMaker 2 …) but as me, you may want to produce your image and create your own font by yourself.

So first, you need your image with all characters you need for your text. I personally need at least numbers (0-9), letters with upper (A-Z) ans lower case (a-z) and a set of special characters: .,+-?!:/

Every character in the image will have their location identified in the fnt  file. So my first advice will be to keep some extra space between characters to allow you to modify it without moving other characters. Otherwise you will have to update all locations for all characters moved.

The second advice for your bitmap is to use black and white color in order to add some color at runtime. But you can also add directly colors and fancy effects directly in the image file and use it as is.

Now that you have your image. It is time to create the  fnt  file. It is described here. Indeed it is more simple as it may appeared.

The first lines give general rules for the font.

The parameters that matters are lineHeight  and base . You can keep the other parameters as me with to have a default behaviour. You should specify the image file use with the parameter file .

Now you should add one line per character. You can add comment using # .

The id  match the unicode value of the character. An easy way to find the unicode for a character is to convert in java or scala the character as an int  and print this integer on console.

Parameters  x  and y  give the location on the bitmap. Notice that the top left corner is (0,0) .

Parameters width  and height  will tell which part of the image should be considered to extract the image for the character. If the height is inferior to the baseline, you will need to set yoffset  to realign the character with the base line.

The parameter yoffset  could also be used for letters like ‘g’ or ‘p’ where the alignment is not on the bottom of the glyph.

Finally, the operator xadvance  should be set to the width value.

I will encourage you to test your font with a simple program to see how it is rendered and fix it. You can use a simple class i have committed in my open source game framework: Check BMFontViewer.

Finally, if you like it, you can use my bitmap font (Check this image and this font file).