Corona SDK : One way to support different screen resolutions

Every developer has dealt with it at least once and it’s one of the first hurdles that needs to be addressed when developing a mobile game: screen resolution.
If Apple has made (before iPhone6 and iPhone6 Plus) this relatively easy, with just a couple of different resolutions, when it comes to Android and its fragmentation, it can become quite a daunting task.
Fortunately for us, Corona SDK has made dealing with these kind of things a walk in the park.

There’s several ways to approach the issue, it really depends on your preferences and your coding style. What we’re going to describe here is just our way of doing it, not necessarily the best one, but the one we have used for quite a long time and for which we never felt any need to update it. It also makes sure that all our templates support the widest range of devices possible.

How’s it done at Ragdog Studios SRL

It all starts by defining the coordinates of 4 major points: top, bottom, left and right sides of the screen. Once you know these, you’re able to position objects relatively to a specific side of the current screen, no matter what screen it is. For example, to keep an object always at the top-left corner of the screen, with 10 pixel from each side, you would write:

That’s it. There’s also a couple more numbers we need to run down. The full width and height of the screen. Since we’re already there, let’s localize two more variables for the sake of it. These define the exact center of the screen.

This can be used to stretch images all the way from one side to the other, or to all four sides. Stretching images is not always a good thing, but it really depends on the image itself. If it’s made up of just one color, or if the quality is still good after a bit of a stretch, knowing the exact sizes that would fill the entire screen is pretty useful.

What about config.lua?

We still like to work with a width and height of 320×480. Corona SDK makes it very easy to use 640×960 as a base, since you can define when to use @1x, @2x and @4x images, and it might not be too far off the day when we’ll switch to it, but there would be limited advantages, if any, in doing so. As you can see, we use “letterbox” for the scale parameter. “zoomEven” is also a viable option, but we feel that keeping the width size the same across all devices is more predictable compared to doing the same with the height.
There are also, once again, many other ways of doing it. For example, some users sets width and height dynamically, depending on the actual device resolution. This has the benefit of avoiding “half pixels” completely (or almost so), since the width and the height Corona SDK works with is an exact copy of the device resolution. If you use a ton of strokes in your vector objects, it helps making each stroke consistent, no matter the size or where you position it.
It ends up requiring a bit more planning though.

To wrap it up

The code that defines topSide, bottomSide, leftSide, rightSide, totalWidth, totalHeight, centerX, centerY should be placed at the top of each of your composer/storyboard scene files, and generally anywhere you’d like to have that kind of data to position your objects. The settings in your config.lua file won’t affect the outcome of these variables, so they can be used in any kind of situation. Obviously always make sure to do a round of testing with the Corona SDK Simulator, which offers several device views to try out in a breeze.

2 Comments

  1. First of all, I would like to express my sincere gratitude and appreciation to your kind gesture and the willingness to help some of us, espercially, regarding the tutorial i have got from your excellent guide from this site. Thank’s so much.
    However, i am a newbie, and now trying to learn corona, due to it’s simple and easy learning curve. This tutorial happens to have save me in so many ways, thank’s once again, but the challenge for me now is, in trying to handle device orientation, where exactly should i execute the action, must it be on each composer/storyboard scene or it must be passed once in the main.lua file?
    Thanks in advance for your support.

    • Hi,
      it really depends on what you’re trying to achieve. If you just want to change the orientation of the device (portrait or landscape), you can do these changes in build.settings.
      If you’re looking, for example, to rearrange some elements depending on the device orientation, you should first check what the event reports (http://docs.coronalabs.com/api/event/orientation/index.html) and then modify the elements accordingly.
      I would suggest registering an event for each page, as that makes it easier to access the elements of the page (you can localize the one you need to move at the top of the page and access them that way). Obviously make sure to add the event when the scene is created and remove it when the scene is deleted (or else it would crash trying to access elements that aren’t there anymore).