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.
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
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, which you can test at http://impactjs.com/font-tool/.
Figure 5-3. Impact’s online font sprite sheet generation tool.
This tool allows you to select one of your system ...