Microsoft's XNA Framework provides a powerful set of tools for building both 2D and 3D games for Windows, the Xbox 360, and the Windows Phone platforms. As an extension of the Visual Studio development environment, XNA provides developers with a set of free tools for these environments.
The XNA project templates include an integrated game loop, easy to use (and fast) methods to display graphics, full support for 3D models, and simple access to multiple types of input devices.
In this introductory chapter, we will do the following:
Review the system requirements for XNA development
Install the Windows Phone Tools SDK, which includes Visual Studio Express and the XNA 4.0 extensions
Examine the basic structure of an XNA game by building a simple 2D game
Explore a fast-paced rundown of 2D techniques that will provide a foundation for moving forward into 3D with XNA
Starting out a book on 3D game development by building a 2D game may seem like an odd approach, but most 3D games use a number of 2D techniques and resources, even if only to display a readable user interface to the player.
If you already have an understanding of 2D game development in XNA, you may want to glance over this chapter and proceed to Chapter 2, Cube Chaser – A Flat 3D World, where we begin building our first 3D game.
In order to develop games using XNA Game Studio, you will need a computer capable of running both Visual Studio 2010 and the XNA Framework extensions. The general requirements are as follows:
Component |
Minimum requirements |
Notes |
---|---|---|
Windows Vista SP2 or Windows 7 (except Starter Edition) |
Windows XP is not supported. | |
Shader Model 1.1 support DirectX 9.0 support |
Microsoft recommends Shader Model 2.0 support as it is required for many of the XNA Starter Kits and code samples. The projects in this book also require Shader Model 2.0 support. | |
Visual Studio 2010 or Visual Studio 2010 Express |
Visual Studio 2010 Express is installed along with the XNA Framework. | |
Optional | ||
Windows Phone Development Tools, DirectX 10 or later, compatible video card |
The Windows Phone SDK includes a Windows Phone emulator for testing. | |
Xbox Live Silver membershipXNA Creator's Club Premium membership |
Xbox Live Silver is free. The XNA Creator's Club Premium membership costs $49 for 4 months or $99 for 1 year. |
Originally developed as a separate product, XNA is now incorporated in the Windows Phone SDK. You can still develop games for Windows and the Xbox 360 using the tools installed by the Windows Phone SDK.
If you have an existing version of Visual Studio 2010 on your PC, the XNA Framework templates and tools will be integrated into that installation as well as the Visual Studio 2010 Express for Windows Phone installation that is part of the Windows Phone SDK, which we are going to install now.
To install Windows Phone SDK , perform the following steps:
1. Visit http://create.msdn.com/en-us/home/getting_started and download the latest version of the Windows Phone SDK package. Run the setup wizard and allow the installation package to complete.
2. Open Visual Studio 2010 Express. Click on the Help menu and select Register Product. Click on the Register Now link to go to the Visual Studio Express registration page. After you have completed the registration process, return to Visual Studio 2010 Express and enter the registration number into the registration dialog box.
3. Close Visual Studio 2010 Express.
4. Launch Visual Studio 2010 Express, and the Integrated Development Environment (IDE) will be displayed as shown in the following screenshot:
If you have never used XNA before, it would be helpful to review a number of concepts before you dive into 3D game design. In most 3D games, there will be at least some 2D content for user interfaces, Heads-up display (HUD) overlays, text alerts, and so on. In addition, many 3D game constructions are really evolutions of 2D game concepts.
In order to provide both an overview of the XNA game template and to build a foundation for moving forward into 3D development, we will construct a simple game called Speller. In Speller, the player controls a small square using the keyboard. During each round we will generate a random set of letters, including the letters needed to spell a particular word. The player's job is to navigate through the forest of letters and hit only the correct ones in the right order to spell the indicated word.
By building this game, we will be:
Performing initialization when our game is executed
Adding graphical assets to the game and loading them at run time
Colorizing images and fonts
Handling keyboard input and calculating player movement adjusted for the frame rate
Bounding box collision detection
Keeping and displaying the score
Generating random numbers
That is quite a bit of ground to cover in a very small game, so we had better get started!
To create an XNA project, perform the following steps:
1. In the Visual Studio window, open the File menu and select New Project....
2. Under Project Type, make sure C# is selected as the language and that the XNA Game Studio 4.0 category is selected.
3. Under Templates, select Windows Game (4.0).
4. Name the project
Speller
(this will automatically update the Solution Name).5. Click on OK.
The Speller game's Game1.cs
file, when opened in Visual Studio, would look like the following screenshot:
Two separate projects get created when you start a new XNA Game Studio project in Visual Studio. The first is your actual game project, and the second is a special type of project called a content project. This is shown in the following screenshot:
Any non-code pieces of your game, including graphical resources, sounds, fonts, and any number of other item types (you can define your own content interpreters to read things such as level maps) are added to the content project. This project gets built along with the code in your primary project and the two are combined into a single location with everything your game needs to run.
When the
content project is built, each item is examined by a content importer—a bit of code that interprets the raw data of the content file, a .jpg
image for example, and converts it into a format that can be passed into a content processor. The content processor's job is to convert this file into a managed code object that can be stored on a disk and read directly into memory by XNA's ContentManager
class. These compiled binary files carry the .xnb
file extension and are located, by default, in a subdirectory of your game's executable folder called Content
.
Note
ContentManager
Though its primary job is to load the content resources into memory at runtime, ContentManager
does more than that. Each instance of ContentManager
maintains a library of all of the content that has been loaded. If multiple requests to load the same content file are sent to a ContentManager
instance, it will only load the resource from the disk the first time. The remaining requests are supplied with a reference to the item that already exists in memory.
Out of the box, XNA contains importers/processors for 3D meshes, images, fonts, audio, shaders, and XML data. We will create the content used for Speller with an image editor and the tools built into XNA Game Studio.
To create content assets, perform the following steps:
1. Open Microsoft Paint, or your favorite image creation program, and create a new 16 x 16 image. Fill the image with white color and save the file to a temporary location as
SQUARE.BMP
.2. Switch back to Visual Studio and right-click on the SpellerContent (Content) project in Solution Explorer.
3. Select Add | Existing Item... from the pop-up menu and browse to the
SQUARE.BMP
file. Select it and click on Add to add it to the content project.4. Again, right-click on the content project in Solution Explorer and this time select Add | New Item....
5. In the Add New Item window, select Sprite Font from the window's center pane.
6. Enter
Segoe14.spritefont
as the name of the file and click on Add.7. Close the XML document that appears after
Sprite Font
has been added to the project.
We have now added both an image and a font to our content project. We will see how we load these assets into the game at runtime and how we can use them during gameplay.
Note
Alternatives when adding content
You can also drag-and-drop files directly from Windows Explorer into the Solution Manager pane in Visual Studio to add them to your content project. If you have the full version of Visual Studio, you can add a new bitmap object by selecting Add | New Item... from the project's pop-up menu and selecting Bitmap as the type. The free version of Visual Studio does not support creating bitmaps from within Visual Studio.
The SpriteFont
file that we created in step 6 and the XML document mentioned in step 7 actually load an XML template that describes how the content pipeline should create the resulting .xnb
file. In this case, the default values for the SpriteFont
template are sufficient for our game. This resulted in the Segoe UI Mono font (added to your system when the Windows Phone SDK is installed), with a value of 14 points being used. As we will only be using the standard A to Z character set, we do not need to make any changes to this template for Speller.
Just after the Game1
class declaration in the Game1.cs
file there are two class member declarations:
GraphicsDeviceManager graphics; SpriteBatch spriteBatch;
These two members will provide access to the system's video hardware (graphics
) and an instance of a class that can be used to draw 2D images and text (spriteBatch
). We can add our own member variables here for things we need to keep track of while our game is running.
Just after
the graphics
and spriteBatch
declarations, add the following code snippet to include the new members:
SpriteFont letterFont; Texture2D playerSquare; Vector2 playerPosition; Vector2 moveDirection; int playerScore; Random rand = new Random(); string currentWord = "NONE"; int currentLetterIndex = 99; class GameLetter { public string Letter; public Vector2 Position; public bool WasHit; } List<GameLetter> letters = new List<GameLetter>(); const float playerSpeed = 200.0f;
We have declared all of the member variables we will need for the Speller game. The letterFont
member will hold the sprite font object that we added to the content project earlier, and work in conjunction with the predefined spriteBatch
object to draw text on the screen.
The square image that will represent the player will be stored in the Texture2D
member called playerSquare
. We can use the Texture2D
objects to hold graphics that we wish to draw to the screen using the SpriteBatch
class.
The playerPosition
Vector2
value will be used to hold the positions of the player, while moveDirection
stores a vector pointing in the direction that the player is currently moving. Each time the player picks up a correct letter, playerScore
will be incremented. Hitting an incorrect letter will cost the player one point.
An instance of the Random
class, rand
, will be used to select which word to use in each round and to place letters on the screen in random locations.
In order to keep track of which word the player is currently working on, we store that word in the currentWord
variable, and track the number of letters that have been spelled in that word in currentLetterIndex
.
The letters that are being displayed on the screen need several pieces of information to keep track of them. First, we need to know which letter is being displayed; next, we need to know the position the letter should occupy on the screen. Finally we need some way for our code to recognize that after we have hit an incorrect letter, we lose some of our score for it, but that we may spend several game update frames in contact with that letter and should not lose some of our score more than once for the infraction.
Note
Downloading the example code
You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.
All three pieces of information are wrapped into a child class of the Game1
class called GameLetter
. If we were not intentionally keeping everything in Speller in the Game1
class, we would most likely create a separate code file for the GameLetter
class for organizational purposes. Since Speller will be very straightforward, we will leave it inside Game1
for now.
As the GameLetter
class defines a letter, we need a way to store all of the letters currently on the screen, so we have declared letters
as a .NET List
collection object. A List
is similar to an array in that it can store a number of values of the same type, but it has the advantage that we can add and remove items from it dynamically via the Add()
and RemoveAt()
methods.
Finally, we declare the playerSpeed
variable, which will indicate how fast the player's cube moves around the screen in response to the player's input. This value is stored in pixels per second, so in our case, one second of movement will move the character 200 pixels across the screen.
The Game1
class has a simple constructor with no parameters. An instance of this class will be created by the shell contained in the Program.cs
file within the project when the game is launched.
Note
The Program.cs file
When your XNA game starts, the Main()
method in the Program.cs
file is what actually gets executed. This method creates an instance of your Game1
class and calls the Run()
method, which performs the initialization we will discuss shortly. It then begins executing the game loop, updating and drawing your game repeatedly until the program exits. In many games, we will not have to worry about Program.cs
, but there are some instances (combining XNA and Windows Forms, for example) when it is necessary to make changes here.
By default, the constructor has created an instance of the GraphicsDeviceManager
class to store in the graphics
member, and has established the base directory for the Content
object, which is an instance of the ContentManager
class.
When we build our project, all of the items in the content project are translated into a format specific to XNA, with the .xnb
file extension. These are then copied to the Content
folder in the same directory as our game's executable file.
Our Speller game will not need to make any changes to the class constructor, so we will simply move on to the next method that is called when our game starts.
Once the instance of the Game1
class has been created and the constructor has been executed, the Initialize()
method is executed. This is the only time during our game's execution that this method will execute, and it is responsible for setting up anything in our class that does not require the use of content assets.
The default Initialize()
method is empty and simply calls the base class' Initialize()
method before exiting.
Add the following
code snippet to the Ini
tialize()
method before base:Initialize()
:
playerScore = 0;
The only initialization we need to do is set the player's score to zero. Even this initialization is not strictly necessary, as zero is the default value for an int
variable, but it is a good practice not to assume that this work will have been done for us.
Note
Initialize() versus LoadContent()
In practice, much of a game's initialization actually takes place in the LoadContent()
method
, which we will discuss next, instead of the Initialize()
method. This is because many times the items we want to initialize require content assets in order to be properly created. One common use for the Initialize()
method is to set the initial display area (resolution) and switch into full screen mode.
Add the following code
snippet to the LoadContent()
method:
letterFont = Content.Load<SpriteFont>("Segoe14"); playerSquare = Content.Load<Texture2D>("Square"); CheckForNewWord();
The default Content
object can be used to load any type of asset from our content project into an appropriate instance in memory. The type identifier in angle brackets after the Load()
method name identifies the type of content we will be loading, while the parameter passed to the Load()
method specifies the asset name of the content.
Asset names
can be set via the Properties window in Visual Studio, but would default to the name of the content file, path included, without an extension. Since all of the content objects will be translated into .xnb
files by the content pipeline, there is no need to specify the format that the file was in before it was processed.
In our case, both of our content items are in the root of the content project's file structure. It is possible (and recommended) to create subdirectories to organize your content assets, in which case you would need to specify the relative path as part of the asset name. For example, if the Segoe14
sprite font was located in a folder off the root of the content project called Fonts
, the default asset name would be Fonts\Segoe14
.
Note
Special characters in asset names
If you do
organize your assets into folders (and you should!) your asset names will include the backslash character (\
) in them. Because C# interprets this as an escape sequence in a string, we need to specify the name in the Content.Load()
call as either "Fonts\\Segoe14"
or @"Fonts\Segoe14"
. Two backslashes are treated as a single backslash by C#. Prefacing a string with the @
symbol lets C# know that we are not using escape sequences in the string so we can use single backslash characters. A string prefaced with the @
symbol is called a verbatim string literal.
The last thing our LoadContent()
method does is call the (as yet undefined) checkForNewWord()
method. We will construct this method towards the end of this chapter in order to generate a new word both at the beginning of the game and when the player has completed spelling the current word.
Our game will now enter an endless loop in which the Update()
and Draw()
methods are called repeatedly until we exit the application. By default, this loop attempts to run 60 times per second on the Windows and Xbox platforms, and 30 times per second on the Windows Phone platform.
The Update()
method is used to process all of our game logic, such as checking for and reacting to player input, updating the positions of objects in the game world, and detecting collisions. The Update()
method has a single parameter, gameTime
, which identifies how much real time has passed since the last call to Update()
. We can use this to scale movements smoothly over time to reduce stuttering that would occur if we make the assumption that our update will always run at a consistent frame rate, and code on other system events impacted by the update cycle.
Add the following
code snippet to the Update()
method before base.Update()
:
Vector2 moveDir = Vector2.Zero; KeyboardState keyState = Keyboard.GetState(); if (keyState.IsKeyDown(Keys.Up)) moveDir += new Vector2(0, -1); if (keyState.IsKeyDown(Keys.Down)) moveDir += new Vector2(0, 1); if (keyState.IsKeyDown(Keys.Left)) moveDir += new Vector2(-1, 0); if (keyState.IsKeyDown(Keys.Right)) moveDir += new Vector2(1, 0); if (moveDir != Vector2.Zero) { moveDir.Normalize(); moveDirection = moveDir; } playerPosition += (moveDirection * playerSpeed * (float)gameTime.ElapsedGameTime.TotalSeconds); playerPosition = new Vector2( MathHelper.Clamp( playerPosition.X, 0, this.Window.ClientBounds.Width - 16), MathHelper.Clamp( playerPosition.Y, 0, this.Window.ClientBounds.Height - 16)); CheckCollisions(); CheckForNewWord();
During each frame, we will begin by assuming that the player is not pressing any movement keys. We create a Vector2
value called moveDir
and set it to the predefined value of Vector2.Zero
, meaning that both the x and y components of the vector will be zero.
In order to read the
keyboard's input to determine if the player is pressing a key, we use the Keyboard.GetState()
method to capture a snapshot of the current state of all the keys on the keyboard. We store this in the keyState
variable, which we then use in a series of if
statements to determine if the up, down, left, or right arrow keys are pressed. If any of them are pressed, we modify the value of moveDir
by adding the appropriate vector component to its current value.
After all the four keys have been checked, we will check to see if the value is still Vector2.Zero
. If it is, we will skip updating the moveDirection
variable. If there is a non-zero value in moveDir
, however, we will use the Normalize()
method of the Vector2
class to divide the vector by its length, resulting in a vector pointing in the same direction with a length of one unit. We store this updated direction in the moveDirection
variable, which is maintained between frames.
When we have accounted for all of the possible inputs, we update the player's position by multiplying the moveDirection
by playerSpeed
and the amount of time that has elapsed since Update()
was last called. The result of this multiplication is added to the playerPosition
vector, resulting in the new position for the player.
Before we can assume that the new position is ok, we need to make sure that the player stays on the screen. We do this by using MathHelper.Clamp()
on both the X and Y components of the playerPosition
vector. Clamp()
allows us to specify a desired value and a range. If the value is outside the range, it will be changed to the upper or lower limit of the range, depending on which side of the range it is on. By limiting the range between zero and the size of the screen (minus the size of the player), we can ensure that the player's sprite never leaves the screen.
Finally, we call two functions that we have not yet implemented: CheckCollisions()
and CheckForNewWord()
. We discussed CheckForNewWord()
in the LoadContent()
section, but CheckCollisions()
is new. We will use this method to determine when the player collides with a letter and how to respond to that collision (increase or decrease the player's score, advance the spelling of the current word, and so on).
To draw the visual components of our Speller game , perform the following steps:
1. Alter the
GraphicsDevice.Clear(Color.CornflowerBlue)
call and replaceColor.CornflowerBlue
withColor.Black
to set the background color.2. Add the following code after the call to clear the display:
spriteBatch.Begin(); spriteBatch.Draw(playerSquare, playerPosition, Color.White); foreach (GameLetter letter in letters) { Color letterColor = Color.White; if (letter.WasHit) letterColor = Color.Red; spriteBatch.DrawString( letterFont, letter.Letter, letter.Position, letterColor); } spriteBatch.DrawString( letterFont, "Spell: ", new Vector2( this.Window.ClientBounds.Width / 2 - 100, this.Window.ClientBounds.Height - 25), Color.White); string beforeWord = currentWord.Substring(0, currentLetterIndex); string currentLetter = currentWord.Substring(currentLetterIndex, 1); string afterWord = ""; if (currentWord.Length > currentLetterIndex)afterWord = currentWord.Substring(currentLetterIndex + 1); spriteBatch.DrawString( letterFont, beforeWord, new Vector2( this.Window.ClientBounds.Width / 2, this.Window.ClientBounds.Height - 25), Color.Green); spriteBatch.DrawString( letterFont, currentLetter, new Vector2( this.Window.ClientBounds.Width / 2 + letterFont.MeasureString(beforeWord).X, this.Window.ClientBounds.Height - 25), Color.Yellow); spriteBatch.DrawString( letterFont, afterWord, new Vector2( this.Window.ClientBounds.Width / 2 + letterFont.MeasureString(beforeWord+currentLetterIndex).X, this.Window.ClientBounds.Height - 25), Color.LightBlue); spriteBatch.DrawString( letterFont, "Score: " + playerScore.ToString(), Vector2.Zero, Color.White); spriteBatch.End();
When using
the SpriteBatch
class, any calls to draw graphics or text must be wrapped in calls to Begin()
and End()
. SpriteBatch.Begin()
prepares the rendering system for drawing 2D graphics and sets up a specialized render state. This is necessary because all 2D graphics in XNA are actually drawn in 3D, with the projection and orientation configurations in the render state to display the 2D images properly.
In our case, the only graphical image we are drawing is the square that represents the player. We draw this with a simple call to SpriteBatch.Draw()
, which requires the texture we will use, the location where the texture will be drawn on the screen (relative to the upper-left corner of the display area), and a tint color. Because our square image is white, we could set any color we wish here and the player's square would take on that color when displayed. We will use that to our advantage in just a moment when we draw the text of the word the player is trying to spell.
After the player has been drawn, we loop through each of the letters in the letters
list and use the SpriteBatch.DrawString()
method to draw the letter at its position, using the letterFont
we created earlier. Normally, we will draw the letters in white, but if the player runs into this letter (and it is not the letter they are supposed to hit) we will draw it in red.
Next, we need to display the word that the player is attempting to spell. We display the text Spell: near the bottom center of the display, using the bounds of the current window to determine the location to draw.
In order to colorize the word properly, we need to split the word into different parts as what the player has already spelled, the current letter they are targeting, and the letters after the current letter. We do this using the Substring()
method of the string class, and then draw these three components with different color tints. We utilize the MeasureString()
method
of letterFont
to determine how much space each of these components occupies on the screen so that we can position the subsequent strings properly.
Finally, we display the player's score at the upper-left corner of the screen.
To implement the CheckForNewWord()
and its helper methods, we will perform the following steps:
1. Add the
PickAWord()
method to the end of theGame1
class, afterDraw()
:private string PickAWord() { switch (rand.Next(15)) { case 0: return "CAT"; case 1: return "DOG"; case 2: return "MILK"; case 3: return "SUN"; case 4: return "SKY"; case 5: return "RAIN"; case 6: return "SNOW"; case 7: return "FAR"; case 8: return "NEAR"; case 9: return "FRIEND"; case 10: return "GAME"; case 11: return "XNA"; case 12: return "PLAY"; case 13: return "RUN"; case 14: return "FUN"; } return "BUG"; }
2. Add the
FillLetters()
method to theGame1
class, afterPickAWord()
:private void FillLetters(string word) { Rectangle safeArea = new Rectangle( this.Window.ClientBounds.Width / 2 - playerSquare.Width, this.Window.ClientBounds.Height / 2 - playerSquare.Height, playerSquare.Width * 2, playerSquare.Height * 2); string alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; List<Vector2> locations = new List<Vector2>(); for (int x=25;x < this.Window.ClientBounds.Width - 50;x += 50) { for (int y=25;y < this.Window.ClientBounds.Height - 50;y += 50) { Rectangle locationRect = new Rectangle( x, y, (int)letterFont.MeasureString("W").X, (int)letterFont.MeasureString("W").Y); if (!safeArea.Intersects(locationRect)) { locations.Add(new Vector2(x, y)); } } } letters.Clear(); for (int x = 0; x < 20; x++) { GameLetter thisLetter = new GameLetter(); if (x < word.Length) thisLetter.Letter = word.Substring(x, 1); else thisLetter.Letter = alphabet.Substring( rand.Next(0,26),1); int location = rand.Next(0,locations.Count); thisLetter.Position = locations[location]; thisLetter.WasHit = false; locations.RemoveAt(location); letters.Add(thisLetter); } }
3. Add the
CheckForNewWord()
method to the end of theGame1
class, afterFillLetters()
:private void CheckForNewWord() { if (currentLetterIndex >= currentWord.Length) { playerPosition = new Vector2( this.Window.ClientBounds.Width / 2, this.Window.ClientBounds.Height / 2); currentWord = PickAWord(); currentLetterIndex = 0; FillLetters(currentWord); } }
In step 1, we generate a random number using the Next()
method of the Random
class. Given an integer value, Next()
will return an integer between zero and that number minus one, meaning we will have a return value from zero to fourteen. Using a select
statement, we return the randomly determined word. Note that we should never hit the last return statement in the function, so if we are ever asked to spell the word BUG
, we know something is wrong.
The FillLetters()
method is used to populate the letters
list with letters and their locations on the screen. We could simply generate random locations for each letter, but then this would leave us with the potential for letters overlapping each other, requiring a check as each letter is generated to ensure this does not happen.
Instead, we will generate a list of potential letter positions by building the locations
list. This list will contain each of the possible places on the screen where we will put a letter by spacing through a grid and adding entries every 25 pixels in the x and y directions. The exception is that we define an area in the center of the screen where the player will start and we will not place letters. This allows the player to start each round without being in contact with any of the game letters.
Once we have our list of locations, we clear the letters
list and generate 20 letters. We start with the letters required to spell the target word, pulling letters from the currentWord
string until we reach the end. After that, the letters will come from the alphabet
string randomly. Each letter is assigned one of the locations from the locations
list, and that location is then removed from the list so we will not have two letters on top of each other.
Lastly, the CheckForNewWord()
method checks to see if currentLetterIndex
is larger than the length of currentWord
. If it is, the player's position is reset to the center of the screen and a new word is generated using PickAWord()
. currentLetterIndex
is reset, and the letters
list is rebuilt using the FillLetters()
method.
To complete the Speller project we need to add the CheckCollosions()
method by performing the following steps:
1. Add the
CheckCollisions()
method to theGame1
class afterCheckForNewWord()
:private void CheckCollisions() { for (int x = letters.Count - 1; x >= 0; x--) { if (new Rectangle( (int)letters[x].Position.X, (int)letters[x].Position.Y, (int)letterFont.MeasureString( letters[x].Letter).X, (int)letterFont.MeasureString( letters[x].Letter).Y).Intersects( new Rectangle( (int)playerPosition.X, (int)playerPosition.Y, playerSquare.Width, playerSquare.Height))) { if (letters[x].Letter == currentWord.Substring(currentLetterIndex, 1)) { playerScore += 1; letters.RemoveAt(x); currentLetterIndex++; } else { if (!letters[x].WasHit) { playerScore -= 1; letters[x].WasHit = true; } } } else { letters[x].WasHit = false; } } }
2. Execute the Speller project and play! The following screenshot shows how our game will look when we execute it:
CheckCollisions()
loops backward through the letters
list, looking for letters that the player has collided with. Going backwards is necessary because we will (potentially) be removing items from the list, which cannot be done in a foreach
loop. If we were moving forward through the list, we would disrupt our loop by deleting the current item, which would cause it to skip over the next items in the list. Moving backwards through the list allows us to remove items without adjusting our loop's logic.
In order to determine if we have collided with a letter, we build two rectangles. The first rectangle represents the position and size of the letter we are checking against, by using the letter's Position
value and the size of the letter calculated with MeasureString()
. The second rectangle represents the area occupied by the player's sprite.
The Intersects()
method of the Rectangle
class will return true if these two rectangles overlap at any point. If they do, we know we have hit a letter and need to take action.
If the letter impacted is the next letter in the word that the player is spelling, we increment the player's score and remove the letter from the list. We also advance currentLetterIndex
so that when Update()
next calls CheckForNewWord()
, we will know if this word has been completed.
If the letter is not the player's current target, we check the letter's WasHit
value. If it is false, we have not run into this letter, so we reduce the player's score and mark WasHit
to true. If WasHit
is already true, we simply do nothing so as not to deduct from the player's score multiple times while the player passes over an incorrect letter.
When the rectangles do not intersect, we know we are not currently in contact with this letter, so we set its WasHit
variable to false
. This has the effect that once we leave an incorrect letter, it becomes re-enabled for future collisions (and point deductions).
Speller is a pretty simple game, but could be enhanced to make a more full-fledged game, by including the following, depending on your level of experience with 2D XNA development:
Beginner: Raise the difficulty by increasing the speed of the player's square as they complete each word.
Intermediate: Record the words with a microphone and play those recordings when a new word is generated. Instead of displaying the entire word during the
update()
method, display only the letters that have been spelled so far. This would turn the game into more of an educational kid's game with the player having to spell out the words they hear.
As a quick-fire introduction to a number of essential XNA topics, Speller covers quite a bit of ground. We have a functional game that accepts player input, draws graphics and text to the screen, generates a random playfield of letters, and detects player collision with them. We got an overview of the structure of an XNA game and the basic Update()
/Draw()
game loop.
As we will see, many of these concepts translate into a 3D environment with very little need for modification, other than the need to keep track of positions and movement with an extra dimension attached. We will utilize the Vector3
objects instead of the Vector2
objects, and we will still rely on a 2D plane for much of the layout of our game world.
Additionally, although much of the work in the following chapters will take place with 3D drawing commands and constructs, we will still be returning to the 2D SpriteBatch
and SpriteFont
classes to construct interface elements and convey textual information to the player.