Hi all,
The ultimate config.lua file (http://www.coronalabs.com/blog/2012/12/04/the-ultimate-config-lua-file/) is quite a popular way to deal with devices with different aspect ratios. But I think I just hit on an approach that simplifies it a lot yet yields the same effect. I wanted to share it / test it with the community to see if it’s helpful and to make sure I’m not missing something.
First, let me quickly describe how I’ve been doing content scaling. I actually haven’t been using the ultimate config.lua. Instead, my config.lua looks like this:
[lua]
application =
{
content =
{
width = 320,
height = 480,
scale = “letterbox”,
imageSuffix =
{
["@2x"] = 1.5,
["@4x"] = 3.0,
},
},
}
[/lua]
In order to know where the corners are and manage potential issues with letterbox cutting off parts of images, I define some useful variables like this:
[lua]
_W = display.contentWidth - display.screenOriginX*2
_H = display.contentHeight - display.screenOriginY*2
_UL = { x = 0 + display.screenOriginX, y = 0 + display.screenOriginY }
_UR = { x = display.contentWidth - display.screenOriginX, y = 0 + display.screenOriginY }
_BL = { x = 0 + display.screenOriginX, y = display.contentHeight - display.screenOriginY }
_BR = { x = display.contentWidth - display.screenOriginX, y = display.contentHeight - display.screenOriginY }
_C = { x = display.contentWidth/2, y = display.contentHeight/2 }
[/lua]
These represent the width and height of the screen, the coordinates of the four corners, and the coordinates of the center (all in content units). I then place all of my assets relative to the corners or the center.
The only disadvantage I’ve encountered with the approach I’ve been using, and what I think the ultimate config.lua file is trying to address, is that the upper-left corner isn’t at (0,0). Instead, it’s at (display.screenOriginX, display.screenOriginY). That shouldn’t really be a big deal, since I use (_UL.x, _UL.y) as the coordinates of the upper-left corner. The potential issue is that some third-party modules wouldn’t do this. They might mistakenly think (0,0) is the upper-left corner (it’s not), and display.contentWidth and display.contentHeight span the full width of the screen (they don’t). In that case, we’d have a problem.
The solution I’d like to run by the community is a config.lua like this:
[lua]
application =
{
content =
{
width = 320 * (display.pixelHeight/display.pixelWidth>1.5 and 1 or 1.5/(display.pixelHeight/display.pixelWidth)),
height = 480 * (display.pixelHeight/display.pixelWidth<1.5 and 1 or (display.pixelHeight/display.pixelWidth)/1.5),
scale = “letterbox”,
imageSuffix =
{
["@2x"] = 1.5,
["@4x"] = 3.0,
},
},
}
[/lua]
The effect of that bit of math is to set the content width or height appropriately for letterbox scaling according to the aspect ratio of the device. Why is that good? Because the upper-left corner is now (0,0), and display.contentWidth and display.contentHeight now cover the entire screen. For example, on an iPhone 5, display.pixelHeight is 1136 and display.pixelHeight is 640. If you do the math, you’ll see that it’ll set width to 320 and height to 568.
Is this an improvement to the ultimate config.lua? I think so. It’ll set the width and height appropriately for every single device, no matter what the resolution or aspect ratio. And there’s no need to code into your config.lua different blocks for different devices.
I’m curious if folks try using this instead of the ultimate config.lua in one of their projects, whether it’ll work just the same.
Thanks!
- Andrew
(P.S.: This approach is somewhat similar to a comment about halfway down that blog post made by a Tom71, but I think it’s even more general.)
