Building HTML5 Games with ImpactJS

Chapter 5. Working With Text

It is relatively easy to work with text in Impact. If you remember back to our default main class, we had removed an instance of font class from the game—but in this section, we are going to talk about adding it back in and how to customize text at runtime.

Creating Font Sprite Sheets

Since Impact renders all the graphics to the page’s Canvas tag, we will not be able to use system fonts. Instead, Impact uses a special sprite sheet for each font. Figure 5-1 is an example of the default font 04b03.font.png, which comes with the template project.

Figure 5-1. Impact’s default font sprite sheet.

As you can see, all the font’s characters are laid out horizontally with one pixel line under each character, which defines the width of that character. Figure 5-2 is a close-up of a few characters from the sprite sheet.

Figure 5-2. Notice the black lines under each character.

All fonts you want to use in Impact must be set up in a similar way. Luckily, there is an online tool to help generate new font sprite sheets.

Figure 5-3. Impact’s online font sprite sheet generation tool.

This tool allows you to select one of your system fonts and tweak its style, size, and thickness then ...