Virtual Realm

XNA - Displaying Centred Text

Wednesday, November 28 2007 - tutorial, xna-2-0, game-studio

Going through the forums today I can across a post where a user was asking about displaying text on the screen so that it was centred.

Here is a couple of quick lines of code that will allow you to display some text on the screen that is centred. When using this sample it will calculate the length of the text, then work out the exact centre of the screen. Then using the normal sprite origin functions it will work out the exact centre of the text and position it on the screen.

To add a little bit of flare to it I have also set up the sample so that it will also draw a shadow on the text.

To start with create a new windows game project (Note that this will also work with an Xbox 360 project). Next we need to add a sprite font to the application, with out this we are not going to be able to draw the text.

At the top of the application add the following to the code,

[code language="C#"]

SpriteFont gameFont;

[/code] 

Now add the sprite font object to the content pipeline, go to the solution explorer and right click on the "content" item. When there select a new folder and change this folders name to "Fonts". Once done right click on the "Fonts" folder and select ad new item, this time select sprite font and call it "GameFont.spriteFont".

When you do add the font you are going to have to edit the xml file and set the fonts name. Change the Fonts name inside the spritefont file to look like the line below.

[code language="C#"]

<FontName>Lucida Console</FontName> 

[/code]

With the Font set up we now need to load it. Inside your main application, add the following line of code to the LoadContent Call.

[code language="C#"]

// TODO: use this.Content to load your game content here
this.gameFont = Content.Load<SpriteFont>(@"Fonts\GameFont"); 

[/code] 

The last stage is to change your Draw call to look like the following.

[code language="C#"]

        /// <summary>
        /// This is called when the game should draw itself.
        /// </summary>
        /// <param name="gameTime">Provides a snapshot of timing values.</param>
        protected override void Draw(GameTime gameTime)
        {
            graphics.GraphicsDevice.Clear(Color.CornflowerBlue);

            // TODO: Add your drawing code here
            string PressStartString = "Centered Text";
            Vector2 PressStartSize = gameFont.MeasureString(PressStartString);

            this.spriteBatch.Begin(SpriteBlendMode.AlphaBlend);

            this.spriteBatch.DrawString(this.gameFont,
                PressStartString,
                new Vector2((this.graphics.GraphicsDevice.Viewport.Width / 2) + 2, (this.graphics.GraphicsDevice.Viewport.Height / 2) + 2),
                Color.Black, 0.0f,
                new Vector2(PressStartSize.X / 2, PressStartSize.Y / 2),
                1.0f, SpriteEffects.None, 0.0f);

            this.spriteBatch.DrawString(this.gameFont,
                PressStartString,
                new Vector2(this.graphics.GraphicsDevice.Viewport.Width / 2, this.graphics.GraphicsDevice.Viewport.Height / 2),
                Color.White, 0.0f,
                new Vector2(PressStartSize.X / 2, PressStartSize.Y / 2),
                1.0f, SpriteEffects.None, 0.0f);

            this.spriteBatch.End();

            base.Draw(gameTime);
        }
 

[/code] 

In the above code the first thing that we do is clear the screen so that it is ready for us to draw. Next we define the string of text that we wish to display. On the next line we measure the text so that we know how many pixels the total string will be using.

With the next section of code we are actually drawing it onto the screen. We use the Graphics Devices View port to decide where the centre of the screen is, and then set the sprites origin to the centre of the sprites texture. Doing this will allow us to position the text at the exact centre of the screen.

I do hope that this helps someone, but in any case this is based on a similar function that I use in several of my applications.

I did create this sample using the XNA 2.0 system and Game Studio, but the process will work in the XNA 1.0 Refresh system.