O'Reilly logo

Building HTML5 Games with ImpactJS by Jesse Freeman

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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.

Impact’s default font sprite sheet.

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.

Notice the black lines under each character.

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/.

Impact’s online font sprite sheet generation tool.

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

This tool allows you to select one of your system ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required