Releasing HTML5 Games for Windows 8

Chapter 3. Screen Resolution and Artwork

Windows 8 Resolutions

If you have done any desktop software development before, you may be familiar with the dizzying amount of resolution possibilities out there. While Windows 8 still has its share of resolution options, the form factors and the push towards tablets simplifies your baseline of supported resolutions.

Out of the box, Windows 8’s native resolution is 1366×768. While Windows 8’s minimum resolution is 1024×786, almost all new tablets and convertibles will have their minimum resolution set to 1366×768. But this isn’t the full story. Let’s take a look at the three main resolutions our game will need to support to pass certification for the Windows Store:

• Full Screen – This is the default resolution when the game is running in full-screen mode. This can be anywhere from 1366×768 and up.

• Snapped – This happens when your game is docked on the side of the screen and another application is running next to it. The minimum width of this resolution is 320 pixels wide.

• Filled – This would be the full-screen resolution minus 320 for the snap view. This resolution happens when you have another app docked in snapped view on the side of your game.

You can easily detect resolution changes by adding an event listener to the window like so:

window.addEventListener("resize", onViewStateChanged);

And, here is an example handler for the resize event.

function onViewStateChanged(event) { var viewStates = Windows.UI.ViewManagement.ApplicationViewState; var ...