Configuring and testing icon images in XNA Game Studio 4.0 Windows Phone games

  • Article

Michael Klucher wrote a blog post earlier this week that included some information about Windows Phone icon sizes for games and applications.  I wanted to provide a little more information about where each icon image is used and also give some suggestions for how to test your game icons in the emulator.  Here is a summary of what this blog post covers:

  • Windows Phone 7 icon types
  • Windows Phone 7 icon sizes
  • Configuring your project as an application or a game
  • Deployment details for games
  • Deployment details for applications
  • Updating icons in an XNA Game Studio 4.0 Windows Phone game project
  • How to test a game’s application icon in the emulator

Windows Phone 7 icon types

The Windows Phone Developer Tools allows you to configure 2 different types of application icons:

  1. The application icon – this is the icon used in the location that your application is deployed to on the phone OS (Games Hub for games, the Application List for applications)

    In a Silverlight for Windows Phone project, this is named ApplicationIcon.png by default.  In an XNA Game Studio 4.0 Windows Phone project, this is named GameThumbnail.png by default. 
     

  2. The pinned icon – this is the icon used in the Windows Phone 7 start menu if you click and hold on your application icon in Games Hub or the Application List and choose “pin to start”

    In both Silverlight for Windows Phone projects and XNA Game Studio 4.0 Windows Phone projects, this is named Background.png by default.

Windows Phone 7 icon sizes

The Windows Phone 7 OS displays application icons in 2 different sizes, depending on where they appear:

  1. 62x62 – this is the size used in the Application List (the list that appears when you click the right arrow on the top right side of the Windows Phone 7 start menu).
  2. 173x173 – this is the size used in the Games Hub and in the start menu

Configuring your project as an application or a game

The location that your application appears in the Windows Phone 7 OS depends on whether you have configured it to be an application or a game.  During development, this setting is controlled by the Genre value in the file \Properties\WMAppManifest.xml.  When you get ready to submit your application or game to the Windows Phone Marketplace, you will be asked in a web form whether it is an application or a game.  The ingestion process will take the value that you select there and overwrite whatever you list in the file \Properties\WMAppManifest.xml in the project you submit.

The technology used to create the application or game does not matter.  In other words, although the default experience is to create games with XNA Game Studio and applications with Silverlight, you can also create applications with XNA Game Studio and games with Silverlight if you want to.

Deployment details for games

  1. To configure your application as a game, set the Genre value in \Properties\WMAppManifest.xml to “Apps.Games”. 
  2. Games will deploy to the Games Hub in the Windows Phone 7 OS
  3. Games should use 173x173 icons for both the application icon and the pinned icon (ideally, the same icon)

Deployment details for applications

  1. To configure your application as an application, set the Genre value in \Properties\WMAppManifest.xml to “Apps.Normal”.
  2. Applications will deploy to the Application List in the Windows Phone 7 OS
  3. Applications should use a 62x62 icon for the application icon and a 173x173 icon for the pinned icon

Updating icons in an XNA Game Studio 4.0 Windows Phone game project

The default project templates for both Silverlight for Windows Phone and XNA Game Studio 4.0 Windows Phone projects in the Windows Phone Developer Tools use the settings for applications, not games.  When you are ready to configure your XNA Game Studio 4.0 project as a game and update the icons, there are a couple of options.  What I typically do is the following:

  1. Right-click on the XNA Game Studio 4.0 Windows Phone game project in the Visual Studio solution explorer and choose Properties
  2. Click on the XNA Game Studio property page
  3. Change the Game thumbnail drop-down to use Background.png instead of GameThumbnail.png
  4. Create a 173x173 .png file for your game and overwrite the default Background.png in your project
  5. Set the Genre value in \Properties\WMAppManifest.xml to “Apps.Games”

Alternatively, you can create a 173x173 .png file and overwrite the default GameThumbnail.png in your project.  However, if you do that, you also have to remember to overwrite Background.png in your project as well.  For a Windows Phone game, there isn’t any real reason to need 2 different icons because Games Hub and the start menu both use the same icon size.

How to test a game’s application icon in the emulator

The Windows Phone emulator does not have the Games Hub in it, so you cannot directly test how your application icon will look when it is displayed in Games Hub.  However, the icon size in Games Hub matches the icon size when an application is pinned to the start menu.  That means that you can use steps like the following to test the appearance of your game’s application icon in the emulator:

  1. Set the Genre value in \Properties\WMAppManifest.xml to “Apps.Normal” – this is the default value for new projects but if you have changed it for some reason, you’ll need to change it back
  2. Deploy your game to the emulator using Visual Studio, XnaPack or the Application Deployment tool
  3. Click the back button in the emulator to exit your game
  4. Click the right arrow in the emulator start menu to go to the Application List
  5. Click and hold on your game icon in the Application List, then choose pin to start
  6. Click the back button or the Windows button in the emulator to return to the start menu, and look at the appearance of your game icon in the start menu

Additional information

There are a few follow-up questions that folks usually ask when I explain the above information to them:

  1. Why do XNA Game Studio 4.0 Windows Phone game projects include default settings for applications instead of default settings for games?  The primary reason we decided to use these settings for XNA Game Studio 4.0 projects is that the Games Hub is not available in the Windows Phone emulator, and some testing scenarios are not possible in the emulator unless you use the application configuration settings.
  2. Why are there 2 different icon sizes for phone applications?  The Application List displays smaller icons than the start menu, and scaling a 62x62 image up to 173x173 can cause the images to look grainy/blurry, so developers can provide 2 different resolutions for their icons that will look good in both scenarios.
  3. Why doesn’t the XNA Game Studio 4.0 Windows Phone project template just include a 173x173 version of GameThumbnail.png?  We explored this prior to shipping, but it ended up causing problems for cross-platform game development scenarios.  The maximum size of a game thumbnail in an Xbox 360 game is 16 KB, and a 173x173 version of the default GameThumbnail.png went over that size limit.  We wanted to preserve the ability to right-click on a Windows Phone game project and create a working copy for the Xbox 360.
  4. I also see a file named Game.ico in an XNA Game Studio 4.0 Windows Phone project.  What is that used for?  This is used as an icon for the .exe if you build a Windows copy of your game.  It is included in Windows Phone and Xbox 360 projects so you can right-click and create a copy of the project for Windows.