Building Breakernoid in MonoGame, Part 1
- Prerequisites / MonoGame / Setup / Drawing a Background
- GameObject Class / Paddle /
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
In this article series, you'll be building a clone of the classic brick-breaking game called Breakernoid. By the end of the fourth article, you'll have a game that features several levels that are loaded from data files, different power-ups, sound effects, and scoring.
The final version of the game will look like the following figure:
)
My approach in this series is to show you the code inline whenever I introduce a new concept, but not when the code is a rehash of something that was done earlier. In my experience, this reinforces the concepts better than just providing all the source listings inline.
However, if at any point you get lost during the discussion, the end of every article has a link to the full source code for that article. So you can always consult this code if you're not entirely sure of how to do something.
In this first article, you'll set up the initial project, create a base game object class, and add a paddle that can be moved with the arrow keys.
Before you get started, though, I want to cover the prerequisites for this series.
Prerequisites
This series assumes that you are familiar with object-oriented programming, and you'll be using the C# programming language. Even if you haven't used C# before, as long as you have experience in Java or C++, you should be able to easily pick up the language.
It also is helpful to have some experience with geometry and algebra because you'll have to use math for certain calculations.
MonoGame
Although a brick-breaking game could be created in many different frameworks, this series uses MonoGame. MonoGame is an open source port of Microsoft's XNA framework that can be used on many platforms, including PC, Mac, Linux, iOS, and Android. Several popular independent games have used MonoGame, so it's something that you can definitely use to create release-worthy games.
Although it would be faster to use a full-fledged engine such as Unity, you'll learn more about game programming if you don't.
MonoGame provides a good balance for fledgling game programmers—tedious aspects (such as loading image files) are handled for you, but all gameplay must be written from scratch.
MonoGame also can be used to create both 2D and 3D games, whereas most game programming frameworks work for only one or the other.
For this series, I provide all the necessary .xnb files for the content. But if you later want to add your own images/sounds to your game, you'll have to install Visual Studio 2010 and XNA 4.0 to be able to generate new .xnb files.
Setup
If you don't have one already, you need to install a development environment that supports MonoGame. If you're on Windows, I strongly recommend downloading Visual Studio Express 2013 for Windows Desktop from here. (Alternatively, if you are a student you can get the full version of Visual Studio 2013 Professional from DreamSpark). This is the environment I use for all sample code for this article series, so it'll make things easier if you also use it.
If you want to develop on Mac or Linux, you'll have to install either Xamarin Studio or MonoDevelop, which you can get at the MonoDevelop website.
Next, you need to install MonoGame. If you're using VS 2013, you should download the latest development build from here.
In Xamarin Studio and/or MonoDevelop, you have to use the add-on browser to install MonoGame.
Now you need to set up the starting project.
If you can't use the VS 2013 project, you need to create a new project that uses MonoGame and add the .xnb files in the Breakernoid_content.zip file to the Content folder in your project. You also need to set up your project so it will automatically copy these content files to the output directory.
To do this in Visual Studio, right-click on the files, select Properties, and change the Copy to Output Directory setting to Copy if Newer.
If you're using Xamarin Studio on a Mac, right-click on the files and select Build Action>Content.
After you open the project, you should be able to run it by pressing the Play button. When you first run the project, you won't see anything except a small window with a light blue background. But you'll be fixing that in short order.
Drawing a Background
The first thing to do is set the resolution of the game to 1024x768. You'll be using this resolution because it's a 4:3 resolution that will work fine on nearly any computer. Furthermore, all the art for Breakernoid was created with this resolution in mind.
To set the resolution, open up Game1.cs. At the bottom of the Game1 constructor, add the following two lines:
graphics.PreferredBackBufferWidth = 1024; graphics.PreferredBackBufferHeight = 768;
Then when you run the game, you should notice that the window now runs at 1024x768.
Next, you'll want to change the background color from light blue to a darker blue. To do this, find the line in the Draw function that clears the screen to Color.Cornflowerblue. Change this color to Color.Blue.
Now you'll add a background image so the background isn't just a flat blue color. First, you need to add a member variable to Game1, right under the SpriteBatch spriteBatch; declaration:
Texture2D bgTexture;
You then want to load in the appropriate texture into this variable. All loading should be done in the LoadContent function. Under the TODO line in LoadContent, add this:
bgTexture = Content.Load<Texture2D>("bg");
This code says that you want to load a content file that's a Texture2D named bg.xnb. Once you've loaded the texture, you can then draw it.
All drawing should take place in the Draw function, after the GraphicsDevice.Clear call and before the base.Draw call.
Textures are drawn using a SpriteBatch. Conveniently, the default game project already creates one for you called spriteBatch.
So to draw the background, add the following code to Draw:
spriteBatch.Begin(); // Draw all sprites here spriteBatch.Draw(bgTexture, new Vector2(0, 0), Color.White); spriteBatch.End();
The SpriteBatch.Draw function takes a minimum of three parameters. The first specifies the texture you want to draw, which in this case is bgTexture.
The next parameter specifies the position in which you want to place the texture. The location you specify is where the top-left corner of the image is drawn.
Because the background image is 1024x768, if you draw it at (0,0), its top-left corner will be at the top-left corner of the window, which is precisely where you want it.
Finally, the Color.White parameter specifies that you don't want to apply any color filter to the image—for example, if you want to redden the image, you can specify Color.Red.
In any event, you can put any number of SpriteBatch Draw calls between a pair of Begin/End calls. So even though right now you have only one Draw, you'll be adding more as you progress through this tutorial.
Once you add the background drawing code, your game should look like the following figure:
)