In case you haven’t been closely following the ever-changing mobile market, you may have missed the news that Microsoft is releasing their own smartphone probably close to the christmas 2010 holidays (very speculative on exact dates right now).

Named “Windows Phone 7″, the technical team have seemingly done a tremendous job of cleaning up the current confusion around programming and deploying apps to a Windows mobile device. At last count, there were 4 or 5 SDK’s for mobile development and each one seemed to have their own strengths and weaknesses.

Microsoft has done away with all this for WP7 (thank heavens!)

The XNA framework currently available for the PC and XBox360, will now be extended to support Zune and WP7 devices! This is tremendous news for game and app developers everywhere!

Getting Started

Before we can start cranking out some apps for WP7, you’ll need to:

1. grab the April refresh of the VS2010 Express for Windows Phone. Go ahead and install it.
2. check out the code samples for Windows Phone development
3. We’re interested specifically in the “Hello XNA Framework Sample”
4. Unzip and open with the new VS2010 Express
5. You should be able to launch a debug session via the IDE which will pop open the Windows Phone 7 emulator. You should see two squares bouncing around with a sound effect if they touch each other.

hello xna framework output

To make sure we’re on the same starting point, let’s take a look at the sample code. All of the magic for the basic application is happening inside the Game1.cpp file.

Let’s start with the required dependencies for building a windows phone 7 app based on the XNA 4.0 framework.

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.Input.Touch;
using Microsoft.Xna.Framework.Media;

If you’ve seen previous XNA based code before then this should be nothing really strange. One of the new references to note is Microsoft.Xna.Framework.Input.Touch which will help us handle (and query) the touch screen interface of the WP7 device.

namespace HelloXnaFramework
{
    ///

    /// This is the main type for your game
    /// 

    public class Game1 : Microsoft.Xna.Framework.Game
    {
         /* our graphics device */
        GraphicsDeviceManager graphics;

        /* our sprite rendering manager */
        SpriteBatch spriteBatch;

        /* texture object */
        Texture2D texture1;

        /* texture object */
        Texture2D texture2;

        /* (x,y) vector for tracking position */
        Vector2 spritePosition1;

        /* (x,y) vector for tracking position */
        Vector2 spritePosition2;

        /* (x,y) vector for holding the sprite speed */
        Vector2 spriteSpeed1 = new Vector2(50.0f, 50.0f);

        /* (x,y) vector for holding the sprite speed */
        Vector2 spriteSpeed2 = new Vector2(100.0f, 100.0f);

        /* height of sprite1 */
        int sprite1Height;

        /* width of sprite1 */
        int sprite1Width;

        /* height of sprite2 */
        int sprite2Height;

        /* width of sprite2 */
        int sprite2Width;

