Lesson 2 - Adding Content in MonoGame

In the previous lesson, MonoGame Project Structure, we explained the MonoGame project structure and how the game loop works.

Today, we're going to take a look at the content. As we know from the previous lesson, the content includes sprites, sounds, and music.

Setting the Window Size

Last time, we didn't even try to run our game. If we do it now, we can see a blue window with the size of 800x480 pixels. We'll now adjust the size. We'll add two public fields - windowWidth and windowHeight. They're public because they'll be later used by other game components. We'll set the width to 1280 and the height to 720. This is probably the lowest resolution that makes sense for a videogame (unless we're making a retro game), anything smaller looks ugly on larger screens. Note that the aspect ratio is 16:9, but we can also use the 16:10 variant, which would be 1280x800. However, the sprites for this course are made for the first variant. The 4:3 aspect ratio would make no sense for videogames, since such displays are no longer used today. The new code will look like this in the class:

public int windowWidth = 1280, windowHeight = 720;

Of course, don't forget to add comments into your source code. We won't add them here to save space, but they will be certainly included in the attached files at the end of articles. The project will grow in size, so we should be able to work with it in the future.

Now, let's move to the Initialize() method and set the new values to the graphics instance, which has the PreferredBackBufferWidth and PreferredBackBufferHeight properties. Those are the dimensions of the game window. Next, we'll set the IsFullScreen property to false. Finally, we'll confirm all the changes by calling the ApplyChanges() method. We write the code above the base.Initialize(); line. The result:

protected override void Initialize()
{
    // window size
    graphics.PreferredBackBufferWidth = windowWidth;
    graphics.PreferredBackBufferHeight = windowHeight;
    graphics.IsFullScreen = false;
    graphics.ApplyChanges();
    base.Initialize();
}

Let's try to run the game. We can see that everything works fine. You can set the fullscreen to true, but that'd take more time to start and exit the game and slow us down during the development. Since we haven't implemented any way to exit the game in the full screen mode yet, we'll do this by pressing Alt + F4.

Adding Content

Now let's focus on the Solution Explorer window, which looks like this:

We see the project structure we've already explained. In the Content folder, we'll open the MonoGame Content Pipeline Tool by double-clicking the Content.mgcb file:

Here we see the Content project into which we'll add the multimedia content for our game. Now let's create 3 new folders - Fonts/, Sprites/, and Sounds/. To create a folder, right-click the Content -> Add -> New Folder. Folders will make the content browsing easier.

Now please download the archive below the article that contains the first sprites and sounds for Robotris. The archive contains the Zardax song by StainLessSteel from the CSDB community. This is 8-bit music, which will give our game the proper arcade vibe. Next one is also an 8-bit sound, which we'll use when a complete row disappears. I found that at http://www.freesound.org/. We also have 3 sprites - a background made of blocks, background with a robot, and clouds. I modified the blocks from the Supaplex game to give them higher resolution. The level background was made with help from sczdavos using Photoshop. The clouds sprite was downloaded somewhere, its advantage is that we can tile the clouds side by side, because the texture repeats. Finally, we have the Blox font, downloaded from http://www.dafont.com. It fits perfectly into the arcade atmosphere.

Note that the files have the background_, spr_, sound_, font_, and music_ prefixes. It's a good habit that will ease readability when more content is added over time. Save the files somewhere next to the project folder. Except for the font file, all the files can be simply drag and dropped from Windows Explorer into the folders we've prepared in the MonoGame Pipeline Tool. When adding, a file adding window will pop up. We just have to confirm copying the file directly into the Content/ folder. Now what about the font? Right-click on the file and select Install. Then right-click the Fonts folder in the MonoGame Pipeline Tool and add a new SpriteFont (Add -> New Item, name it font_blox and select the SpriteFont Description type (.spritefont) in the following dialog):

Your Pipeline Tool should now look like this:

The SpriteFont structure

Open the font file by right-clicking it and selecting Open. As we can see, the .spritefont file is actually an XML that looks something like this:

<?xml version="1.0" encoding="utf-8"?>
<!--
This file contains an xml description of a font, and will be read by the XNA
Framework Content Pipeline. Follow the comments to customize the appearance
of the font in your game, and to change the characters which are available to draw
with.
-->
<XnaContent xmlns:Graphics="Microsoft.Xna.Framework.Content.Pipeline.Graphics">
  <Asset Type="Graphics:FontDescription">

    <!--
    Modify this string to change the font that will be imported.
    -->
    <FontName>Arial</FontName>

    <!--
    Size is a float value, measured in points. Modify this value to change
    the size of the font.
    -->
    <Size>12</Size>

    <!--
    Spacing is a float value, measured in pixels. Modify this value to change
    the amount of spacing in between characters.
    -->
    <Spacing>0</Spacing>

    <!--
    UseKerning controls the layout of the font. If this value is true, kerning information
    will be used when placing characters.
    -->
    <UseKerning>true</UseKerning>

    <!--
    Style controls the style of the font. Valid entries are "Regular", "Bold", "Italic",
    and "Bold, Italic", and are case sensitive.
    -->
    <Style>Regular</Style>

    <!--
    If you uncomment this line, the default character will be substituted if you draw
    or measure text that contains characters which were not included in the font.
    -->
    <!-- <DefaultCharacter>*</DefaultCharacter> -->

    <!--
    CharacterRegions control what letters are available in the font. Every
    character from Start to End will be built and made available for drawing. The
    default range is from 32, (ASCII space), to 126, ('~'), covering the basic Latin
    character set. The characters are ordered according to the Unicode standard.
    See the documentation for more information.
    -->
    <CharacterRegions>
      <CharacterRegion>
        <Start>&#32;</Start>
        <End>&#126;</End>
      </CharacterRegion>
    </CharacterRegions>
  </Asset>
</XnaContent>

According to this XML, MonoGame goes through the individual font characters and creates a sprite for each of them. MonoGame has no vector font rendering tool, so the font always needs to be converted to sprites. Fortunately, MonoGame does this automatically for us.

Inside the file, we'll look for the <FontName> tag and rewrite its value to the Blox font name (this can be found when we open the original font file, Windows will then show us the name, which in our case is "Blox (BRK)"). The tag will look like this:

<FontName>Blox (BRK)</FontName>

Next, we'll set the size to 50 points:

<Size>50</Size>

Since this font (like most other, decorative fonts) doesn't have characters with diacritics, remember not to write any accent characters using the font_blox, otherwise the game would crash with an error. Because we also want a smaller version of this font, we'll add another SpriteFont, just like the font_blox, it'll be named font_blox_small. Again, we'll set the font name to "Blox (BRK)" and the size to 30 points.

Diacritics in SpriteFont

The font works great for heading, however, we'd lack other special characters in other game texts. So we'll add some more common font, for example a monospaced "Courier New". Let's add it as the third SpriteFont into our Fonts/ folder. Name it font_courier_new and set its name to "Courier New" and its size to 15 points. Now let's move to the end of the XML file and modify the <End> tag in the font region to 390:

<CharacterRegions>
      <CharacterRegion>
        <Start>&#32;</Start>
        <End>&#390;</End>
      </CharacterRegion>
    </CharacterRegions>

Regions allow us to set what characters will be converted into sprites. We've now increased the range to include event accent characters if your languages uses them. We've added everything we need.

In the next lesson, Drawing and Writing in MonoGame, we'll show how to work with content inside the game, and we'll finally see and hear something

Did you have a problem with anything? Download the sample application below and compare it with your project, you will find the error easily.