Bitmap Fonts

In this tutorial we will create_ a bitmap font system:

Previously, we rendered text using the DirectX Font class. While the Font class is an easy way to render text, it doesn’t have quite the performance that I would like and it is quite limited in the aesthetic quality of the fonts. As a result, I decided to implement a bitmap font system in the C-Unit Framework.

A letter printed with a bitmap font is simply a quad (two triangles) with the texture of a letter slapped onto it. To create_ our text, we will need a texture that contains all the characters that we will want to render. We will then assign each letter on the texture its own set of texture coordinates in order to access each letter and place them on their corresponding quads. Bitmap fonts usually come in two flavors: single-width fonts and multi-width fonts. Single-width fonts have each character evenly spaced on the texture. This allows us to calculate the texture coordinates in our program. While this is easier than multi-width fonts, it does not look as nice, since fonts that are not meant to be monospace, will be rendered in monospace. Multi-width fonts, on the other hand, are spaced differently according to letter. For example, an ‘i’ will take up less space than a ‘W’. In order to use multi-width fonts, we will need to create_ a texture that stores all the characters, and then create_ some sort of data sheet that provides all the dimensions of each character on the texture. Luckily, there are free programs to do this for us.

The C-Unit Framework creates bitmap fonts with the help of the Angelcode Bitmap Font Generator. The Angelcode Bitmap Font Generator is a nice tool that will arrange the characters of a font onto a texture and then create_ a data sheet that provides all the information we need to render the characters onto quads. The output looks like the following:

To store all this information, we’ll create_ a few small classes.

The BitmapCharacterSet class represents the entire BitmapCharacter alphabet. It contains the dimensions of the texture, the size the characters were created with, as well the line height, which we will use to determine the space between lines.

The BitmapCharacter class represents a single character. It contains all the information found in the generated .fnt file. To see what all these values represent, check out Angelcode’s page. They’re all just used to place and align the character in a rendered string.

The Kerning class stores any kerning information about a character. Kerning adjusts the distance between characters to make the text look more evenly spaced. For example, the letters “ll” would usually have a different kern amount than the letters “oo”. Not all fonts have kerning information but the C-Unit Framework supports kerning when that information is available.

The StringBlock class represents a single piece of text. Each of the colored sections of text in the screenshot above are separate StringBlocks. Each StringBlock can have its own color, size, bounding rectangle, alignment, and whether to use kerning.

To start implementing the bitmap font system, we’ll create_ a simple Quad class that will represent a polygon in screen space.

The Quad class is simple a wrapper for an array of TransformedColoredTextured vertices. It provides an easy way to create_ and manipulate a quad in screen space. The Quad class is a generic screen space quad that can be used to display 2D graphics (like my gui) or bitmapped text. The C-Unit bitmap font system requires a little more information with its Quads, so I created another class that inherits from Quad, called FontQuad:

The FontQuad class stores a few more pieces of information that we’ll use when we create_ the the bitmap font system. For example, we’ll use the LineNumber and WordWidth properties when justifying text. Also, since the texture will print fonts at a preset size, the SizeScale property will allow us to scale the character to achieve any size we want. The class that performs all these calculations is BitmapFont:

The BitmapFont class performs all the necessary initializations and calculations to print bitmap fonts. Since BitmapFont contains both a dynamic VertexBuffer and a Texture, we can see the normal resource On*Device methods. Initializing BitmapFont is as easy as calling the constructor with the name of the fnt file and the image generated by the Angelcode Bitmap Font Generator. The constructor calls ParseFNTFile which performs some basic text file I/O to store all the information into Lists of the data storage class described earlier.

The AddString, ClearString, and ClearStrings methods simply add or clear strings from the BitmapFont’s list of StringBlocks to render. The AddString method returns the index of the generated StringBlock, which you can use to either delete the StringBlock later with the ClearString method or get the List of raw FontQuads generated by GetProcessedQuads for use in a different Vertex Buffer.

The GetProcessedQuads method is the main method of BitmapFont. It performs all the calculations required to create_ and align each character of a StringBlock. The calcaulations are a bit long and took some pen and paper work so it’s probably best to look through the code yourself to understand it. Here is a list of items that we have to consider in the calculations:

• Text is generated character by character. When a character extends past the left or right edge of the bounding rectangle, we have to move all the characters of that same word to the next line.
• When text is center-aligned, whenever we add a new character, we have to recenter the text on the current line. When this line extends past the width of the bounding rectangle, we have to move the last word onto a new line, center the new line, and recenter the previous line from which the word was removed.
• When text is right-aligned, we add new characters on the right edge of the current line and then shift all the characters of this line to the left. When we have to create_ a new line, we move the last word to the new line, right-justify the new line, and rejustify the previous line from which the word was removed.
• Whenever a letter extends passed the bottom of the bounding rectangle, stop building the quads. If you see text being cut off, this is probably the reason why. Just extend the height of the bounding rectangle.
• In order to support arbitrary sizes, we create_ a size scale by dividing the desired rendering size by the size at which the text was generated in the texture. We then multiply all the placement values of BitmapCharacter by this size scale.
• When kerning should be used, look up the kerning information for the current character and adjust the cursor position.

When we render all the text, we first have to set a few renderstates in order for the text to appear correctly. Since we don’t want the text to have any Z-depth information, we disable RenderStates.ZEnable and RenderStates.ZBufferWriteEnable. We also want to make sure we render the text in FillMode.Solid. The alpha blending renderstates are used to render only the textured letter and not its background. The SamplerStates just improve the visual quality of the text when we scale it to new sizes. Note that since we are changing all these RenderStates, we have to change them back in our program to make sure any geometry that we render there is rendered correctly. We’ll usually want to reenable RenderStates.ZEnable and RenderStates.ZBufferWriteEnable and if we’re not using alpha transparency, disable RenderStates.AlphaBlendEnable.

That’s pretty much all there is to using BitmapFont. Some notes in using BitmapFont: Whenever you want to update_ text, clear all the strings with ClearStrings before adding new text or else the new text will just be appended to the list of text to render. Also, you may have noticed the following line of code in the tutorials:

Since the fps only updates every half second, there’s no point in building all the text every frame. We increase performance by only building the text when it changes.

Some notes on the Angelcode Bitmap Font Generator: I noticed I got better results by adding about 2 pixels of padding and 1 pixel of spacing around each character. Without these space buffers, I was seeing some distortion in scaled text. Also, the BitmapFont class only supports fonts where all the characters are on 1 page, so make sure you keep the text on one texture by either reducing the font size or increasing the dimensions of the texture. And finally, make sure you select “Bit depth 32″ in order to have an alpha channel, which is necessary to render the fonts properly.