Export (0) Print
Expand All

How To: Draw Text

This article demonstrates how to import a SpriteFont into a project and draw text using DrawString.
Bb447673.note(en-US,XNAGameStudio.20).gifNote
As with most types of software, font files are licensed rather than sold. Font licenses vary from vendor to vendor, but most do not allow redistribution of the fonts, and that includes redistribution of reproductions such as bitmaps containing the rasterized character set. This is even true of many of the licenses covering fonts that Microsoft supplies with applications and the Windows operating systems. Be careful, therefore, to ensure that you have the required license rights to redistribute any font you include as a bitmap containing the rasterized character set in your game!
Bb447673.note(en-US,XNAGameStudio.20).gifNote
Some redistributable fonts are available at the XNA Creators Club Online. Click here for more information.

The Complete Sample

The code in this tutorial illustrates the technique described in the text. A complete code sample for this tutorial is available for you to download, including full source code and any additional supporting files required by the sample.

To Add a Sprite Font

  1. Right-click your Content project in Solution Explorer, click Add, and then click New Item. Choose Sprite Font from the Add New Item dialog box. You may find it convenient at this point to change the name of the new file from "SpriteFont1" to the friendly name of the font you intend to load (leaving the file extension as ".spritefont"). The friendly name is the name that identifies the font once it is installed on your computer. For example, "Courier New" or "Times New Roman."
  2. XNA Game Studio creates a new .spritefont file for your font and opens it.
  3. If you did not name the new file with the font's friendly name, you now need to type the friendly name of the font to load into the FontName element. Again, this is not the name of a font file, but rather the name that identifies the font once it is installed on your computer. You can use the Fonts folder in the Control Panel to see the names of fonts installed on your system, and to install new ones as well. The Content Pipeline supports the same fonts as the System.Drawing.Font class, including TrueType fonts but not bitmap (.fon) fonts. You may find it convenient to save the new .spritefont file using this friendly name.
  4. If necessary, change the Size entry to the point size you desire for your font.
  5. If necessary, change the Style entry to the style of font to import. You can specify Regular, Bold, Italic, or Bold, Italic. The Style entry is case sensitive.
  6. Specify the character regions to import for this font. Character regions specify which characters in the font are rendered by the SpriteFont. You can specify the start and end of the region by using the characters themselves, or by using their decimal values with a &# prefix. The default character region includes all the characters between the space and tilde characters, inclusive.

To Draw Text on Screen

  1. Add a Sprite Font to your project as described above.
  2. Create a SpriteFont object to encapsulate the imported font.
  3. Create a SpriteBatch object for drawing the font onscreen.
  4. In your LoadContent method, call ContentManager.Load, specifying the SpriteFont class and the asset name of the imported font.
  5. Create your SpriteBatch object, passing the current GraphicsDevice.

    SpriteFont Font1;
    Vector2 FontPos;
    protected override void LoadContent()
    {
        // Create a new SpriteBatch, which can be used to draw textures.
        spriteBatch = new SpriteBatch(GraphicsDevice);
        Font1 = Content.Load<SpriteFont>("Courier New");
    
        // TODO: Load your game content here            
        FontPos = new Vector2(graphics.GraphicsDevice.Viewport.Width / 2,
            graphics.GraphicsDevice.Viewport.Height / 2);
    }
    
  6. In your Draw method, call Begin on the SpriteBatch object. If you select your own SpriteBlendMode, SpriteBlendMode.AlphaBlend is recommended.
  7. If necessary, determine the origin of your text. If you want to draw your text centered on a point, you can find the center of the text by calling MeasureString and dividing the returned vector by 2.
  8. Call DrawString to draw your output text, specifying the SpriteFont object for the font you want to use. All other parameters of DrawString produce the same effects as a call to SpriteBatch.Draw.
  9. When you have drawn all your text, call SpriteBatch.End.

    protected override void Draw(GameTime gameTime)
    {
        GraphicsDevice.Clear(Color.CornflowerBlue);
    
        spriteBatch.Begin();
        
        // Draw Hello World
        string output = "Hello World";
        
        // Find the center of the string
        Vector2 FontOrigin = Font1.MeasureString( output ) / 2;
        // Draw the string
        spriteBatch.DrawString( Font1, output, FontPos, Color.LightGreen, 
            0, FontOrigin, 1.0f, SpriteEffects.None, 0.5f );
        
        spriteBatch.End();
        base.Draw( gameTime );
    }
    

Community Additions

ADD
Show:
© 2015 Microsoft