Monthly Archives: April 2017

MonoGame Tutorial: Building a 2D Game Using C#

Completed Bricks Game
In this MonoGame Tutorial, I’ll walk you through the creation of a 2D Game using MonoGame and C#. The game we’ll be creating is called “Bricks”, which is similar to the old “Breakout” arcade game. By the time you complete the tutorial, you’ll be able to create a new MonoGame project.

We’ll talk about the Content Pipeline, and what it is used for. You’ll learn how to add images and sounds to the project and use them in a game. You’ll learn how to move and rotate images, and display text. This should be everything you need to get started on your own game projects.

Why MonoGame?

Microsoft C# and .Net are my absolute favorite development tools. For creating Windows desktop and web-based applications, they are, in my opinion, unsurpassed. However, one area where C# fell short, was in game development. Using the .Net API’s it is not possible to get the high performance required for gaming. DirectX, which is used by virtually all professional games on Windows, requires the use of the C++ language. DirectX allows low-level access of the Video Card, which makes it the fastest method of drawing on the screen for the PC.

I find C++ to be a difficult language to use, fraught with many of the same pitfalls that plague developing with C. In 2006, Microsoft provided a solution: Microsoft XNA Framework. XNA allows C# developers to access DirectX from C#. C++ is still the go-to solution if you need to squeeze the absolute last bit of performance out of a PC, but C# is now a very credible solution for gaming development. In fact, it has been used by many commercial games today.

Unfortunately, Microsoft discontinued XNA development in 2013. But, thanks to the open source community, all was not lost. MonoGame is a compatible open source version of XNA, that is still being supported. Even better, MonoGame is cross-platform, so you can develop games in C# for iOS, Android, Mac OS X, Linux and Windows.

Bricks Game

This article will describe how to create a simple game using C# and the MonoGame Framework for Windows. We will be building “Bricks”, which will be similar to the old Breakout game.

Breakout is one of the earliest video games ever developed. It offers interesting game play, but the mechanics are simple, so it provides a good subject for a MonoGame tutorial.

In the game, there is a wall of several rows of bricks at the top of the screen. A ball is bounced off a movable paddle at the bottom of the screen. It travels across the screen. If the ball hits the side or top walls of the screen it bounces. If it hits a brick, the brick is destroyed. If the player fails to hit the ball with the paddle, the ball flies off the bottom of the screen and is lost. The player gets 3 balls, and play continues until all three balls are lost. After all bricks are cleared, a new set of bricks is displayed, and play continues.

Tutorial Road map

I chose this game, because it has the basic elements needed for a great variety of 2D games. As we develop the game, I’ll be covering the following topics:

1. Overview and Setting up the Environment
2. Basic structure of a MonoGame Program (The game loop)
3. Content Pipeline Tool (How we get images and sound effects usable by MonoGame)
4. Loading Images and Sounds
5. Drawing Images on the Screen
6. Drawing basic shapes on the screen
7. Getting Keyboard and Mouse Inputs
8. Moving and Rotating Images
9. Playing sound effects
10. Drawing Text

After we get done, we’ll have a playable version of Breakout, and you should have everything you need to start your next MonoGame project.

You can download the complete source code and project from here.

Prerequisites

Note: This tutorial assumes you already know how to program in C#. If you aren’t comfortable with C# yet, you may want to look at this C# Tutorial. You will also need Visual Studio 2017. You can get the Community Edition free from Microsoft here.

Tutorial Conventions

Menu commands and button clicks will be shown in a bold font.

Field, method and class names will be shown in an italic font.

When I show source code, it will appear in blocks like this:

//line shown for context
//line to add
//another line to add
//line shown for context
//line shown for context

Lines of source code to be added are shown as highlighted, as in lines 2 and 3 in the above example. Other lines are just shown for context or discussion.

Environment Setup

Before we get started, you will need to install Visual Studio 2017. If you don’t already have it installed, you can get the Community Edition for free from Microsoft.

After you have installed Visual Studio, you will need to download and install MonoGame. Before you do, make sure you close Visual Studio. You can download MonoGame here. Select the link for the Visual Studio version. After the download is complete, run the downloaded file: “MonoGameSetup.exe”.

After MonoGameSetup is complete, you can start Visual Studio. We’ll create a new project called “Bricks”. From the File Menu in Visual Studio, select New and Project:
Create New Project

This will open the new project dialog. Under Installed/Templates/Visual C#, you will notice that several MonoGame project templates are available. For this tutorial, select MonoGame Windows Project. In the Project Name field, enter “Bricks”, which is the name we’ll use for our project. Then click the OK button to create the project:
Create Bricks Project

This will create a simple MonoGame project for us. We can run it and we’ll have the skeleton of a game already running for us. Go ahead and click F5 to run the application. You will see a new window created with the title of our project “Bricks”, and a light blue background. You can just hit the Esc key to close the window (or click the X button in the upper right of the window), to close the game.
Initial Game Screen
It’s not very exciting yet, but we already have the framework that we’ll need for the entire game. We are ready to get inputs from the keyboard or mouse, and draw on the screen. When you are ready, proceed to Part 2 and we’ll look at what’s already been created for us.