RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Introducing XNA Game Studio Express : Page 2

Microsoft's XNA Game Studio Express gives you powerful game tools, and the ability to create games for both Windows and Xbox 360.

Drive Fast and Avoid the Oncoming Obstacles
In 1981, back when Microsoft was first getting started, IBM contracted with the company to develop the BASIC programming language for the new IBM PC computer. At that time, Bill Gates co-wrote a game to help demonstrate the abilities of the IBM PC and the new BASIC programming language. This game was DONKEY.BAS.

Today the torch has been passed, and I'll show you how to create a clone of that simple game and its basic game play using XNA Game Studio Express. I'll call the game "Drive Fast and Avoid Oncoming Obstacles," which is very similar to DONKEY.BAS and will consist of, you guessed it, a car driving fast along a road and avoiding obstacles. (That name could almost be a design document!)

I'll start by listing some of the other design elements of the game.

  • The only movement players can make is to switch their car between lanes by pressing the Spacebar key.
  • Obstacles scroll down through the screen in one of two lanes and the player must change lanes to avoid hitting the obstacles.
  • The game tracks the number of obstacles a player has successfully passed. The more obstacles the player successfully avoids, the faster the car will go.
  • Colliding with an obstacle ends the game. At that point, players must make a choice between playing again or exiting the game.
That is some pretty simple game play, I know, but XNA Game Studio Express makes this game pretty simple to put together too.

Creating the New Game Project
To begin, create a new Windows Game Project. Launch XNA Game Studio Express and then select New Project from the File menu.

Figure 1: Creating a new game based on an XNA Game Studio Express template.
In the New Project window, select the "Windows Game" template (see Figure 1) and then give the project a name and designate a save location. Name the game "Drive Fast and Avoid Oncoming Obstacles" so that Visual Studio names the project appropriately.

Build the project. If you get an error, then your video card may not meet the minimum requirements for XNA Game Studio Express. Visit the XNA FAQ on MSDN for a complete list of the minimum requirements. If you believe your video card does meet those requirements and you get an error, then try heading over to the Game Developer forums and ask for some help. The forums are quite active and it is likely someone will be able to help you fairly quickly.

Adding the Road Image
Now that you have the game set up correctly, here's how to add your first image to the project. This "road" image will scroll vertically through the screen—but for now, just work on getting the image added to the project so you can display it.

Figure 2: Adding the road image to the game project.
To add an image to the game project, right-click on the project name and select Add ⇒ Existing Item, which opens the Add Existing Item dialog box. The dialog defaults to show only "Visual C# Files," which means you will not see any images until you change this filter. To use the Content Pipeline to manage your images, select Content Pipeline Files from the "Files of type:" combo box. Now you should be able to navigate to your image. Select the image and then click the Add button. With the image added to your game project, you now need to display it (see Figure 2).

Drawing the Road Image
So far you've created the game project and added the image, so now let's finally write some code to draw that image on the screen. To start you'll add two new objects to the main game class (Game1.cs by default). These two objects will store the image and draw the image to the screen:

   private SpriteBatch mSpriteBatch;
   private Texture2D mRoad;
You use SpriteBatch, an XNA Framework object, to draw images to the screen. Texture2D, another XNA Framework object, is used to store an image. You'll use both of these objects frequently when creating 2D games with XNA, so learning to use them and all they can do becomes very important.

With the objects declared you now need to initialize and use them. To initialize the objects you'll add some code to the LoadGraphicsContent method. You may have noticed that there were already some additional objects added to the top of your game class and that your class is already populated with methods. XNA Game Studio creates these objects and methods automatically when you create a project using the Windows Game template. By adding code to these methods you begin to fill in the skeleton of the framework that will be your game.

Add the following code to the LoadGraphicsContent method within the if block that you'll find pre-created within that method:

   if (loadAllContent)
      mSpriteBatch = new 
      mRoad = content.Load<Texture2D>("Road");
