- Creating the Font Demo Project
- Adding a New Font to the Content Project
- Learning to Use the SpriteFont Class
- Printing Text
- Summary
- Q&A
- Workshop
Adding a New Font to the Content Project
At this point, you can go ahead and run the project by pressing F5, but all you will see in the Windows Phone emulator is a blue screen. That is because we haven’t written any code yet to draw anything. Before we can print text on the screen, we have to create a font, which is added to the Content project.
In XNA 4.0, most game assets are added to the Content project within the Solution, where they are compiled or converted into a format that XNA uses. We might use the general term “project” when referring to a Windows Phone game developed with XNA, but there might be more than one project in the Solution. The “main project” will be the one containing source code for a game. Some assets, however, might be located just within the source code project, depending on how the code accesses those assets. Think of the Content project as a container for “managed” assets.
In this example, both the Solution and the main project are called “Font Demo,” because Visual Studio uses the same name for both when a new Solution is generated. Now, let’s add a new font to the Content project. Remember that the Content project is where all game assets are located.
Select the Content project in Solution Explorer to highlight it, as shown in Figure 3.3.
Figure 3.3 Highlighting the Content project.
- Open the Project menu and choose Add New Item. Optionally, you can right-click the Content project in Solution Explorer (Font DemoContent (Content)) to bring up the context menu, and choose Add, New Item.
- The Add New Item dialog, shown in Figure 3.4, appears. Choose Sprite Font from the list. Leave the name as is (SpriteFont1.spritefont).
Figure 3.4 Adding a new Sprite Font.
A new .spritefont file has been added to the Content project, as shown in Figure 3.5. Visual Studio opens the new file right away so that you can make any changes you want to the font details. The default font name is Segoe UI Mono, which is a monospaced font. This means each character of the font has the same width (takes up the same amount of horizontal space). Some fonts are proportional, which means each character has a different width (in which case, “W” and “I” are spaced quite differently, for instance).
Figure 3.5 A new Sprite Font has been added to the Content project.
The SpriteFont1.spritefont file is just a text file, like a .CS source code file, but it is formatted in the XML (Extensible Markup Language) format. You can experiment with the font options in the .spritefont descriptor file, but usually the only fields you will need to change are FontName and Size. Here is what the font file looks like with all comments removed:
<?xml version="1.0" encoding="utf-8"?>
<XnaContent xmlns:Graphics =
"Microsoft.Xna.Framework.Content.Pipeline.Graphics">
<Asset Type="Graphics:FontDescription">
<FontName>Segoe UI Mono</FontName>
<Size>14</Size>
<Spacing>0</Spacing>
<UseKerning>true</UseKerning>
<Style>Regular</Style>
<CharacterRegions>
<CharacterRegion>
<Start> </Start>
<End>~</End>
</CharacterRegion>
</CharacterRegions>
</Asset>
</XnaContent>
Table 3.1 shows the royalty-free fonts included with XNA 4.0. Note that some fonts come with italic and bold versions even though the SpriteFont description also allows for these modifiers.
Table 3.1 XNA Fonts
Font Name |
Font Name |
Font Name |
Andy Bold |
Jing Jing |
Kootenay |
Lindsey |
Miramonte |
Miramonte Bold |
Moire Bold |
Moire ExtraBold |
Moire Light |
Moire Regular |
Motorwerk |
News Gothic |
News Gothic Bold |
OCR A Extended |
Pericles |
Pericles Light |
Pescadero |
Pescadero Bold |
Quartz MS |
Segoe Keycaps |
Segoe Print |
Segoe Print Bold |
Segoe UI Mono |
Segoe UI Mono Bold |
Wasco Sans |
Wasco Sans Bold |
Wasco Sans Bold Italic |
Wasco Sans Italic |