Building a Cross Platform Game with MonoGame – Part 2

March 19, 2015

one comment

In the first part we’ve seen how to install MonoGame for use with Visual Studio and how to create a new project. We’ve seen some of the boilerplate code created by the project wizard and discussed briefly the game asset file. We are now ready to put our own special stuff into the game.

We’ll start by doing some cleanup, as our project has the default spinning cube. I’ve also renamed the Game class from Game1 to InavdersGame and the C# file correspondingly.

Open InvadersGame.cs and remove all the code in the Draw method except the Clear call:

protected override void Draw(GameTime gameTime) {
	GraphicsDevice.Clear(Color.CornflowerBlue);
 
	base.Draw(gameTime);
}

Remove all the code in the Initialize method that creates the 3D cube and the basic effect. Leave only the settings on the supported orientations:

protected override void Initialize() {
	graphics.SupportedOrientations = DisplayOrientation.LandscapeLeft | DisplayOrientation.LandscapeRight;
 
	base.Initialize();
}

Now delete all the fields that were used in the Initialize call. The only fields remaining are the GraphicsDeviceManager and the SpriteBatch.

The game should compile and run just fine, showing a bluish background and nothing else.

Our next move is to add a background image of some nebulae debris to have some non-solid backdrop for the game.

We need to add the bitmap image to the Content folder under the shared project and then tell the MonoGame asset system about it. First, we’ll create a subfolder under Content named Textures for better organization, and add the image file there (called background1.jpg):

clip_image002

Now we’ll open the content.mgcb file by double-clicking in Visual Studio or Explorer, then right clicking the Content node and selecting “Add Item…” from the context menu, then navigating to the JPG file. It’s now added (with the Textures folder) to the root Content node:

clip_image003

(Note that the pipeline tool currently has a bug where it may open a previous file. Just select File/Open and navigate to the correct file). Select File/Save to update the content file itself.

Now that the image file is part of the game assets, we can load it within the LoadContent method:

protected override void LoadContent() {
	spriteBatch = new SpriteBatch(GraphicsDevice);
 
	_background = Content.Load<Texture2D>("Textures/background1");
}

The SpriteBatch creation was already there. The _background variable is a field of type Texture2D that holds the loaded image.

Displaying the image is done in the Draw method by using a SpriteBatch, which is the workhorse of showing images and sprites (as we’ll see much more later on):

protected override void Draw(GameTime gameTime) {
	//GraphicsDevice.Clear(Color.CornflowerBlue);
 
	spriteBatch.Begin();
	spriteBatch.Draw(_background, Window.ClientBounds, Color.White);
	spriteBatch.End();
 
	base.Draw(gameTime);
}

Drawing is done between calls of SpriteBatch.Begin and End. The SpriteBatch.Draw method is overloaded to accept various types of positions, sizes, rotation and a few other parameters. For now, we’re only interested in drawing the image across the entire game screen, so our job is relatively easy. Note that the screen clearing code is commented out; that’s because we’re drawing over the entire screen, so the clearing is redundant and wasteful.

One argument that may be puzzling is the last Color parameter. What does Color.White mean? This color is used as a mask over every drawn pixel. Color.White really means “draw as is”. For example, if we used Color.Red, then only the red channel would be visible (making the blue and green hues disappear from the image).

Let’s make the nebulae a little less pronounced, since it’s just supposed to be a backdrop. We can achieve that without color channels going to different directions by using a shade of grey, since grey in RGB terms means red=green=blue. Here’s an example:

spriteBatch.Draw(_background, Window.ClientBounds, Color.LightGray);

This will make the image a bit less pronounced (“LightGray” is something like 240 out of 255 per color channel).

In the next part, we’ll create a moving starfield to spice things up a bit in the background.

Download Source

Add comment
facebook linkedin twitter email

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

one comment

  1. NBMarch 19, 2015 ב 11:25

    Thanks P, it was enlightening!

    Reply