The preceding code initializes the SpriteBatch object and then loads the road image from disk and stores it in the Texture2D object. That is fairly straightforward, right?

With the objects initialized and loaded you can draw the road image to the screen by adding some code to the Draw method. That's pretty intuitive isn't it? The Draw method is another one of those base methods created automatically when you began a new Windows Game project, and it's where you stick your drawing logic.

Go to the Draw method in the code, and begin by making the "screen wipe" color a little better match for the road image. To do this change the pre-existing line of code that clears the screen with the CornflowerBlue color to the code below:

The CornflowerBlue color just doesn't look as good with the road image as the SaddleBrown color does.

Next, add the following code to the Draw method:

   mSpriteBatch.Draw(mRoad, new Vector2(0,0),
This code tells the SpriteBatch object that you are ready to begin drawing things to the screen. To draw the road image, pass in the screen position—in this case start drawing it in the upper left corner (0,0). The Color.White parameter that you pass in to the SpriteBatch's Draw method tells the object that you do not want to apply any tint to the image.

Figure 3: Drawing the road image to the screen.
Finally, tell the SpriteBatch object that you're finished drawing using mSpriteBatch.End(). Your road image is ready for its big debut.

Stop and do a quick build just to make sure you have coded things correctly and that the road image displays as it should. After you build and run the game, you should see a screen similar to Figure 3.

Now that you can display the road image you can begin working on some code to start scrolling the road.

Scrolling the Road
To get the road image to scroll you'll need to add some new objects to the class. Insert this code snippet toward the top where you added the SpriteBatch and Texture2D objects:

   private float mVelocityY;
   private int[] mRoadY = new int[3];
The mRoadY integer array will keep track of a "chain" of road images that continually move down through the screen to simulate movement on the road. The mVelocityY float will keep track of the velocity of the road in the Y direction, so you can control how fast the road should move. You'll start the game with mVelocityY set to a constant value, but that will change as the game progresses to increase the difficulty.

Now, create a new method called StartGame in the Game1.cs class to initialize the various tracking objects to their starting positions. StartGame will also restart the game when appropriate. Here's the code:

   protected void StartGame()
      mRoadY[0] = 0;
      mRoadY[1] = mRoadY[0] + -mRoad.Height + 2;
      mRoadY[2] = mRoadY[1] + -mRoad.Height + 2;
      mVelocityY = 0.3F;
You call the StartGame method to initialize all the objects whenever the game starts or restarts. To do that add a call to the Initialize method you'll find in the game class. It is important to call StartGame after the base.Initialize() method has fired so you can be sure the Texture object has already been created (mRoad), because you'll need its Height property to properly position the road images.

Add the following code to the Initialize method after base.Initialize().

The next task is to create a method that scrolls the road.

Add the following ScrollRoad method to Game1.cs:

   private void ScrollRoad(GameTime theTime)
      //Loop the road
      for (int aIndex = 0; aIndex < mRoadY.Length; aIndex++)
         if (mRoadY[aIndex] >=
            int aLastRoadIndex = aIndex;
            for (int aCounter = 0; aCounter <
               mRoadY.Length; aCounter++)
               if (mRoadY[aCounter] < mRoadY[aLastRoadIndex])
                  aLastRoadIndex = aCounter;
            mRoadY[aIndex] = mRoadY[aLastRoadIndex] - 
               mRoad.Height + 2;
      //Move the road
      for (int aIndex = 0; aIndex < mRoadY.Length; aIndex++)
         mRoadY[aIndex] += (int)(mVelocityY * 
You want to call this method every time the game updates so add the following line of code to the Update method of the game class:

The only thing remaining to get this road scrolling is to loop through and draw each road image to the screen. You'll use the same texture for each image, but you'll draw it at a different Y location on the screen. To do that, remove the lines of code you initially used to draw the road image to the screen, and add the following code to the Draw method instead:

   for (int aIndex = 0; aIndex < mRoadY.Length; aIndex++)
         new Vector2(0, mRoadY[aIndex]), Color.White);

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date