MonoGame Tutorial: Building a 2D Game Using C#

By | April 16, 2017

Part 3 – Content Pipeline (How we get images and sound effects into the game)

In Part 2, we created a new MonoGame project, and looked at what was created for us to start with. Now let’s take a look at the MonoGame Content Pipeline, and why we need it for our game.

Although we could load image and sound files directly from the file system in MonoGame, that’s not the best way to do it. The content pipeline provides several advantages:

  1. Converts files to a format that MonoGame can use at run-time. For example, MonoGame can’t process “.wav” sound files at run-time, so we can use the Pipeline tool to convert the file to the “.xnb” format that MonoGame knows how to use.
  2. The pipeline tool will reformat the files into a format appropriate for the target platform. Remember, even though this tutorial is targeting Windows, you can also use MonoGame to target iOS, Android, Mac OS, and Linux.
  3. The pipeline tool will also strip out information from the file that isn’t needed by the run-time. This reduces the file size on disk, and can reduce load time.

The only downside is that it makes developing just a bit more complicated, because we must process the files by the pipeline tool before we can use them in our program. But, after you’ve done it a few times, you will barely notice the extra steps.

We’ll need a few image and sound files for the project, that you can download at
Bricks Image and Sound Files.

Image Files

  • Ball.png (our game ball)
  • Brick.png (image of the bricks on our gameboard)
  • Paddle.png (the game paddle used to hit the ball)
  • Pixel.png (a file with a single white pixel. We’ll use this for drawing shapes. We’ll talk about this later)

Sound Files

  • StartSound.wav (played when we serve a new ball)
  • WallBounceSound.wav (played when the ball bounces off a wall)
  • BrickSound.wav (played when a brick is hit and destroyed)
  • MissSound.wav (played when the player misses the ball and it falls out of play)
  • PaddleBounceSound.wav (played when the ball bounces off of the paddle)

All the image files are public domain. I’ve included the attribution links for the sound files at the end of this document. I edited some of the files to clip portions that weren’t needed for the game. If you are interested, the program I used is an open source program called Audacity.

You should extract the downloaded “BricksAssets.zip” file and copy all of the extracted image and sound files to your project “Content” folder:

C:\Users\YourUserFolder\Documents\Visual Studio 2017\Projects\Bricks\Bricks\Content

Note: You need to replace “YourUserFolder” with the name that Windows has assigned to the current user. For example, on my PC, my documents are under a folder called “dvist” that is formed by my first initial and 4 characters of my last name.

Earlier, we looked at the solution explorer to look at the files that were created when we selected the “MonoGame Windows Project” template. The file we’ll be working with now, is the “Content.mgcb” file:

Content.mgcb file
This is an XML file that the pipeline tool uses to store information about your project file assets. To use assets (sound and graphics) in a MonoGame Project, we’ll need to add the files and build them using the Pipeline tool.

In previous Visual Studio versions, you could double-click on the “Content.mgcb” file to open the pipeline tool. Unfortunately, that doesn’t seem to work in Visual Studio 2017, so we’ll have to open the Pipeline tool manually.

To do so, go to your Windows Start Menu, and under the MonoGame folder you should see the MonoGame Pipeline Tool program. Run that, and the pipeline tool will be opened:
MonoGame Pipeline Tool
You will need to open the “Content.mcgb” file from your project. By default, Visual Studio 2017 will have created your file here:

C:\Users\YourUserFolder\Documents\Visual Studio 2017\Projects\Bricks\Bricks\Content

So, in the Pipeline tool, Select File Open, and Open the “Content.mcbg” file from the “Content” folder under your project:
Open Content Dialog
Your Pipeline tool should now look like this:
Empty Content Pipeline
Now from the Edit menu, select >b>Add an Existing Item:
Add Existing Item
Select all of the “.PNG” and “.WAV” files your downloaded into your content folder. You can select multiple items, by holding down the Ctrl key while clicking on each file name. Click Open:
Add Content To Pipeline
Your pipeline tool should now look like this:
Pipeline after adding files
There’s one more asset that we must add to our program, but it’s something you may not think of as an asset: a Font. MonoGame doesn’t write text to the screen the way a normal windows program does. It uses a bitmap font. When you add a font to your program, the MonoGame pipeline tool creates a bitmap image of each character in the character set, as it will look on the screen. Then it draws those bitmap images on the screen for you.

