XNA: Drawing Text

This page is going to thoroughly explain how to draw text onto the screen using the XNA Font Class. We will be using a new Windows Game project without any other modifications so that it is easier to see the changes that we make. The eventual aim of the tutorial is to display "Hello World" onto the screen using the default system font Arial in a regular size.

Configuring the Font

The font configuration is stored using Extensible Markup Language (XML) files. We firstly need to create this file, before we begin writing code to initialize it. To do this, right click on your project name in the solution explorer window and scroll down to the "Add" sub-menu. From this menu select "New Item" and a new window will open with the available options for new content. Select "Sprite Font" and name it "Arial.spritefont" and click "Add". The following lists the main XML tags we should be interested in this file:

<!--
The name of a system font, capitalisation
is not required but is recommended.
-->
<FontName>Arial</FontName>
 
<!--
The size of the rendered text
using the point-size system
-->
<Size>14</Size>
 
<!--
Number of pixels between each character
when the text is rendered on the screen
-->
<Spacing>2</Spacing>
 
<!--
A style, allowed options include:
"Regular", "Italic" and "Bold"
-->
<Style>Regular</Style>
 
<!--
Characters to be loaded and can
be used within the text
-->
<CharacterRegions>
   <CharacterRegion>
      <Start>&#32;</Start>
      <End>&#126;</End>
   </CharacterRegion>
</CharacterRegions>

The character regions indicate what characters can be used from the font. Some fonts are customarily made based on pure text and may not include placeholders for the numbers and special characters, so we can the character regions to restrict the use of them. The better idea behind them is so that only the characters we intend to use are loaded into memory, the rest are discarded.

Initializing Variables

We need two variables to allow use to draw text onto the screen. Add the indicated lines of code towards the top of your application where the default variables have already been declared for you. The code you need to be editing will be inside the Game1.cs file.

public class Game1 : Microsoft.Xna.Framework.Game
{
    // Default variables
    GraphicsDeviceManager graphics;
    ContentManager content;
 
    // Text management
    SpriteFont spFont;
    SpriteBatch spBatch;

As well as declaring these, we actually need to initialize the instances themselves. This code is placed further down the file at the function named LoadGraphicsContent and it creates instances of the objects.

protected override void LoadGraphicsContent(bool loadAllContent) 
{
    if (loadAllContent)
    {
        // Create instances of the sprite font and batch
        spFont = content.Load<SpriteFont>(@"Arial");
        spBatch = new SpriteBatch(graphics.GraphicsDevice);

Drawing Text

There are a number of different ways of drawing the text differently; such as rotations and visual effects. However, to save time I'm merely going to post the tutorials method here, which simply shows text using a specific colour at a specific point.

protected override void Draw(GameTime gameTime)
{
    // Clear the screen for a new drawing
    graphics.GraphicsDevice.Clear(Color.CornflowerBlue);
 
    // Draw out the text on screen
    spBatch.Begin();
    spBatch.DrawString(spFont, "Hello World", new Vector2(50.0f, 50.0f), Color.Red);
    spBatch.End();