Skip to content
September 14, 2012 / iunkn

Scaling for various screen sizes in Windows 8

(This is a copy of the entry made in Construct 2 tutorial section.)

Windows 8 runs on a wide variety of screen sizes and it is important to make sure that your game looks great on all the screen sizes. While it may sound daunting it is not really that hard to get things right on various screen sizes.

I started off by reading the MSDN article Guidelines for scaling to screensizes and would like share my learning. As the guideline notes, games typically fit into the category of Fixed layouts as opposed to Adaptive layout which is useful for apps like readers/photoviewers etc,. (I recommend you to read the sections relevant to Fixed layout in the article I mentioned above). I am summarizing for the games that are written in Construct 2 specifically:

1. Start by designing your game for 1366x768px(16:9) layout in Construct 2.

2. Provide assests which are twice as large as you actually need. For example, if you want to have a 50×50 pixel asset in your game, generate 100×100 pixel asset and scale it in Construct 2 for your needs. Why? Windows 8 will scale your asset on bigger screens like 23″ monitors and your game assets will look crisp if you provide larger assets. (The other alternative is to provide vector images but unfortunately Construct2 does not support vectors(afaik). So we have to provide 2x assets.)

3. Export your game for Windows 8, set “Fullscreen in browser” property of the project to “Letterbox scale”.

Alright. So far so good. Since you have designed for 1366×768 layout your game would run fullscreen in the aspect ratios of 16:9 (1366×768, 1920×1080 irrespective of the physical screen size) and with letterbox effect in the other resolutions, which is still okay. There is one another aspect that you need to be aware of wrt Windows 8. The games/apps can be snapped by the user to left or right side of the available screen and your game will have to consider this. If not, your game will be resized to a small window within the snapped view if you had followed the steps 1-3 above:

Snapview after exporting with Fullscreen (Letterbox) option in Construct 2. Note that the game is letterbox-ed into the snapview.

In order to better handle this, CSS media queries can be used to detect when the game is snapped and act accordingly. If you use the Metro/Windows8 plugin, you will get this behavior automatically when you export for Windows 8 from Construct 2.  This is ideal for games that do not want to let the users play in the snapped mode. With the use of plugin, the snapped view looks something like the below picture and you can customize it by editing index.html with ease.

Snapview with metro/Windows8 plugin. Note that you can expose a different view.

Also note that your game can be in the filled mode (ie the other part of the snapped view), which you don’t have to do anything since you have set up your project for scaling using the above steps and Windows 8 will scale the app automatically in the filled mode.

Download the latest plugin and give it a try.

 

Advertisements

5 Comments

Leave a Comment
  1. Ryan Lowdermilk / Sep 19 2012 2:21 pm

    I work for Microsoft. Can you shoot me an email? Alias is ryanlo

  2. Shawn / Dec 28 2012 6:55 pm

    Can we use any part of the above for Windows Phone 8?

    • iunkn / Jan 27 2013 6:23 pm

      I haven’t played around with exporting for Windows Phone 8. I will update you once I have some info.

  3. Shawn / Dec 29 2012 6:16 pm

    I found some screen resolutions information from Microsoft for Windows Phone 8. 🙂
    http://msdn.microsoft.com/en-us/library/windowsphone/develop/jj206974(v=vs.105).aspx

    • iunkn / Jan 27 2013 6:22 pm

      I haven’t yet played around with exporting for Windows Phone 8. I will update once I have some info.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s