Geeks With Blogs


Google My Blog

Catch me at: The List!

My InstallScript Utility Belt My Amazon Wishlist
My Standard Disclaimer

Chris G. Williams Beware: I mix tech and personal interests here.

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:

SpriteFont verdana36;

(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.

Posted on Wednesday, February 22, 2017 3:00 PM Game Development , MonoGame | Back to top

Comments on this post: 7. MonoGame - Putting Text Onscreen With SpriteFonts

# re: 7. MonoGame - Putting Text Onscreen With SpriteFonts
Requesting Gravatar...
I am recommending you something about the google play redeem code online without any obstacles.
Left by Sameer sharma on Sep 06, 2017 4:01 AM

# re: 7. MonoGame - Putting Text Onscreen With SpriteFonts
Requesting Gravatar...
This is the first time I came across such a program. From this blog I came to know more about the MonoGame and the requirements for installing the program. However there are no clear indications for the uses of the program here. river ranch resort senior rv parks
Left by Taylor Shaw on Sep 12, 2017 7:16 AM

# re: 7. MonoGame - Putting Text Onscreen With SpriteFonts
Requesting Gravatar...
It’s a new topic for me. I have gone through the codes and explanation but I feel like the contents are not enough to understand the full idea. Since I am interested to read more, please include additional contents soon. amsterdam bike tour
Left by hila on Jan 03, 2018 5:13 AM

# re: 7. MonoGame - Putting Text Onscreen With SpriteFonts
Requesting Gravatar...
The topic is totally new to me and good to know about this Monogame.It is free software used by game developers to make their Windows and Windows Phone games run on other systems.Step for installing is very clearly explained.Thanks for this article.private washington dc tours
Left by ann on Feb 23, 2018 6:41 AM

# re: 7. MonoGame - Putting Text Onscreen With SpriteFonts
Requesting Gravatar...
The screenshot here helps everyone to understand the content. I have gone through it and it works well. You did a wonderful job by this article. Keep continuing to share more. Waiting to read more and more related posts here. free CCCHC clinics near me
Left by daisy on Apr 06, 2018 5:41 AM

Your comment:
 (will show your gravatar)

Copyright © Chris G. Williams | Powered by: