What is the best resolution for mobile game?

universal screen

 

I see this question very often on Construct 2 forum and Facebook group. The answer is not that trivial because it’s not about the resolution, but about the ratio and making the app universal for all mobile devices. I’ll show you how to prepare your project to look well on all possible devices.

NOTE: This tutorial is a part of my e-book “Android mobile app with Construct 2. Tips & Tricks” released in 2015.

 

Universal screen size to support all mobile devices

First thing before you start implementing any business logic is to prepare the layout and so-called Safe Zone which will help you build a universal mobile app which fits all devices. As you know, there are many different types of mobile devices, and what goes after – many different screen resolutions and ratios. To support all devices you need to set up the layout to support both the biggest and the smallest screen available on the market. Once you’ve done that all devices in between will fit as well. There is a great tutorial on Scirra sites written by Fronne which explains this topic in details, so if you want to understand it precisely, I encourage you to read it [click here], but I will describe the most important part here as well. Let’s assume that your application is designed to use portrait screen orientation.

1. click on your layout
2. change “Layout Size” property to “800, 1200”

1

 

 

Great! Now you have set your application screen to support the device with the biggest screen ratio. Next step is to prepare your application to support the device with the smallest screen.
1. double click on empty canvas
2. double click on Sprite object (then click once on empty canvas)

 

2

 

3. click on the “resize empty canvas” icon
4. change width to 640
5. change height to 960
6. click “OK” button

 

3

 

7. click on “Fill” icon
8. pick your favorite color
9. click on sprite canvas to change its color and close Sprite settings

 

4

 

10.click on “sprite”
11. change “Position” to 400, 600
12.change “Opacity” to 30
13.change “Name” to “safeZone”

 

5

 

Now your layout should look like the one on the screen below.

 

6

 

The green area is the Safe Zone. No matter which device your application will be ran on, this is the common region. Everything placed in this region will be visible, no matter what screen size the device has. For development needs you may want to keep the Safe Zone visible while you run the project, but this is obviously only a helper sprite and you should make it invisible before uploading your project to Google Play. To make it invisible, simply change its “Initial visibility” property to “invisible”. Now, the last thing to do is to prepare Window to show the right part of layout. The Window is the area visible at runtime. By default it has some preset size and shows layout region starting from the top left corner, which is not what we want. We need to make it the same size as the Safe Zone, and move it to show exactly the center of the layout (exactly the same region as the Safe Zone).

1. click on your project name
2. change “Window Size” to 640, 960

 

7

 

For development needs you may want to leave the “Fullscreen in browser” to “Letterbox scale” which renders only the Window region. However, a very important note here is that before running the app on your mobile, you need to change it to “Scale Outer”. Scale outer is the mode which, in simple words, shows the Window region but if the device has a screen which is bigger than the Window region (not in pixels, it’s about the screen ratio) then it will also show the canvas outside the Safe Zone. So as you see now, the trick is to place all important objects in the Safe Zone region but everything outside should also look nicely in case of different mobile screen sizes. Great! – but we are not done yet! Still our window renders the top left layout region instead of the center one. To change it we have to implement first business logic in our event sheet, as you see in the picture below.

 

8

 

Every time the layout starts, it scrolls the view to the center of the layout.

2 comments to What is the best resolution for mobile game?

  • Justifun  says:

    In step 11. change “Position” to 800, 600, i think its supposed to be 400,600 to center the safezone sprite in the middle of your project.

  • Toby R  says:

    Hi Justifun. You are right! It’s a typo. Of course it should be 400, 600. Just updated. Thanks for pointing out!

Leave a reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">