MonoGame – Putting Text Onscreen With SpriteFonts
In MonoGame, text is displayed on the screen in much the same way as sprites, or 2D images. The difference is in how you prepare the font and how you work with it.
To display text onscreen, you can create your own images of words, letters and numbers, and display them just like regular sprites, but this is incredibly time consuming and not very flexible, so instead we use a SpriteFont, which is a bitmap containing all the characters in a given font, pre-rendered at a specific size. Think of it as a SpriteSheet, only for letters, numbers and symbols, and you won’t be far off.
Creating the SpriteFont
In your Solution Explorer (below), double-click the Content.mgcb icon. (You may have to associate it with a program. If so, select MonoGame Content Builder.)
Once you have the MG Content Builder open, click the Add New Item button (below) and then select SpriteFont Description and enter a name for your SpriteFont.
This will create an XML file which you will need to add to your project, but first, let’s take a look inside:
You can open up your copy by right-clicking the file and selecting Open File. If you open it in notepad, it’s a bit of a mess, so I recommend using Notepad++ or Visual Studio so you can really see what’s going on.
For now, just focus on a couple of key areas… FontName and Size. You’ll notice it’s currently set to Arial and 12, respectively.
Just for fun, change it to “Verdana” and “36”, and then save the file.
Go back to the ContentBuilder, and hit the F6 key to build your SpriteFont. This is where the MonoGame Content Pipeline reads in your XML file, looks up the specified font on your system, and generates a spritesheet containing images of all of the characters in your font, at the specified size.
Assuming you didn’t introduce any typos, you’ll get a message saying the build was successful.
Go back to Visual Studio, and right click on the Content folder again and select Add –> Existing Item.
You’ll probably have to change the file filter to “All Files (*.*)” in order to see your SpriteFont file, so once you find it (in the Content folder), select it and add it to your project.
Now to just add a couple of lines of code, and we’re all set.
Displaying the SpriteFont
At the class level, in your Game1.cs file, right after the redMushroom variable, add this:
(If you didn’t follow the previous post, just add it right before the constructor.)
And in the LoadContent() method , add this right after the redMushroom line:
verdana36 = Content.Load<SpriteFont>("demo");
(Again, if you jumped in here, just put it at the end of the LoadContent() method, before the closing curly brace.)
I called mine demo.spritefont, but you DON’T put the extension in here or it will throw an error. If you named yours something different, be sure to change it.
Finally, inside the Draw() method, put this line in between the spriteBatch.Begin() and .End() methods:
spriteBatch.DrawString(verdana36, "I PUT TEXT ONSCREEN", new Vector2(0, 200), Color.White);
And if you didn’t follow from the previous post, add these lines instead:
spriteBatch.DrawString(verdana36, "I PUT TEXT ONSCREEN!!", new Vector2(50, 275), Color.White);
That’s it! You’re done. Just hit F5 to see it in action.
Next Up… I’ll cover listening for (and responding to) input. If you came directly to this page, you can find the complete list of articles here.