http://blog.anscamobile.com/2010/11/content-scaling-made-easy/
As you can see from this post, the most “popular” scaling mode is letterbox: “When in doubt, the mode you will probably want is “letterbox”, which is guaranteed to neither crop nor distort your main content region. This scaling mode is named “letterbox” because the effect is similar to playing a widescreen movie on an older TV set: all onstage content is visible, but there may be extra screen area beyond it.”
Moreover, you can use this extra screen area just as any other area of the screen: “unlike the movie example, these extra areas do not have to be black bars, and are not cropped or masked. Instead, they can be filled with any Corona elements you like. To borrow a printshop term, there may be extra “bleed” area around your main content region, either at the top and bottom or on the sides.”
It can be important, for example, if you want to place your controls in the corners of the screen. But what are X/Y coordinates of those corners? You don’t know. And what, by the way, is the size of the screen on your device? This esoteric knowledge is also hidden from you for some unclear reason.
Of course, there are display.viewableContentHeight and display.viewableContentWidth properties but in the case of letterbox scaling mode they return values equal to the application width and height as defined in config.lua (because all this area is “viewable”) and don’t take into account any visible extra area.
In order to figure out the size of this extra area you should use other methods. The overall size of the screen is still unknown but you can use display.screenOriginX and display.screenOriginY to determine where the upper and left boundaries of the screen are. For example, if height value in config.lua is 480 and screen size (that you don’t know) is, say, 550, then display.screenOriginY will be -(550-480)/2 = -35. This value is Y coordinate of the upper edge of the actual visible area of your application – let’s call it minVisibleY.
A remark: this calculation of screenOriginY is true only when yAlign parameter in config.lua is equal to "center" (or not specified) and the “bleed” area is therefore distributed evenly above and below the “height” defined in config.lua. There are two other yAlign options (“top” and “bottom”) but “center” is default and I don’t see any reason to use alternative options.
Anyway, if yAlign = “bottom”, display.screenOriginY = -(550-480) = 70;
if yAlign = “top”, display.screenOriginY = 0;
minVisibleY is always equal to display.screenOriginY.
The situation is similar for X coordinate: minVisibleX value is equal to display.screenOriginX and there are three options for xAlign setting: “center”, “right” and “left”, “center” being the default value.
Now you know coordinates of upper and left boundaries of your screen. Is there any way to calculate them for bottom and right boundaries?
If yAlign = “center”, there are two equal “margins”, above and below.
Then:
1 | maxVisibleY = display.viewableContentHeight + -1* display.screenOriginY |
If yAlign = “bottom” , there is only one “margin”, above the application height defined in config.lua.
Then:
1 | maxVisibleY = display.viewableContentHeight |
If yAlign = “top” … well, then all the “bleed area” is below the “height” and there is no way to calculate its size because display.screenOriginY = 0.
If xAlign = “center” , there are two equal “margins”, left and right.
Then:
1 | maxVisibleX = display.viewableContentWidth + -1* display.screenOriginX |
If xAlign = “right” , there is only one “margin”, left to the application width defined in config.lua.
Then:
1 | maxVisibleX = display.viewableContentWidth |
If xAlign = “left” you cannot calculate maxVisibleX.
1 2 | screenHeight = maxVisibleY - display.screenOriginY screenWidth = maxVisibleX - display.screenOriginX |
Of course, these values are calculated in “application” pixels and don’t take into account any scaling, so we can call them screenHeightAppPix and screenWidthAppPix.
display.contentScaleX/Y:
1 2 | screenHeightPhysPix = math.floor(screenHeightAppPix / display.contentScaleY + 0.51) screenWidthPhysPix = math.floor(screenWidthAppPix / display.contentScaleX + 0.51) |
Of course, because of rounding errors there may be always a difference of pixel or two between these calculated values and actual size of the screen; I used 0.51 instead of 0.5 in order to minimize it but you cannot totally eliminate it when your application size as defined in config.lua is much smaller than the real size of the screen.
In order to illustrate these methods I wrote a small application (“Boundaries”) that you can download from Github.
All the above calculations are packed there as methods of DynResManager module whose main function is handling dynamic resolution images with no need to specify size of each image (see this post: http://developer.anscamobile.com/code/different-way-managing-dynamic-image-resolution-and-scaling-font-size ). Size/boundaries calculations in this module are more complicated than in the above text because they take into account scaling mode and yAlign / xAlign parameters so that you can use them for “zoomeven” scaling mode, ”bottom” option of yAlign and ”right” option of xAlign.



I will definitely take a look into the sample project. thanks for sharing!
-finefin
Hi Naomi & finefin, thank you for your responses!
Michael
Thanks Michael - perfect explanation, certainly saved me some time!
[removed]
Thanks! very helpful and great post!
Excellent!
This really makes all the scaling and fitting easier.
Thanks.
Wow, @mmagrilov, thank you for sharing this!
Naomi