Creating an XNA Game from the Template

Creating an XNA Game from the Template


Now that XNA Game Studio is installed, we are ready to start making our game. Luckily, someone at Microsoft was thinking, and they made a pretty nice template for us to use to get started with our game. In this tutorial, we will look at how to create a new game using this template. After running our game for the first time, we will go back and take a look at the code in the template so that we understand what was created.

Using the Template

Using the template is fairly easy. When XNA Game Studio is opened, the Start Page will come up by default. Look in the upper left corner for a small link that says New Project… and push it.


This will open up the New Project dialog. In this dialog, we will do three things to get our project started. First, in the Installed Templates list, choose the XNA Game Studio 4.0 group. Second, in the list in the middle, choose the Windows Game (4.0). Finally, at the bottom of the dialog, give your project a name, as shown in the image below.


When you are done with these things, click the OK button to tell Visual Studio to build your project. After a moment, your project will appear on the screen, with the main game file opened for you to begin editing.

Running the Game

The nicest thing about the template is that the game is ready to run right away. You don't have to do anything else. So let's go ahead and run our game for the first time. To do this, go to the Debug menu and choose either Start Debugging or Start Without Debugging. Notice that they both have keyboard shortcuts (F5 and Ctrl+F5), which might be worth remembering, since you will be performing this command a lot.


After Visual Studio compiles your program, the game will start running and you should see the game appear.

If it doesn't work, and you see an error message that says something along the lines of "No suitable graphics card found. Could not find a Direct3D device that supports the XNA framework HiDef profile…" then jump down to the Handling the HiDef Profile Error section below, and come back when you've made the needed changes.

When the game runs, it should look like the window below:


The game comes up as a window, filled with a blue background. At this point, it doesn't really do anything, but this takes care of a lot of work that we would have to do ourselves if we weren't using XNA.

At this point, you might be wondering why the background is blue. More specifically, the color is cornflower blue. For starters, you need to pick some color to clear the screen with. But why cornflower blue? Why not black or white? There is actually a fairly good reason for this.

Allow me to share a personal experience to help explain. Several years ago, I was starting to make a game. At this point, I was only trying to draw a simple 3D model on the screen. However, the model wasn't being drawn. I was really confused for a very long time. Finally, after a while, I realized that the model was actually being drawn, but I had forgotten to turn on the lights in the game. So the entire model was black, and the background was black.

Black backgrounds can make it difficult to see what is going wrong. The same thing is true for white. So they pick a default color that isn't likely to cause problems, like cornflower blue. So why not red, green, or Papaya Whip? Well, at this point, it is kind of an arbitrary decision. Some say that this color is a reference to the movie Fight Club, but the XNA developers claim that it is just a color they liked.

Handling the HiDef Profile Error (HiDef Profile vs. Reach Profile)

On lots of computers, you may get an error that says the following:

No suitable graphics card found.

Could not find a Direct3D device that supports the XNA Framework HiDef profile.

Verify that a suitable graphics device is installed.

Make sure the desktop is not locked, and that no other application is running in full screen mode.

Avoid running under Remote Desktop or as a Windows service.

Check the display properties to make sure hardware acceleration is set to Full.

One way to fix this is to follow the instructions on the error message. There may be some sort of setting that you can change that will fix this problem. But for many people, that's not the issue.

Another choice that seems to work for everybody is to change from the HiDef profile to the Reach profile. XNA has two different profiles. The HiDef profile allows you to access all of the most powerful functions, while the Reach profile limits you, but allows you to "reach" more platforms, like the Windows 7 Phone. By the way, the Reach profile seems to be enough for everything on this site, so you don't really have anything to worry about with switching over to the Reach profile.

