MonoGame Tutorial: Building a 2D Game Using C#

By | April 16, 2017

Part 6 – Drawing basic shapes on the screen

In Part 5, we began drawing the game playing field by adding the paddle and brick wall. Now we are ready to draw the borders on the edge of the playing field.

We could just create images of our game borders, but I wanted to show how you can draw basic shapes in MonoGame. So, we’ll draw the borders as 1 pixel-wide rectangles. We’ll add a new GameBorder class for this. Right-click on the project Bricks in the solution explorer, and select Add and Class from the drop-down menus:
Add new Class
In the Add New Item Dialog, enter “GameBorder.cs” for the class name, then click Add:
Add GameBorder.cs File
Enter the following code in “GameBorder.cs”, and then we’ll go over what we’ve added:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Audio;
using Microsoft.Xna.Framework.Graphics;
using Microsoft.Xna.Framework.Input;

namespace Bricks
{
    class GameBorder
    {
        public float Width { get; set; } //width of game
        public float Height { get; set; } //height of game

        private Texture2D imgPixel { get; set; }  //cached image single pixel we'll use to draw the border lines
        private SpriteBatch spriteBatch;  //allows us to write on backbuffer when we need to draw self

        public GameBorder(float screenWidth, float screenHeight, SpriteBatch spriteBatch, GameContent gameContent)
        {
            Width = screenWidth;
            Height = screenHeight;
            imgPixel = gameContent.imgPixel;
            this.spriteBatch = spriteBatch;
        }

        public void Draw()
        {
            spriteBatch.Draw(imgPixel, new Rectangle(0, 0,(int) Width - 1, 1),Color.White);  //draw top border
            spriteBatch.Draw(imgPixel, new Rectangle(0, 0, 1,(int) Height - 1), Color.White);  //draw left border
            spriteBatch.Draw(imgPixel, new Rectangle((int)Width - 1,0, 1, (int) Height-1), Color.White);  //draw right border
        }
    }
}

Our game border will be a single-pixel wide white line on the left, top and right side of the screen. A ball hitting a border will bounce. Since the bottom of the screen has no border, a ball passing the bottom of the screen will fall out of play. We’ll just pass the screen height and width to the constructor, so we know where to draw the lines. We’ll also get a reference to an image with a single white pixel, that we’ll save in imgPixel.

Then, in our Draw method, we’ll call spriteBatch.Draw, and use the Rectangle class to create a rectangle of white pixels to the screen. But, we’ll set either the height or width to “1” in each call, so we are effectively drawing single lines. We can use this approach whenever we want to draw simple lines or rectangles of arbitrary shapes at run-time.

Go ahead and add a new private variable for our GameBorder instance to “Game1.cs”, as shown below:

public class Game1 : Game
{
    GraphicsDeviceManager graphics;
    SpriteBatch spriteBatch;
    GameContent gameContent;

    private Paddle paddle;
    private Wall wall;
    private GameBorder gameBorder;	
    //rest of class not shown to conserve space

We’ll also need to instantiate it. We can do that in the LoadContent method of “Game1.cs”. Add the line as show below:

protected override void LoadContent()
{
    // Create a new SpriteBatch, which can be used to draw textures.
    spriteBatch = new SpriteBatch(GraphicsDevice);

    // TODO: use this.Content to load your game content here
    gameContent = new GameContent(Content);
    screenWidth = GraphicsAdapter.DefaultAdapter.CurrentDisplayMode.Width;
    screenHeight = GraphicsAdapter.DefaultAdapter.CurrentDisplayMode.Height;
    //set game to 502x700 or screen max if smaller
    if (screenWidth >= 502)
    {
        screenWidth = 502;
    }
    if (screenHeight >= 700)
    {
        screenHeight = 700;
    }
    graphics.PreferredBackBufferWidth = screenWidth;
    graphics.PreferredBackBufferHeight = screenHeight;
    graphics.ApplyChanges();

    //create game objects
    int paddleX = (screenWidth - gameContent.imgPaddle.Width) / 2; //we'll center the paddle on the screen to start
    int paddleY = screenHeight - 100;  //paddle will be 100 pixels from the bottom of the screen
    paddle = new Paddle(paddleX, paddleY, screenWidth, spriteBatch, gameContent);  // create the game paddle
    wall = new Wall(1, 50, spriteBatch, gameContent);
    gameBorder = new GameBorder(screenWidth, screenHeight, spriteBatch, gameContent);  
}

Finally, we need to tell the border to draw itself. So, we need to add a call to gameBorder.Draw() in our “Game1.cs” file Draw method as shown below:

protected override void Draw(GameTime gameTime)
{
    GraphicsDevice.Clear(Color.Black);
    // TODO: Add your drawing code here
    spriteBatch.Begin();
    paddle.Draw();
    wall.Draw();
    gameBorder.Draw();
    spriteBatch.End();
    base.Draw(gameTime);
}

Go ahead and run the game, by pressing F5, just to make sure it now draws your game borders. It should look like this:
Game play field with borders
Now that we have the playing field, let’s start adding some action to our game. We’ll do that in Part 7.

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 *