In many games, there are times where we want to draw text on the screen, along with other image sprites, or 3D stuff.
The XNA framework has made it very easy to do this with a class they call the SpriteFont class, coupled with the SpriteBatch class that we saw in the previous tutorial. In this tutorial, we will make a game that draws some text on the screen.
After that we will take a look at an intuitive extension to that idea: drawing the value of a variable, like a score, to the screen.
On a computer, fonts are generally defined mathematically, as opposed to being rendered as an image. This allows you to change the point size of text, and not have it become pixelated. This type of graphics is called vector graphics because everything is defined in terms of vectors. However, this is bad for game programming. Since speed is almost always an issue, we want to be able to quickly draw our text, rather than having to spend vast amounts of computation cycles to determine what pixels should be lit up.
In XNA, we will work with a thing called sprite fonts. A sprite font takes a normal, vector-based font and turns it into a bitmapped font that can be drawn quickly. The XNA people have made this very easy to do.
When you start selecting fonts to use, it is important to pay careful attention to copyrights and licensing. For many of the fonts that come with your computer, you may not have the rights to put them into a game and sell it commercially.
To resolve this problem, it becomes very important to take note of which fonts we can use, and which ones we can’t. Microsoft has provided eight fonts that are available for whatever you want, at http://go.microsoft.com/fwlink/?LinkId=104778&clcid=0x409. You can download the .zip file there and use the fonts within. Follow the directions contained in the HTML file included in the ZIP archive to install the fonts.
A second possibility is to find other fonts that are free online. For example, http://www.dafont.com has lots of fonts available for download, and they indicate which ones are free for any use, and which aren’t. I’ve used this site numerous times before, and it seems very nice. There are lots of other font sites out there as well that can be found with a simple Internet search.
For this tutorial, I’m going to use one of the fonts included in the distributable fonts given by Microsoft called Kootenay, though you could use a different font if you wish.
So now that we’ve found the font that we want to use, let’s see how to use it to draw text. We’re going to use it to draw a score for our game. As usual, I’m going to start with a completely new project from the template. The first thing we need to do is include the font in our content. We’re going to do this in a way that is a little different from what we are used to doing.
To deal with the fact that fonts are vector-based, but we want to be able to skip all of the math required to draw them, we will have XNA take a description of what font we use (the font name, point size, etc.) and convert it to an image, which will become our sprite font.
Right-click on your content project in the Solution Explorer. Select Add > New Item from the menu that comes up. Select the SpriteFont template and give it a name, as shown in the image below. I’ve called mine Score.spritefont.
This adds a new sprite font to our content and should open up a new file in our editor. The new file is an XML file. You can specify the exact font you want by simply changing a few values in the file.
Down at about line 14 you will see the following:
<FontName>Segoe UI Mono</FontName>
This says the name of the font that we want to use. Segoe UI Mono is a Vista/Windows 7 font that is used for tons of Microsoft’s programs. (You may get something different if you are using Windows XP, and you may also get something different if you called your sprite font file “Arial.spritefont”.
I’ve never seen the licensing for Segoe UI, so there are no guarantees that you can actually use it, though it is probably likely that you could. If you want to use a different font, just replace this name with the name of the font that you want to use. You can use any font that you have installed on your computer. (Fonts can be installed by dragging the font file to your Fonts folder, which is located in C:/Windows/Fonts, or something similar.)
I want to use Kootenay, so I’m going to change my file to say the following instead:
<FontName>Kootenay</FontName>
When you build your project, the content pipeline will create a sprite font image out of the font, so you don’t need to have end users install any fonts.
Also look down at line 20, where it says:
<Size>14</Size>
This indicates the font size that we want. I want mine to be a bit bigger, so I’m going to change it to 24.
There are a couple of other values that we could change in this file as well, but I’ll let you look at those on your own. The comments in the XML file are pretty descriptive.
Now that we’ve got a sprite font in our content, let’s go ahead and use it. Go to the top of your class and add the following two variables as instance variables to the class:
private SpriteFont font;
private int score = 0;
This first variable will store our font for drawing.
The second variable, score will give us a value to draw to the screen.
Now let’s load the font by adding the following line of code to the LoadContent() method:
font = Content.Load<SpriteFont>("Score"); // Use the name of your sprite font file here instead of 'Score'.
Now let’s actually use the sprite font to draw.
Let’s go down to the Draw() method and add the following code:
spriteBatch.Begin();
spriteBatch.DrawString(font, "Score", new Vector2(100, 100), Color.Black);
spriteBatch.End();
If you already have a spriteBatch.Begin() .. spriteBatch.End() block (from a previous tutorial or something), you can just add the middle line to the body of it instead.
The only really new piece of information here is the middle line of code.
We use the spriteBatch.DrawString() method, which allows us to draw text.
The first parameter that we have is the sprite font that we want to use.
We’re just going to use our font object.
The next parameter is the text to display.
We want to draw the word "Score", so that is what we put in.
The third parameter is the location on the screen that we want the text drawn at.
The fourth and final parameter is the color of the text.
I’ve chosen to draw the text in black.
We can now run our program and see our text being drawn. It should look like the screen capture below:
This is a great first step, but let’s also draw the current score of our game.
Remember that we defined a score variable earlier.
In the Update() function, let’s let the score change, by adding the following line of code there:
score++;
Now let’s replace our original spriteBatch.DrawString() line with the following:
spriteBatch.DrawString(font, "Score: " + score, new Vector2(100, 100), Color.Black);
I’ve changed the text that is displayed to be the word "Score: " followed by whatever is in the score variable.
Notice that I’m using the + operator on a string and an int.
C# is smart enough to realize that in this instance, since the first part was a string, that it should take the int and convert it to a string before appending them together.
If we run this now, we will be able to see our actual score being displayed, like below.
