3

my current config file is for ipad retina and it works perfectly, however when i select a device with a smaller screen the image becomes warped. here is my current config.lua

application = {
    content = {
        width = 768,--aspectRatio > 1.5 and 800 or math.ceil( 1200 / aspectRatio ),
        height = 1024,
        scale = "none",
        fps = 60,
        imageSuffix = {
            ["@2x"] = 1.3,
        }
    }
}

i would like to know if there is a way to dynamically set the width or height without hardcoding these figures for each invdividual device.

2 Answers 2

4

I use letterbox scaling for that.

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

Then I can use display.newImageRect, provided with dimensions of image for 320,480 device resolutions. @2 and @4 image suffixes are images 2x and 4x bigger.

Here is excellent article to get you in the corona scaling features: http://coronalabs.com/blog/2010/11/20/content-scaling-made-easy/

3

I suggest you read this article about "the ultimate config/modernizing the config".

Some screens are wider while others are more narrow. If we take resolution out of the equation, its easier to visualize the screens. Corona makes it easy to take resolution out of the picture using Dynamic Scaling. With Dynamic Scaling, you can use a common set of screen coordinates and Corona will automatically scale the text and graphics for different resolution screens. It can scale upwards or downwards depending on your starting point. It also can substitute higher resolution images when it needs to scale up. This is all managed by a Lua file in your project folder called config.lua.

Since available resolutions vary considerably, it’s helpful to use the same scale for each device. It doesn’t matter if you’re on an iPhone 3GS at 320×480 or a Retina iPad at 1536×2048, the location (0,0) represents the top-left corner and (320,480), in vertical portrait mode, is the bottom-right corner. The screen center is (160,240). Each point, in this case, is one pixel on a lower-resolution device like the 3GS, which has a native screen resolution of 320×480, while each point is four pixels on a Retina iPad. Don’t worry about the math — Corona will handle it for you.

Source: http://coronalabs.com/blog/2012/12/04/the-ultimate-config-lua-file/

local aspectRatio = display.pixelHeight / display.pixelWidth
application = {
   content = {
      width = aspectRatio > 1.5 and 320 or math.ceil( 480 / aspectRatio ),
      height = aspectRatio < 1.5 and 480 or math.ceil( 320 * aspectRatio ),
      scale = "letterBox",
      fps = 30,

      imageSuffix = {
         ["@2x"] = 1.3,
      },
   },
}
3
  • thanks for that!! i did read that article still having a couple of issues with image degradation with smaller devices.. i.e images are displaying fine on the retina ipad but distorted viewing on the sgs3. they are only 60x60 png cirlce which seems to get stretched. the above config displays same image as pixelated across all the devices. using: local rightarrow = display.newImage ("righticon.png") any ideas would be appreciated
    – tommo
    Jul 14, 2014 at 11:32
  • Try increasing the resolution in the config, 320 -> 800 and 480 -> 1200. And then let me know if it gets worse or better. Jul 14, 2014 at 11:48
  • yes seems to have fixed that issue but created another... using letterbox scaling has caused my car wheels to fall through the gaps between tiles(even though there are none)... i previously have been using scale = "none"
    – tommo
    Jul 14, 2014 at 12:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.