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:
[code language=”csharp” highlight=”6,7,8,9,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34″]
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
}
}
}
[/code]
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:
[code language=”csharp” highlight=”9″]
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
[/code]
We’ll also need to instantiate it. We can do that in the LoadContent method of “Game1.cs”. Add the line as show below:
[code language=”csharp” highlight=”28″]
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 502×700 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);
}
[/code]
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:
[code language=”csharp” highlight=”8″]
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);
}
[/code]
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.

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

  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?

  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!

Leave a Reply

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