MonoGame Tutorial: Building a 2D Game Using C#

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.

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

  1. 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.

      1. The links should be working now. Sorry, I migrated the site to a new provider and didn’t notice the links weren’t working. The code formatting should be correct in the document as well.

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

  3. 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 🙂

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

        1. The links should be working now. Sorry, I migrated the site to a new provider and didn’t notice the links weren’t working. The code formatting should be correct in the document as well.

  5. 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!

  6. 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!

    1. The links should be working now. Sorry, I migrated the site to a new provider and didn’t notice the links weren’t working. The code formatting should be correct in the document as well.

  7. Cześć
    Niestety nie działa link do pobrania zdjęć i tracków.
    Czy masz je jeszcze dostępne jeżeli tak to czy mógłbyś je udostępnić.
    Pozdrawiam

    1. The links should be working now. Sorry, I migrated the site to a new provider and didn’t notice the links weren’t working. The code formatting should be correct in the document as well.

Leave a Reply

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