MIX: XNA on Windows Phone

Having XNA on Windows Phone 7 Series is just awesome. There is nothing like being able to run your game on a small shiny device to make you smile.

Having the Windows Phone Developer Tools Preview I decided to explore just how hard it was to get some of my existing games going on Windows Phone 7 Series.

The first obvious candidates to play with are the 2D and 3D tutorial projects available on If you are completely new to XNA development I encourage you to work through both tutorials – you’ll have two classic games running in under a couple of hours. If you’d prefer, you can download the source code for the tutorials – then you need to upgrade it to Visual Studio 2010 and GS 4.0, to make it work on the Windows Phone.

To get existing projects migrated to the new Windows Phone platform takes a couple of steps. First, previous versions of XNA (3.0 or 3.1 for example) are not supported in Visual Studio 2010. So just trying to use the normal Visual Studio solution upgrade wizard isn’t going to work. Your solution gets upgraded but all your 3.x projects are rejected as not supported on the platform.

To upgrade older XNA solutions you simply have to create new games projects in VS 2010. Then add the existing code files and content into the new project. Note, that under Games Studio 4.0 the content project – which provides XNA’s powerful content pipeline functionality – is seen as a separate project to the code project rather than an integrated one (as it was in previous XNA versions).

For the two tutorial games all you have to do is change the viewport.rectangle:

  1. //drawable area of the game screen.
  2. viewportRect = new Rectangle(0, 0, 800, 480);

To match the dimensions of the Windows Phone. Then change the hardcoded coordinates for some of the game elements.

In the 2D game this is just the cannon position:

  1. cannon.position = new Vector2(30, 460);

In the 3D game you need change the camera position and look at target. I used these values just to be quick:

  1. Vector3 cameraPosition = new Vector3(0.0f, 60.0f, 100.0f);
  2. Vector3 cameraLookAt = new Vector3(0.0f, 50.0f, 0.0f);

The other Windows Phone specific thing is the target framerate:

  1. // Frame rate is 30 fps by default for Windows Phone.
  2. TargetElapsedTime = TimeSpan.FromSeconds(1 / 30.0);

On the Windows Phone you have to specify the slower target rate of 30fps to match the capability of the device. On Windows and the Xbox you’d be doubling this to 60fps.

Building the games is very simple, and pretty easy to understand – they are just simple games. But what you have just done is build a game that can now run not only on the Windows Phone, but also on the Xbox 360 and on Windows PCs.

image By simply right-clicking on your Windows Phone project in the Solution Explorer you can select ‘Create copy of project for’ Windows or Xbox 360. You can then start each specific project as a new debug instance (one at a time, and assuming you have completed your pairing with an Xbox 360!).

The same code runs across all three platforms! Of course our modified cannon and camera positions make the games a bit odd looking on the non-Windows Phone platforms, by by using the conditional compilation symbols: WINDOWS_PHONE, WINDOWS or XBOX you can tailor these platform specific elements as necessary. For example:

  2.         Vector3 cameraPosition = new Vector3(0.0f, 60.0f, 100.0f);
  3.         Vector3 cameraLookAt = new Vector3(0.0f, 50.0f, 0.0f);
  4. #endif
  6. #if WINDOWS
  7.         Vector3 cameraPosition = new Vector3(0.0f, 60.0f, 60.0f);
  8.         Vector3 cameraLookAt = new Vector3(0.0f, 50.0f, 0.0f);
  9. #endif
  11. #if XBOX
  12.         Vector3 cameraPosition = new Vector3(0.0f, 60.0f, 60.0f);
  13.         Vector3 cameraLookAt = new Vector3(0.0f, 50.0f, 0.0f);
  14. #endif

At present the preview emulator doesn’t support orientation of the game automatically. So if you can write your game for the Portrait format of the device your fine.

If you need landscape orientation (which to be honest is more typical of games) then you can a) be patient and wait for the full tools beta to come out, b) use the RenderTarget2D trick.

For b) I borrowed Nick Gravelyn’s ZuneLib code and upgraded it for Windows Phone. The code provides a LandScapeGame and a PortraitGame class to correctly orientate your game, but also adjust your touch screen input details to work seamlessly across the orientated device.

You see, you can define areas of the touch screen to represent different functions, but all your rectangle definitions need to be redefined the moment you change orientations. Well Nick’s code sorts all this out, and the only upgrade I had to do was change the references for the touch library from the Zune to the Windows Phone (Microsoft.Xna.Framework.Input.Touch).

My new WindowsLib is available here, it works ok, but as your game gets more sophisticated this last step starts to drop frames causing jumpy animations. We can expect much better things in later emulator builds and on the real device.

If you just want the to look at the modified games you can get the source here.

Digg This

» Trackbacks & Pingbacks

    No trackbacks yet.
Trackback url for this post:

» Comments

    No comments yet. Be the first to comment!

» Leave a Comment