[Core]

Creating and using game objects on a blank or solid color background sometimes is not very convenient, so the developer usually initializes a background image that will be used for the game. Creating background images and sprites for a 2D game may require some graphic skills and the developer usually cooperates with a professional graphic designer to obtain professional-looking images. In this tutorial, however, I will not focus on the image creation process. I will show how to use an already created image as a background in a XNA 2D game. So what do you need to run this tutorial?

Prerequisites:

• Microsoft Windows XP (or later) operating system
  
• Microsoft Visual C# 2008 Express Edition or Microsoft Visual Studio 2008
  
• XNA Game Studio 3.0

Programming experience using C# is not required, but if you are quite new to the world of programming, I would recommend starting with the basics of the language instead of diving instantly in game development.
Now, let’s start.

Step 1:
Create a XNA Windows Game Project.



Of course you can also create an Xbox 360 Game, as this tutorial is not dependant of the target platform, but I will use a Windows Game project.

Step 2:
Now that you have the project, you will see that by default the Game1.cs code file is opened. This is the main file of the game that contains several important event handlers that handle the core of the game (loading and updating content):



Before initializing a background image, you need to have one. I attached a generic TGA texture to this tutorial (shiny_blue.tga) which can be used for this tutorial. Let’s add this texture to the project. It is recommended (but not required) to separate different game content while managing the project, so let’s create a special folder that will contain our texture. In the Solution Explorer window, right click on the Content section. A context menu will appear. From the context menu, select Add -> New Folder:



In the Solution Explorer window you will see that a new folder was created. Set its name to Textures:



Step 3:
Now, you should add a texture (image) to the newly created folder, so you can use the added image as the background of your game. Right click on the Textures folder and click on Add -> Existing Item:



Make sure that the file type filter is set to Content Pipeline Files. Navigate to the texture (image) you want to set as the background and add it.

REMINDER: There is a texture attached to this tutorial (shiny_blue.jpg), that can be used as a background.

Step 4:
Now, let’s initialize the texture as a game background. Make sure that you are currently viewing the Game1.cs file. Right after the class declaration (where you see the graphics and spriteBatch declarations) add the following lines:

		// Create an instance of Texture2D that will
		// contain the background texture.
		Texture2D background;

		// Create a Rectangle that will define
		// the limits for the main game screen.
		Rectangle mainFrame;

This will both define an instance of Texture2D, that will be used to create the background and an instance of Rectangle, that will set the margins (limits) for the playing screen.

Step 5:
Now, let’s draw the background. Let’s navigate to the Draw method. You can easily select it from the Members list:



Add the following code right after GraphicsDevice.Clear(Color.CornflowerBlue);:

			// Draw the background.

			// Start building the sprite.
			spriteBatch.Begin(SpriteBlendMode.AlphaBlend);

			// Draw the background.
			spriteBatch.Draw(background, mainFrame, Color.White);

			// End building the sprite.
			spriteBatch.End();

Step 6:
The code presented in the previous step is supposed to draw the background. But at this moment there is nothing to draw – the texture wasn’t initialized. To initialize the texture, go to the LoadContent method and add the following code right after spriteBatch = new SpriteBatch(GraphicsDevice);:

			// Load the background content.
			background = Content.Load<Texture2D>("Textures\\shiny_blue");

			// Set the rectangle parameters.
			mainFrame = new Rectangle(0, 0, GraphicsDevice.Viewport.Width, GraphicsDevice.Viewport.Height);

This code will actually load the background picture from the Textures folder and will build a rectangle for the image, that will limit the main gaming area.

Completed
Now you can launch the project by pressing the F5 key or by pressing the green right arrow on the toolbar. If you entered the code correctly, you will see something like this:



Now, you can place any game objects and sprites on top of this background.
- Dennis Delimarsky (Core)

Attached image(s)

•