That has some implications for you. You will need to add a font asset for each font family and font size you will use in your program. For this program, we’ll be using the “Arial” font, with a point size of “20”. Fortunately, adding a font is easy. In the pipeline tool, select the Edit menu, then click on Add New Item:
Add new Content Item
In the “New File” Dialog, enter “Arial20” as the name, and from the list of Types, click on Sprite Font Description, then click Ok:
Add Arial20 SpriteFont
You will see that MonoGame has added a file called “Arial20.spritefont” to your Content folder.

MonoGame will default to “Arial” when we add a font, but we’ll need to manually change the font size. So, we’ll need to edit the file we just created using a text editor. I’ll use Notepad.

One problem with Notepad is that it doesn’t recognize the “Newline” characters in the file, so it will look jumbled. I’ll go ahead and use it to keep it simple. But I would recommend a free program called “Notepad++” that will show the file formatted correctly. You can get Notepad++ here.

The file will be in the “Content” folder of your project, and it will be called “Arial20.spritefont”. If you used the default folder for your project, it will be located at:

C:\Users\YourUserFolder\Documents\Visual Studio 2017\Projects\Bricks\Bricks\Content

Anyhow, the file is just a small XML file, and the tag we need to change is the “Size” tag. Change the value of the tag to “20”:
Editing Arial20.spritefont in Notepad
Now, we have just one more step, and we’ll have all of our assets ready to use by our program. We need to do a build in the pipeline tool to convert the asset files to “.xnb” files, so they can be used in MonoGame. In the MonoGame Pipeline Tool, select the Build Menu, then select Build:
Build Content
After the build, your screen should look like this:
Pipeline Build Results
Okay, that’s all we’re going to do with the Pipeline tool, but here’s two things to remember. First, if you add any assets to your content folder, remember that you must go back to the pipeline tool and add them like we did here. AND, remember you must do a “Build” again in the pipeline tool.

Second, if you make any changes to any of the assets you previously added, make sure you do a “Build” in the pipeline tool. Remember, your program isn’t working with the image you edited, it’s working with the “.xnb” file that the Build creates from that image.

Now that we’ve gotten the files into a format that MonoGame can use, let’s see how we actually load them into our program. We’ll do that in the next section, Part 4.

12 thoughts on “MonoGame Tutorial: Building a 2D Game Using C#

  1. Kiel97

    I was looking for a quick tutorial to dive into MonoGame. Thank you! This one is perfect! It’s very easy to understand basic concepts of game making.

    Reply
  2. puppy

    Excellent tutorial . Although XNA is no longer supported by MicroSoft, it’s a good framework for 2D game development.

    Reply
  3. Josh_Kb

    Thankyou,
    This has really helped me to grasp the basics of Monogame!

    Reply
  4. Rodhlann

    Exactly what I was looking for! I heard that Axiom Verge was built with Monogame and instantly wanted to figure out what I could do with it as well. Thanks for setting me on the right track with this quick tutorial 🙂

    Reply
  5. stan10785

    What a great tutorial! Very too the point with great code examples! Thoughts on doing another one on another game type?

    Reply
    1. admin Post author

      Glad it helped! I hope to do some more once my schedule frees up.

      Reply
  6. stan10785

    This was really great! I would love to see another – tile maps are always fun

    Reply
  7. Wayne

    Great tutorial! This really helped me understand the basics of XNA/MonoGame; which in turn will help me get past a hurdle with something else I was attempting.

    Also, being the audio nerd that I am I couldn’t help but play around with the panning option. Using what I had already learned in the tutorial, is was simple enough to make the brick breaking sound pan more left or right as you get farther from the center. Fun stuff!

    Reply
  8. JustDoIt

    The best XNA/MonoGame tutorial so far!!
    I`m so hyped about the game, that I would love to see how to make more levels with more difficulties.

    Great Job!

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *