XNA 4.0 Game Development by Example: Beginner's Guide - Visual Basic Edition: Create your own exciting games with Visual Basic and Microsoft XNA 4.0

You have now successfully installed the Windows Phone SDK, which includes Visual Studio 2010 Express, the XNA Extensions for Visual Studio, and the re-distributable Font Pack provided by Microsoft for XNA developers.

Each of the XNA project templates is a series of files and settings that get copied to your new project folder. Included in this set of files is the Game1.vb file, which is the heart of your XNA game.

The most basic XNA game will have all of its code contained in the file called Game1.vb. This file is generated when you create a new project and contains override declarations for the methods used to manage your game. In addition to the Game1 class' declarations area, there are five primary methods that you will customize for any XNA project.

Private WithEvents graphics As GraphicsDeviceManager
Private WithEvents spriteBatch As SpriteBatch

These are all the variables you will need for the SquareChase MINI-GAME. Here is a quick breakdown:

The XNA templates define an instance of the Microsoft.Xna.Framework.Game class with the default name Game1 as the primary component of your new game. Slightly more goes on behind the scenes, as we will see when we add an XNA game to a Windows form in Chapter 8, Gemstone Hunter: Put on your Platform Shoes, but for now, we can consider the Game1 constructor as the first thing that happens when our XNA game is executed. The class constructor is identified as Public Sub New(), and by default, the constructor contains only two lines:

graphics = New GraphicsDeviceManager(Me)
Content.RootDirectory = "Content"

For most of the games in this book, we will not need to make extensive modifications to the Game1 constructor, as its only job is to establish a link to the GraphicsDeviceManager object, and set the default directory for the Content object, which is used to load images, sound, and other game content.

After the constructor has finished and your XNA game begins to run, the Initialize() method is called. This method only runs once, and the default code created with a new project template simply calls the base version of the method. The Initialize() method is the ideal place to set up features, such as screen resolution, toggling full screen mode, and enabling the use of a mouse in a Windows project. Other game objects that do not rely on external content, such as graphics and sound resources, can also be initialized here.

By default, the mouse is not visible inside the XNA game window. Setting the IsMouseVisible property of the running instance of the Game1 class enables the mouse cursor in Windows.

Part of the responsibility of the base Initialize() method is to call LoadContent() when the normal initialization has completed. The method is used to read in any graphical and audio resources your game will need. The default LoadContent() method is also where the spriteBatch object gets initialized. You will use the spriteBatch instance to draw objects to the screen during execution of the Draw() method.

To load content, it must first exist. In steps 1 and 2 mentioned previously, you created a bitmap image for the square texture. In step 3, you added the bitmap image as a piece of content to your project.

Finally, in step 4, you used the Content instance of the ContentManager class to load the image from disk and into memory when your game runs. The Content object is established automatically by XNA for you when you create a new project. When we add content items, such as images and sound effects to our game project, the XNA Content Pipeline converts our content files into an intermediate format that we can read through the Content object. These XNB files get deployed alongside the executable for our game to provide their content data at runtime.

The Content object's Load() method requires us to specify what kind of data we are loading by including Of along with the data type in parenthesis before the parameters that are passed to the method. In this case, the content we are loading is a Texture2D, which represents a 2D image. Finally, we specify the asset name of the item we wish to load from the content project. The default asset name is the same as the filename, without the file extension.

Once LoadContent() has finished doing its job, an XNA game enters an endless loop in which it attempts to call the Update() method 60 times per second. This default update rate can be changed by setting the TargetElapsedTime property of the Game1 object, but for our purposes, the default time step will be fine. If your Update() logic begins taking too long to run, your game will begin skipping calls to the Draw() method in favor of multiple calls to Update(), to attempt to catch up to the current game time.

All of your game logic gets built into the Update() method. It is here that you check for player input, move sprites, spawn enemies, track scores, and everything else except draw to the display. Update() receives a single parameter called gameTime, which can be used to determine how much time has elapsed since the previous call to Update() or to determine if your game is skipping Draw() calls by checking its IsRunningSlowly property.

The default Update() method contains code to exit the game if the player presses the Back button on the first gamepad controller.

The first thing the Update() routine does is check to see if the current square has expired, by checking to see if timeRemaining has been reduced to zero. If it has, a new square is generated using the Next() method of the rand object. In this form, Next() takes two parameters: an (inclusive) minimum value and a (non-inclusive) maximum value. In this case, the minimum is set to 0, while the maximum is set to the size of the Me.Window.ClientBounds property minus 25 pixels. This ensures that the square will always be fully within the game window.

The square that is generated represents both the location and size of the square that we will draw shortly. Because we are drawing a solid color, the texture and the square do not need to be the same size. When we draw the square, XNA will stretch the 16x16 texture to fill the 25x25 square. If we were drawing a detailed image instead of a colored square, we would need to take this scaling into account to avoid visual artifacts or odd stretching when drawing the texture.

Next, the current position and button state of the mouse is captured into the mouseInfo variable through Mouse.GetState(). Both the Keyboard and the GamePad classes also use a GetState() method that captures all of the data about that input device when the method is executed.

If the mouse reports that the left button is pressed, the code checks with the currentSquare object by calling its Contains() method to determine if the mouse's coordinates fall within its area. If they do, then the player has "caught" the square and scores a point. The timeRemaining counter is set to 0, indicating that the next time Update() is called, it should create a new square.

After dealing with the user input, the MathHelper.Max() method is used to decrease timeRemaining by an amount equal to the elapsed game time, since the last call to Update(). Max() is used to ensure that the value does not go below zero.

Finally, the game window title bar is updated to display the player's score.

The final method in the default Game1.vb file is responsible, not surprisingly, for drawing the current game state to the display. Draw() is normally called once after each call to Update(), unless something is happening to slow down the execution of your game. In that case, Draw() calls may be skipped in order to call Update() more frequently. There will always be at least one call to Update() between calls to Draw(), however, as sequential Draw() calls would provide no benefit—nothing in the game state will have changed.

The default Draw() method simply clears the display window to the Cornflower Blue color.

Any time you use a SpriteBatch object to draw to the display, you need to wrap the calls inside a Begin() and End() pair. Any number of calls to spriteBatch.Draw() can be included in a single batch, and it is common practice to simply start a Begin() at the top of your Draw() code, use it for all of your drawing, and then End() it right before the Draw() method exits. While not benefiting our SquareChase game, batching sprite drawing calls greatly speeds up the process of drawing a large number of images, by submitting them to the rendering system all at once instead of processing each image individually.

The SpriteBatch.Draw() method is used to draw a Texture2D object to the screen. There are a number of different options for how to specify what will be drawn. In this case, the simplest call requires a Texture2D object (squareTexture), a destination Rectangle (currentSquare), and a tint color to apply to the sprite. The expression "playerScore Mod 3" takes the player's score, divides it by 3, and returns the remainder. The result will always be 0, 1, or 2. This fits perfectly as an index to the elements in the colors array, allowing us to easily change the color of the square each time the player catches one.

Finally, the spriteBatch.End() tells XNA that we have finished queuing up sprites to draw and it should actually push them all out to the graphics card.

You just finished your first XNA game, that's what!

Granted, it is not exactly the next blockbuster, but at only around 30 lines of code, it implements a simple game mechanic, user input, score tracking and display, and clock-based timing. Not bad for a few minutes' work.

As simple as it is, here are a couple of enhancements you could make to SquareChase: