Intro To XNA on Windows Phone Part 1

To get started developing games for Windows Phone you need to have the Windows Phone 7.1 SDK installed. You can get it here. Once you’ve installed this you’ll also want the 7.1.1 update, which you can get here. The update requires the 7.1 SDK to be installed first.

If you’re installing on Windows 8, check out my post about installing the Windows Phone development environment on Windows 8.

In this post we’ll start creating a new XNA game, and begin with the most visible step, and the one people thing of first when they think of game development. We’ll draw something to the screen.

Step 1: Draw Stuff

Let’s start by creating a new XNA game project. Run Visual Studio 2010 with Windows Phone SDK 7.1.1 installed. Select File -> New -> Project and select XNA Game Studio 4.0 and choose Windows Phone Game. We’ll call our game MyFirstGame.

image

Choose to target Windows Phone 7.1, there’s no real reason to target 7.0 anymore.

image

With 7.1 there are many new capabilities with the most important for games being fast app switching, or the ability to resume your game via the back button without reloading everything.

This creates two projects, one for your XNA game and one for your game’s content. Content projects contain any assets for your game, including images, sound effects, 3D meshes, shaders, and level data. Assets that are added to the content project are compiled to a proprietary XNB format that XNA understands so that XNA doesn’t need to know how to deal with the various asset types when the game is running, the heavy lifting is done at compile time.

image

The solution that is generated is a fully functioning game. It doesn’t do a whole lot yet, but helps you to know where your code needs to be added. Run the game in the emulator and you will see the “blue screen of life”, by default you get a Cornflower Blue background and not much else, but at least the back button works.

Run the game and show what it looks like so far.

image

Now one thing you may notice is that the game doesn’t fill the entire screen. It’s kind of hard to see in the emulator, but by default the system tray is displayed, and your game is scaled (letterboxed and preserving aspect ratio) in the remaining space.

To remove the system tray, in the game project, go to Game1.cs. and add the following to the Game1 constructor:

graphics.IsFullScreen = true;

Run the app again and you should see that it fills the entire area.

image

Now it’s time to draw something.

Save this image to your computer. You can do this by clicking on it and then right clicking and save the image. Call it run.png.

Run

In the content project, select Add Existing Item and go to the Assets folder and pick run.png from wherever you saved it to.

Add a field to the Game1 class:

Texture2D player;

and in the LoadContent method after the TODO comment add the following:

player = Content.Load<Texture2D>("run");

The text “run” is the asset name of the content we want to load. By default this is the filename without the extension, but you can change this in the properties pane for the content item.

In the Draw method, add the following to draw the texture:

spriteBatch.Begin();
spriteBatch.Draw(player, new Vector2(80, 300), Color.White);
spriteBatch.End();

When drawing using SpriteBatch, you need to make sure that for every Begin of the SpriteBatch that you have a corresponding End. You should also limit the number of Begin and End calls that you do, but you can do as many Draw calls as you want between a single Begin and End. It’s not a big deal to have a few Begins and Ends but don’t have one per draw call, since most of the overhead when drawing is in the End call because this is where the graphics are actually rendered.

Run the game. It should look like this:

image

One thing you’ll notice is that the texture is being drawn sideways.

By default XNA apps are in landscape mode on the phone. You can change this by adding the following to the Game constructor:

graphics.PreferredBackBufferWidth = 480;
graphics.PreferredBackBufferHeight = 800;

 

By specifying a height that is larger than the width, XNA automatically determines that it should be in portrait mode.

image

There’s another neat trick when it comes to the back buffer width and height and XNA on the phone. The phone resolution of 800×480 is almost 400,000 pixels. Drawing this many pixels can potentially impact the performance of your game, especially if drawing a lot of big textures. You can automatically scale the game using hardware scaling by specifying smaller values for the preferred width and height. By specifying values of half the native size you end up drawing one quarter of the pixels that you do in full resolution. Of course, all of your textures will be scaled up too, so you’re sacrificing level of detail for performance, but if you need it, it’s good to have it available. Change the constructor code as follows:

graphics.PreferredBackBufferWidth = 240;
graphics.PreferredBackBufferHeight = 400;

 

Run the app and it should look like this:

image

Everything is now double size. Now that we’ve had fun with orientation and scaling, let’s remove the code to set the width and height and go back to displaying it in landscape mode. We can also rotate the emulator so that it’s displaying in landscape mode on the screen.

image

Here is the source code for everything up to this point: http://www.billreiss.com/wp-content/uploads/2012/04/MyFirstGame_part1_completed.zip

In the next post we’ll look at drawing a single frame of this image and how to draw different frames over a period of time.

  • kanchirk

    Wow!!! Excellent introduction article.

    Looking forward to the next.

    Krk