Scaling your game for various screen sizes in Windows 8

1

Stats

3,965 visits, 5,941 views

Tools

Translations

This tutorial hasn't been translated.

License

This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Published on 14 Sep, 2012. Last updated 19 Feb, 2019

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

You must have come across the excellent write up Supporting multiple screen sizes here in the Construct 2 tutorial section. I would like to talk about some more nuances when you design/export your game for Windows 8 with Construct 2.

Guidelines for designing the game

The MSDN article

Guidelines for scaling to different screen sizes (check out the link for the distribution of resolutions and popular ones) notes that games typically fit into the category of Fixed layouts as opposed to Adaptive layout. I am summarizing and sharing the details that I learnt for the games that are written in Construct 2 specifically:

1. Start by designing your game for 1366x768px(16:9) layout in Construct 2. (You will get the reasoning for this resolution from the Guidelines link above.).

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

3. Export your game for Windows 8 from Construct 2, set "Fullscreen in browser" property of the project to "Letterbox scale".

What to expose in Windows 8 snapped mode?

Alright. So far so good. Since you have designed for 1366x768 layout your game would run fullscreen in the aspect ratios of 16:9 (1366x768, 1920x1080 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:

As you can see, this is not an optimal experience. In order to better handle this, CSS Media queries can be used to detect when the game is snapped and act accordingly. Don't worry, if you use the Metro/Windows8 plugin, you will get this behavior automatically when you export for Windows 8 from Construct 2(with steps 1-3 above). This is ideal for games that do not want to let the users play in the snapped mode with an actionable instruction and button. With the use of plugin, the snapped view looks something like the below picture and you can customize it by editing index.html(in VS2012 after exporting from Construct 2) with ease.

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.

Some tips on testing for various screen sizes

If you are not already aware, try out running your game after you export from Construct 2, on the Simulator that is available with VS2012. You will be able to play out with various screen sizes and check how it looks, check out the snapped mode - without actually having to buy a variety of devices.

This is one approach to addressing the snapview in Windows 8 and I welcome you to share your experiences.

  • 1 Comments

  • Order by
Want to leave a comment? Login or Register an account!