Introduction to XNA: The Microsoft 2D and 3D Game Development Platform

Figure 1 - The Star Trek Enterprise on a Mission

Introduction

Although I couldn't name all the episodes, I think I watched every original Star Trek episode that was produced. My fascination with Star Trek didn't end with the original, but continued into the Next Generation. After that, I kinda lost track...Anyway, this month, Microsoft came out with an article in MSDN on the XNA framework, written by Charles Cox and Michael Klucher. I became intrigued and decided to pursue exploring the XNA Framework. In doing so, I created this simple example. Most of the inspiration for this article didn't come from the MSDN article, but from a game called elves revenge on a website called Errolian. By examining this code, I was able to piece together this demonstration of XNA.

Getting Started with XNA

The XNA Framework was created so that any developer could easily put together a game that runs on either Windows or on XBox. The XNA Framework only works on Visual Studio Express, so even if you have Visual Studio Enterprise Team Suite, you'll still need to download Visual Studio Express. The good news is Visual Studio Express is FREE!! XNA is FREE!! XBox is...well...at least you can develop your app for the pc as well.

What Does XNA Stand For? As far as I know XNA is not acronymic, but if I ventured a guess, it stands for (DirectX Next Generation Architecture)

When you install XNA and Visual Studio Express, I think you'll find that if you are already a VS.NET developer, your development experience is almost exactly the same, minus a few cool features. You can begin developing your game right away by choosing File-->New Project and selecting Windows Game. If you want to start with some functionality in your project, you can choose SpaceWar Windows Starter Kit.

Figure 2 - Picking an XNA Template Project

This Template generates the most important class for your XNA Game development, the Game1 class. This class inherits from Microsoft.Xna.Framework.Game, which is essentially the Game Engine that hides some of the messy stuff involved in game development under the hood. In fact, for most of the game development, the only two methods you need to override in this class are the Update method and the Draw Method. The Update method is called every time the game needs to update its game data. And the Draw method...yeah, you guessed it...is called every time the game needs to paint to the screen.

So by now I bet a few dozen questions may have popped into your head.

How do I load my sprite from a bitmap?

How do I move my sprite? Rotate my sprite?

How do I create sound in XNA?

How do I accept input from the keyboard?

How do I detect a collision between sprites?

All these questions, and more will be answered in the paragraphs to follow:

Design

The UML Design of my Star Trek XNA game uses some of the pieces of the framework generated by the XNA wizard, but adds a Sprite class and a SpriteAnimation class. These two classes are the heart of the game design, and allow us to move shapes around the screen. In essence all game components including the ship, the enemy, the weapon, and even the background are all sprites. The EnemyExplosion class inherits from SpriteAnimation. This class plays a frame of the animation after each new game screen update.

Figure 3 - UML Design of Star Trek Demo Reverse Engineered using WithClass

Loading the Images

The images in this game are of type Texture2D. If you want to make a 3D game, you would use Texture3D. Images can be conveniently loaded in an override of the LoadGraphicsContent method of the Game class provided for you in the template. Also provided for you is a ContentManager object in which you can use to load your content. You may also want to create an object called a SpriteBatch, that allows you to later draw your sprites as a batch. The following call allows us to load our graphic file into our sprite:

_photon = new Sprite(_spriteBatch, content.Load<Texture2D>(@"Content\Textures\photon"));

If we had a 3D Mesh we wanted to load, then we just change the template to Texture3D:

_photon = new Sprite(_spriteBatch, content.Load<Texture3D>(@"Content\Textures\photon"));

Note, that in order to load your Content, the bitmaps in the content must be part of the project. I found that even if I had the image in the Content\Textures folder, it wouldn't load the image unless I actually had it as part of the project. This is because, XNA converts all images (and sounds) to its own format. Textures are made into .xnb files and sounds are stuck in a wavebank.

Keyboard Input

Keyboard Input is handled inside the Update method. If we want to respond to the space bar being pressed, we simply get all the keys pressed since the last Update and see if one of them is a space bar. Listing 1 shows the code inside update that checks for a space bar press:

Listing 1 - Checking if the Space Bar is Pressed

protected override void Update(GameTime gameTime) { KeyboardState state = Keyboard.GetState(); Keys[] keys = state.GetPressedKeys(); if (keys.Length > 0) { foreach (Keys nextKey in keys) { if (nextKey == Keys.Space) { if (_weaponState == WeaponState.IDLE) { _photon.Position = new Vector2(_ship.Position.X, _ship.Position.Y); _photon.Angle = _ship.Angle; Sound.Play("photon_torpedo"); } } } }

Moving a Sprite

In order to move a sprite on the screen, we need to update its position or angle. Translation and rotation are handled inside the Update method. The results of the transformation are later shown using the overriden Draw method. Looking at listing 1, we see that we are moving a photon torpedo. We set the initial photon torpedo to be at the coordinates of the Enterprise ship and angle the torpedo in the direction the ship is moving. Our homebrewed sprite class handles the translation of the missle through it's own Update method. The Update method of the Sprite class takes the delta change of position coordinates and the change in the angle and adds it to the sprite's current coordinates:

Listing 2 - Updating your Sprites Position and Angle

public virtual void Update(int dx, int dy, float diff_angle) { _position.X += ((float)dx) * (float)Math.Cos(_angle); _position.Y += ((float)dx) * (float)Math.Sin(_angle); _angle += diff_angle; if (_position.X < 0) _position.X = 0; if (_position.X > 1500) _position.X = 1500; if (_position.Y < 0) _position.Y = 0; if (_position.Y > 1500) _position.Y = 1500; if (_angle > 6.28) _angle = 0; }

Drawing a Sprite

The sprites are drawn inside the Draw method of the Game object. Drawing is batched through the SpriteBatch object. Listing 3 shows the code needed to draw each of our game objects. Note that we draw different sprites depending upon the state of objects in the game.

Listing 3 - Drawing Our Game Objects