Corona SDK Cross Device Screen Resolution

11
votes

This is going to be one of those awkward questions looking for an answer that probably doesn't exist, but here goes.

I've been developing some simple games using Corona and whilst the functionality seems to work pretty well across most of the physical devices I have tested on, the one main issue is the layout. I know you can't really build for every single device perfectly, but I'm wondering if there is a common method to make an app look good across as many screens as possible. I have access to these devices

  • iPad 1 & 2: 4:3 (1.33)
  • iPhone 960 × 640 3:2 (1.5)
  • iPhone 480x320 3:2 (1.5)
  • Galaxy Nexus 16:9 (1.77)

From what I have seen, people aim to use 320x480 as a scaled resolution and then let Corona upscale to the correct device resolution (with any @2x images as required) but this leads to letterboxing or cropping depending on the config.lua scale setting. Whilst it does scale correctly, having a letterbox isn't great.

So would I be best to not specify a width&height in the config file, but instead to use some sort of screen check at first to look for 1.33 / 1.5 / 1.77 aspect ratios? Surely with the whole point of Corona SDK, there would be some sort of 'typical' setup that developers use for the start of any new project?

Thank you

2
mobilescreen-resolutioncoronasdkaspect-ratio

2 Answers

8
votes

It seems that I have found a pretty good solution based on this forum post on the Ansca website: http://developer.anscamobile.com/forum/2012/03/12/understanding-letterbox-scalling

In summary, the config.lua should look like this:

application = {
    content = {
        width = 320,
        height = 480,
        scale = "letterbox",
        xAlign = "center",
        yAlign = "center",
        imageSuffix = {
        ["@2x"] = 2,
    },
    }
}

Create background images at 360*570 for older devices. 320x480 screens will crop the image slightly and it will scale nicely for older Android devices.

Create background images at 1140*720 for iPad and iPhone retina - again these will scale on Android and be slightly cropped on iOS.

As an example, where you would normally create a 320x480 image and display it with:

local bg = display.newImageRect("bg.png",320x480)
bg.x = display.contentWidth/2
bg.y = display.contentHeight/2

.. instead create a 360x570 background and use the following code:

local bg = display.newImageRect("bg.png",360x570)
bg.x = display.contentWidth/2
bg.y = display.contentHeight/2

This is just a summary, so check the link for more detailed instructions.

3
votes

Well, you CAN use a number slightly off 2 for the scaling if you want correct images for the different devices. Ex:

    application = 
{
    content = 
    { 
        width = 640,
        height = 960, 
        scale = "zoomEven",
        imageSuffix =
        {
            ["-iphone3"] = 0.5,
            ["-ipad2"] = 1.066,
            ["-ipad3"] = 2.133,
        },
    }
}

In which "background.png" would be a 640x960 image for the iphone4, while "background-iphone3.png" would be 320x480 (you don´t need this, but it will reduce memory requirement for iphone3 applications). "background-ipad3.png" would need to be 1536x2048 (and half that for -ipad2).

Of course it doesn´t solve the aspect ratio for screen positioning, but it solves it for all other gfx related problems. Remember to use display.newImageRect, not display.newImage or you won´t see any difference.