In many games, there are times where we want to draw text on the screen, along with other image sprites, or 3D stuff. MonoGame lets you draw text using 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 pixellated. 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 MonoGame, 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 content pipeline makes 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 it 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 here 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.
Making a SpriteFont
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. Like 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 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 lots of detailed vectors, we will have the content pipeline take a description of what font we use (the font name, point size, etc.) and convert it to an image, which will become our SpriteFont.
Like we've done with content before, the first step is to open MonoGame's Pipeline Tool, which can be done by:
1. Open up your game's Content folder and locate Content.mgcb.
2. Right-click and choose Open With…
3. Find MonoGame Pipeline Tool and select it.
4. Optionally, hit the Set as Default button if you want to be able to just double-click on the item in the future.
5. Hit OK to open the file.
This will open the MonoGame Pipeline Tool, shown below.
Unlike earlier, when we added images, this time, you'll want to add a new item, rather than an existing one.
Right-click on the Content node in the tree on the left (or add a directory under it, where you want to place your new font).
This will open up the New Item dialog. (Note that there is a button in the toolbar that does this as well.)
In here, choose SpriteFont Description from the list, and give it a name at the bottom. I've called mine "Score". When you're done, hit the Ok button.
Once you've done this, you'll see your sprite font now shows up in your content tree on the left side.
The Pipeline Tool doesn't have an obvious way of editing this file, but it is a simple XML file, which can be edited with your favorite text editor. (You can see in the picture that I've got Notepad++ set up as my default editor for that.)
You will have to edit the file if you want to change the font, the size, or any of a number of other properties that it contains. It's worth a peek in there to see what it has, so go ahead and open it up.
Down at about line 14 you will see the following:
This says the name of the font that we want to use. Arial is the default for MonoGame, primarily because it has a very permissive license and is found on virtually all platforms everywhere.
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:
When you build your project, the content pipeline will create a spritefont 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:
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.
Using the SpriteFont
Now that we've got a SpriteFont 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 SpriteFont 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 SpriteFont 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 a 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:
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.
We have now seen how we can draw text in our game, which has many applications. From here, we can go learn more about some advanced features of sprite drawing, like rotating sprites, texture atlases, or simple 2D particle engines. Each of these are discussed in other tutorials.
|Having problems with this tutorial? Try the troubleshooting page!|