To make the switch, go over to the Project Explorer, and right-click on your project ("WindowsGame1" if you didn't change the default name) and click on Properties in the context menu. This will open up the project properties in a new window. On the left side, make sure that the XNA Game Studio tab is selected. On that page, you'll see "Game profile:" with two options, one to use Reach, and one to use HiDef. Choose the Reach option, and re-run your program. It should work now!

Understanding the Generated Code

Well now that we've seen our game running, let's go back and take a look at the code that was generated for us from the template. For starters, if you look on the right side of the screen, you will see the Solution Explorer. This shows us what files and stuff are included in our game. You will see here that in our program, there are two source code files, Program.cs and Game1.cs (along with a few other items). Program.cs is just the entry point to the application, which just creates a new instance of our game and runs it. You can double-click on the file in the Solution Explorer to see the file, but you will probably not need to modify this file at all.

The Game1.cs file is more interesting. We will look at each of the parts of this file in turn, below.

Using Directives

The first several lines of code are all using directives. These tell the compiler that we want to use various pre-existing components that have been made elsewhere.

using System;
using System.Collections.Generic;
using System.Linq;
using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Audio;
using Microsoft.Xna.Framework.Content;
using Microsoft.Xna.Framework.GamerServices;
using Microsoft.Xna.Framework.Graphics;
using Microsoft.Xna.Framework.Input;
using Microsoft.Xna.Framework.Media;

Class Declaration and Instance Variables

The next section is where we define our class and create instance variables that belong to our game.

    public class Game1 : Microsoft.Xna.Framework.Game
        GraphicsDeviceManager graphics;
        SpriteBatch spriteBatch;

You can see that our game class is called Game1. Eventually, you will probably want to rename this to something else, which can be easily done by right clicking on the text and choosing Refactor > Rename. Renaming the class this way will tell Visual Studio to go through all of our code and find any places where our class is used and rename it there as well.

You'll also notice that our class extends the XNA Game class. This means that our game has all of the properties and abilities of any XNA Game.

The template gives us two instance variables: graphics, which is what we use to do our drawing with, and spriteBatch, which handles 2D rendering. We will use both of these in depth later on.

The Constructor

        public Game1()
            graphics = new GraphicsDeviceManager(this);
            Content.RootDirectory = "Content";

The constructor is where the game gets set up. It is pretty simple, right now, and only needs to prepare our instance variables to be used later.

The Initialize() Method

        protected override void Initialize()
            // TODO: Add your initialization logic here

This is the method where we can do initialization of non-graphics related components of our game, such as services.

The LoadContent() and UnloadContent() Methods

        protected override void LoadContent()
            // Create a new SpriteBatch, which can be used to draw textures.
            spriteBatch = new SpriteBatch(GraphicsDevice);
            // TODO: use this.Content to load your game content here
        protected override void UnloadContent()
            // TODO: Unload any non ContentManager content here

These two methods are where we will load all of our graphics related content, such as 3D models, background images, and fonts. We will talk about this more later, in the Managing Content tutorial.

The Update() Method

        protected override void Update(GameTime gameTime)
            // Allows the game to exit
            if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)
            // TODO: Add your update logic here

This method is an important part of the game. This is where we update our game state. For example, this is where we should check to see if a player is pushing a button, and respond accordingly.

The Draw() Method

        protected override void Draw(GameTime gameTime)
            // TODO: Add your drawing code here

This is where you do all of your drawing. This, too, is an important method. Notice that the Update() and Draw() methods have intentionally been separated. This is done on purpose, and it is a good idea to follow this pattern. Try to keep drawing stuff out of the Update() method, and don't put anything in the Draw() method that doesn't directly pertain to drawing.

Also, notice that this is where the background is filled in with the color cornflower blue. It is easy to change that to something else here. The Color class has a lot of colors to choose from, and you are also able to define your own colors as well.

What's Next?

In this tutorial, we have created our first XNA game. It doesn't do much yet, but XNA has made it extremely easy to get to this point. We are now ready to start work on our game. I would recommend going to the Managing Content tutorial next, since many of the other tutorials will expect you to know the basics of working with content.

Troubleshooting.png Having problems with this tutorial? Try the troubleshooting page!