        /* sound effect object */
        SoundEffect soundEffect;

We’re declaring our game class Game1 by inheriting from the Microsoft.Xna.Framework.Game object. This is standard, and you’ll have to do this for any XNA4.0 based project.

Next we have a few object instance declarations. Everything is incredibly readable, but I’ve added some comments to help you out with any “grey” areas.

public Game1()
{
    /* create graphics handle to our display device */
   graphics = new GraphicsDeviceManager(this);
   Content.RootDirectory = "Content";

   // Frame rate is 30 fps by default for Windows Phone.
  TargetElapsedTime = TimeSpan.FromTicks(333333);

   // Pre-autoscale settings.
   graphics.PreferredBackBufferWidth = 480;
   graphics.PreferredBackBufferHeight = 800;
}

Here’s the constructor method for the Game1 object. During initialization of the XNA Framework, the proper display device will be chosen for you automagically. This becomes extremely useful when you’re attempting to port your XNA project across multiple (windows-based) devices.

The framerate will be “locked” on this Game1 sample at 30 frames per second. If we’re holding our WP7 vertically, then the graphics screen is sized at 480×800 (which means if you flip the device horizontally, the display effectively becomes 800×480).

///

/// LoadContent will be called once per game and is the place to load
/// all of your content.
/// 

protected override void LoadContent()
{
  // Create a new SpriteBatch, which can be used to draw textures.
  spriteBatch = new SpriteBatch(GraphicsDevice);

  /* load our two Texture2D objects using the GameThumbnail image */
  texture1 = Content.Load("GameThumbnail");
  texture2 = Content.Load("GameThumbnail");

  /* load the "Windows Ding" media */
  soundEffect = Content.Load("Windows Ding");

  /* set the position for sprite1 */
  spritePosition1.X = 0;
  spritePosition1.Y = 0;

  /* set the starting position for sprite2 */
  spritePosition2.X = graphics.GraphicsDevice.Viewport.Width
        - texture1.Width;

  spritePosition2.Y = graphics.GraphicsDevice.Viewport.Height
        - texture1.Height;

  /* for collision detection, set the "bounds" of our
   * sprite1 and sprite2 objects
   */
  sprite1Height = texture1.Bounds.Height;
  sprite1Width = texture1.Bounds.Width;

  sprite2Height = texture2.Bounds.Height;
  sprite2Width = texture2.Bounds.Width;
}

The overrided LoadContent() method is required in every XNA-based game and should be used to load and/or initialize all of our media, data structures and other game objects. First you need to create the SpriteBatch object based on the chosen GraphicsDevice on our system. Next we’re loading up our two Texture2D objects using the “GameThumbnail” resource. After which, the program is loading the SoundEffect which will be played when our sprite1 and sprite2 collide with each other. Finally, to help us perform proper collision detection calculations, the code sets the width and height of sprite1 and sprite2.

///

/// Allows the game to run logic such as updating the world,
/// checking for collisions, gathering input, and playing audio.
/// 

///
Provides a snapshot of timing values.
protected override void Update(GameTime gameTime)
{
   // Allows the game to exit
   if (GamePad.GetState(PlayerIndex.One).Buttons.Back ==
     ButtonState.Pressed)
    this.Exit();

    // Move the sprite around.
    UpdateSprite(gameTime, ref spritePosition1, ref spriteSpeed1);
    UpdateSprite(gameTime, ref spritePosition2, ref spriteSpeed2);
    CheckForCollision();

    base.Update(gameTime);
}

The Update() function is also critically important to our XNA game. During the application’s main loop within the XNA framework the update method is called once-per-frame. At a bit of a higher level, we are passing references to both sprite1 and sprite2 in the UpdateSprite() method. As you might be able to guess, this method handles the updates to the position of the object based on the current gameTime variable. The gameTime variable is the current state of the internal “heartbeat” timer within XNA. To make sure your game objects update properly, you should be using this variable whenever you’re updating the position of an entity. Finally the collision detection method is executed to check if our sprite1 and sprite2 objects have hit each other.

void CheckForCollision()
{
  BoundingBox bb1 = new BoundingBox(
    new Vector3(spritePosition1.X - (sprite1Width / 2),
    spritePosition1.Y - (sprite1Height / 2), 0),
    new Vector3(spritePosition1.X + (sprite1Width / 2),
    spritePosition1.Y + (sprite1Height / 2), 0));

    BoundingBox bb2 = new BoundingBox(
      new Vector3(spritePosition2.X - (sprite2Width / 2),
      spritePosition2.Y - (sprite2Height / 2), 0),
      new Vector3(spritePosition2.X + (sprite2Width / 2),
      spritePosition2.Y + (sprite2Height / 2), 0));

     if (bb1.Intersects(bb2))
    {
      soundEffect.Play();
    }

}

This is a very simple and straightforward way of performing collision detection within your XNA-based game! First, the application is creating a BoundingBox instance which surrounds sprite1 and sprite2. A bounding box is a data structure within a game which provides an estimate for any collisions. Imagine a rectangle / cube around sprite1 and sprite2. To determine if sprite1 has struck sprite2, the application just needs to test each rectangle for any intersection points. Finally, if these two bounding boxes have collided, then play our sound effect using Play().

///

/// This is called when the game should draw itself.
/// 

///
Provides a snapshot of timing values.
protected override void Draw(GameTime gameTime)
{
  graphics.GraphicsDevice.Clear(Color.CornflowerBlue);

  // Draw the sprite.
  spriteBatch.Begin(SpriteSortMode.BackToFront, BlendState.AlphaBlend);
  spriteBatch.Draw(texture1, spritePosition1, Color.White);
  spriteBatch.End();

  spriteBatch.Begin(SpriteSortMode.BackToFront, BlendState.Opaque);
  spriteBatch.Draw(texture2, spritePosition2, Color.Gray);
  spriteBatch.End();

  base.Draw(gameTime);

}

The final method we need to examine in the HelloXNAFramework is the actual Draw() functionality. At a higher level, the goal of our drawing routine (in any game) is to: draw each and every object that belongs on the screen. In XNA-based projects, to properly draw each object, you need to make sure that the application is using the SpriteBatch instance. To make sure the SpriteBatch object is properly used, you should follow the same sequence for every object you need drawn in a scene:

1. SpriteBatch.Begin(sorting state of the object, any blending information)
2. Draw the sprite itself using Draw()
3. Call SpriteBatch.End() to finish itself up

That’s really all there is to this little XNA-based application. Notice how we really didn’t need any WP7 specific object instances?

If you need any help, please leave a comment

{ 0 comments }