Drawing and Writing in MonoGame

After learning how the skeleton of a MonoGame application works, we should be ready to learn the basics of how we can Draw images and Write text in the Game window.

Image

To be able to draw an image, first you need an image, or what we will call a texture. You can download the image below to be able to follow and try on your own.

Editor

Second you need to locate what is called the MGCB editor and open it. In Visual Studio 2022 it's located here in the Solution Explorer... just double click it.

If you use Visual Studio Code it will be somewhere at the top of your window when you use the MonoGame for VSCode extension.

You can also use the Command Prompt by going to your project folder and typing...

dotnet mgcb-editor ./Content/Content.mgcb

When opened, the MCGB Editor will look like this...

You can write click on Content -> Add -> Existing Item... and locate the Texture file you saved. Select -> Copy the file to the directory and click Add.

I suggest to organize your resources in folders in the Editor, but for now it's ok like this.

While we are here, we will also create the SpriteFont file that we will need to write text to the screen.

Again, right click on Content -> Add -> New Item... type the name "OurFont" and select SpriteFont Description, the click on Create.

Now at the top of the editor, locate the Rebuild button, press it... and then Save. You will notice that your files are now in the Content folder in your project. These files will be built as binary files that will be usable on different platforms, so it makes our lives easier.

Drawing an image

Now let's go to the Game1.cs file.
We will need to have a variable to put our image into. So let's add this variable at the top of the class with other variables.

private Texture2D _ourTexture;

in the LoadContent method, let's load the texture like this. The string should be the name of your texture file without the extension.

_ourTexture = Content.Load<Texture2D>("test");

And then in the Draw method, after GraphicsDevice.Clear, add this. We will not see what the different parameters are doing for now, but the first one is your Texture variable and the second one a Vector of the position on the screen... you can play with it and see what it does.

_spriteBatch.Begin();

_spriteBatch.Draw(_ourTexture, Vector2.Zero, Color.White);

_spriteBatch.End();

When you want to draw things to the screen you need to use the Begin function of the SpriteBatch, draw what you want and then call the End function. You should batch as many Draw calls as possible to optimize the use of the Graphics Card.

If you start the application, you should see something like this.

Now let's do something similar to be able to write text.
You can open the OurFont.spritefont to edit the different parameters there... I will change the Size to 48.
Also you need to make sure that the platform you target will support the FontName that you choose.

Drawing Text

Let's go a bit faster now... at the top of the class in the variables, add this to save our font.

private SpriteFont _ourFont;

Then in LoadContent, we need to load the font.

_ourFont = Content.Load<SpriteFont>("OurFont");

And in the Draw method after our Texture draw, but before the _spriteBatch.End() calss, let's add this. We will more the text to the position 300,100 on the screen and choose a nice color.

_spriteBatch.DrawString(_ourFont, "Our Font!", new Vector2(300, 100), Color.MonoGameOrange);

If you did everything correctly, it should now look like this when you start the application.

Conclusion

I now suggest to play with what we did so far to familiarize yourself with the different parameters when drawing a texture or a font.
We will then start to make something a bit more complicated in the next article and learn how to use images in a different way with all the parameters.

Feel free to comment, ask questions, or correct me... we are all here to learn :)

See you

• David