Building your First Mobile Game using XNA 4.0

Let us start by installing all the software we need. XNA Game Studio 4.0 (our development environment) is part of the Windows Phone SDK. You can download the latest version from https://dev.windowsphone.com/en-us/downloadsdk. At the time of writing, the most recent version is 'Windows Phone SDK 7.1'. The setup will install the following applications:

Note that all these applications will enable you to build applications for Windows Phone 7.0 and Windows Phone 7.5. The tools we will use are the Windows Phone Emulator and XNA Game Studio 4.0.

When you already have a version of Visual Studio 2010 installed (Professional for instance), the add-ins for this version will be installed automatically. Make sure you have all service packs installed for that installation version.

After installing the SDK, make sure you install the latest update. This can be downloaded from the same location as the SDK. At the time of writing, the latest update is 'Windows Phone SDK 7.1.1 Update'.

To be able to deploy games to our Windows Phone, we need to register the device. There are three prerequisites:

Once the above is taken care of, we can start registering our Windows Phone. Start by making sure that the date and time are correct and connect your phone to your PC using the USB cable. Zune will start automatically. If it does not start, we need to start it ourselves. If everything went okay, the phone will appear in the 'Device' tab of the Zune software. On the first run, this might take a few minutes, while Windows installs the drivers for the phone.

Next we can open the Windows Phone Developer registration tool we can find by clicking Start | All Programs | Windows Phone SDK 7.1. Once the application has started, you should see the following window:

Once the status says Phone ready, register using your Microsoft account.

Our game class has two fields, a GraphicsDeviceManager field and a SpriteBatch field. The GraphicsDeviceManager class will handle the configuration and management of our graphics card, so we don't have to. The SpriteBatch class we can use to draw 2D graphics.

The constructor is called once at the start of the game. It creates a new GraphicsDeviceManager instance and sets the root directory for our content manager. This property will determine where the content is loaded from when calling Content.Load<>(""). We will use the content manager later on to load content. The constructor also sets the default framerate, being 30 frames per second for Windows Phone.

public MainGame()
{
    graphics = new GraphicsDeviceManager(this);
    Content.RootDirectory = "Content";
    // Frame rate is 30 fps by default for Windows Phone.
    TargetElapsedTime = TimeSpan.FromTicks(333333);
}

We can use the Initialize method to initialize all non-graphics related content and query for services. By default, the Initialize method of the base class gets called. This makes sure all components are initialized as well. Make sure you create your objects before calling Initialize on the base class.

protected override void Initialize()
{
    // TODO: Add your initialization logic here
            
    base.Initialize();
}

We can use the LoadContent method to load our content. This will also be called once per game. In this method, we can use the content manager to load a variety of content—textures, models, and sounds for instance. By default, the spriteBatch field gets instantiated.

protected override void LoadContent()
{
    // Create a new SpriteBatch
    spriteBatch = new SpriteBatch(GraphicsDevice);
}

We can use the UnloadContent method to unload any content. As most of the content we will use, uses the content pipeline, we won't have much use for this method. The UnloadContent method gets called once per game.

protected override void UnloadContent()
{
    // TODO: Unload any non ContentManager content here
}

The Update method will run multiple times, and to be more specific, it will do its best to run 30 times per second (depending on the TargetElapsedTime property). In this method we will perform all calculations we need, such as collision detection, updating positions, playing sound, and gathering input. The method has one argument, an object of type GameTime. This object contains the total amount of time since the game started, as well as the time passed since the last update was called. We will use this object to make sure our game logic is frame rate independent. This means our object will move at the same speed, regardless the current frame rate—for example, if the Update method fails to be executed 30 times per second, we want our hero to move just as fast as if it were executing 30 times per second.

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

Also note that in the Update method, we exit the game when the back button is pressed on the gamepad with index one. The interesting thing here is that the back button of the phone registers as the back button of the gamepad.

As the name suggests, we will use the Draw method to render our objects to the screen. By default, XNA will try to call this method 30 times per second on Windows Phone. Depending on how much you are drawing, this could be less. The method also has a GameTime object as argument, which provides a snapshot of the timing values. The first thing that happens in the method is that the graphics device gets cleared. Each time Draw is called, we render to a render target. A render target can be seen as a 2D image, or a whiteboard. Each time we want to draw a new frame, we need to clear the render target, or wipe the board. The Clear method takes a color as argument, by default cornflower blue. This means our background will be cornflower blue. After clearing our render target, we can draw all our graphics and call Draw on our base class. The default render target is the screen, but we don't have to worry about that just now.

protected override void Draw(GameTime gameTime)
{
    GraphicsDevice.Clear(Color.CornflowerBlue);

    // TODO: Add your drawing code here

    base.Draw(gameTime);
}