Geeks With Blogs

News

Google My Blog

Catch me at: The List!


My InstallScript Utility Belt My Amazon Wishlist
My Standard Disclaimer


Archives
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.)

image

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.

image

This will create an XML file which you will need to add to your project, but first, let’s take a look inside:

image

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.Begin();
spriteBatch.DrawString(verdana36, "I PUT TEXT ONSCREEN!!", new Vector2(50, 275), Color.White);
spriteBatch.End();

That’s it! You’re done.  Just hit F5 to see it in action.

image

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...
Thanks for sharing. This might be a bit technical for some people like me. I am used to outsourcing my technical assignments to https://spideressay.com. They are usually of much help.
Left by janekelly on Feb 27, 2017 4:04 AM

# re: 7. MonoGame - Putting Text Onscreen With SpriteFonts
Requesting Gravatar...
I was reading your article and wondered if you had considered creating an ebook on this subject. Your writing would sell it fast. You have a lot of writing talent.
madden mobile hack
madden mobile coins
Left by dewsw on Mar 28, 2017 9:23 PM

# PDF-XChange Viewer Pro
Requesting Gravatar...
Very much appreciated! PDF-XChange Viewer Pro
Left by Vance Hinton on Apr 07, 2017 8:24 AM

# Nose Doctor CA
Requesting Gravatar...
So it is interesting and very good written... Nose Doctor CA
Left by Darnell Cline on Apr 17, 2017 4:15 AM

# re: 7. MonoGame - Putting Text Onscreen With SpriteFonts
Requesting Gravatar...
Excellent and nice article. when user want to get important information then visit our site. Can Someone Do My Assignment
Left by Ellie009 on Apr 19, 2017 2:29 AM

# re: 7. MonoGame - Putting Text Onscreen With SpriteFonts
Requesting Gravatar...
This may well be a little technical for a few individuals like Maine. I'm want to outsource my technical assignments to Do My Essay UK. They're typical of abundant help.
Left by Eliseward92 on Apr 20, 2017 1:40 AM

Your comment:
 (will show your gravatar)


Copyright © Chris G. Williams | Powered by: GeeksWithBlogs.net