How to: Draw Text
This article demonstrates how to import a SpriteFont into a project and draw text using DrawString.
Note
As with most types of software, font files are licensed rather than sold. Font licenses vary from vendor to vendor, but most don't 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 Windows. 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!
To import a SpriteFont
- Right-click your project in Solution Explorer, click Add, and then click New Item. Choose Sprite Font from the Add New Item dialog box.
- XNA Game Studio Express creates a new .spritefont file for your font and opens it.
- Change the FontName entry to the friendly name of the font to load. 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.
- If necessary, change the Size entry to the point size you desire for your font.
- If necessary, change the Spacing entry to the number of pixels to add between each character in your font, when the font is drawn. This can be changed at run time using the Spacing property.
- 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.
- 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
Add a Sprite Font to your project as described above.
Create a SpriteFont object to encapsulate the imported font.
Create a SpriteBatch object for drawing the font onscreen.
In your LoadGraphicsContent method, call ContentManager.Load, specifying the SpriteFont class and the asset name of the imported font.
Create your SpriteBatch object, passing the current GraphicsDevice.
SpriteBatch ForegroundBatch;
SpriteFont CourierNew; protected override void LoadGraphicsContent( bool loadAllContent ) { if (loadAllContent) { CourierNew = content.Load<SpriteFont>( "Courier New" ); ForegroundBatch = new SpriteBatch( graphics.GraphicsDevice ); } }
In your Draw method, call Begin on the SpriteBatch object. If you select your own SpriteBlendMode, SpriteBlendMode.AlphaBlend is recommended.
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.
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.
When you have drawn all your text, call SpriteBatch.End.
protected override void Draw( GameTime gameTime )
{ graphics.GraphicsDevice.Clear( Color.CornflowerBlue );
ForegroundBatch.Begin();
// Draw Hello World
string output = "Hello World";
// Find the center of the string
Vector2 FontOrigin = CourierNew.MeasureString( output ) / 2;
// Draw the string
ForegroundBatch.DrawString( CourierNew, output, FontPos, Color.LightGreen,
FontRotation, FontOrigin, 1.0f, SpriteEffects.None, 0.5f );
...
ForegroundBatch.End();
base.Draw( gameTime );
}
The Complete Example
using System;
using System.Collections.Generic;
using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Audio;
using Microsoft.Xna.Framework.Content;
using Microsoft.Xna.Framework.Graphics;
using Microsoft.Xna.Framework.Input;
using Microsoft.Xna.Framework.Storage;
public class Game1 : Microsoft.Xna.Framework.Game
{
GraphicsDeviceManager graphics;
ContentManager content;
public Game1()
{
graphics = new GraphicsDeviceManager( this );
content = new ContentManager( Services );
}
protected override void Initialize()
{
base.Initialize();
}
SpriteBatch ForegroundBatch;
SpriteFont CourierNew;
Vector2 FontPos;
float FontRotation;
protected override void LoadGraphicsContent( bool loadAllContent )
{
if (loadAllContent)
{
CourierNew = content.Load<SpriteFont>( "Courier New" );
ForegroundBatch = new SpriteBatch( graphics.GraphicsDevice );
}
FontPos = new Vector2( graphics.GraphicsDevice.Viewport.Width / 2,
graphics.GraphicsDevice.Viewport.Height/2);
FontRotation = 0;
}
protected override void UnloadGraphicsContent( bool unloadAllContent )
{
if (unloadAllContent)
{
content.Unload();
}
}
protected override void Update( GameTime gameTime )
{
base.Update( gameTime );
}
protected override void Draw( GameTime gameTime )
{
graphics.GraphicsDevice.Clear( Color.CornflowerBlue );
ForegroundBatch.Begin();
// Draw Hello World
string output = "Hello World";
// Find the center of the string
Vector2 FontOrigin = CourierNew.MeasureString( output ) / 2;
// Draw the string
ForegroundBatch.DrawString( CourierNew, output, FontPos, Color.LightGreen,
FontRotation, FontOrigin, 1.0f, SpriteEffects.None, 0.5f );
//Note: Change "CourierNew" to "current" above to enable switching
// Draw instructions
Vector2 guidepos = new Vector2( 50, FontPos.Y + 100 );
string guide = "Right Thumbstick: Rotate\nA, B, X Buttons: Change Font";
ForegroundBatch.DrawString( CourierNew, guide, guidepos, Color.Black );
ForegroundBatch.End();
base.Draw( gameTime );
}
}