The relationship between width and height in config.lua and the actual device resolution

Hi,

I try to understand the content scaling and the relationship between width and height in the config.lua and the actual device resolution, but I’m getting confused now. Can anyone explain this to me please?

Thank you.

So

When you set a width and height in your config.lua you are defining a “virtual screen size” that you want to use in your app.  Most people use a width to height ratio of 1:1.5, i.e. 320 x 480 (the 480 is 1.5 X greater than the 320) for a couple of reasons.  Early iPhones (iPhone 4 and earlier, many early Android devices) had that shape screen and the 320x480 mapped one virtual pixel to one actual pixel on the iPhones.  The other reason is that it’s inbetween the 16:9 phones we have today and the 1:1.25 iPad (more square shaped).

Once you define your desired virtual screen size in “Points” (since they are not really pixels, we use the term points instead), Corona SDK will scale up or down your screen to fit the physical layout of the device.  In other words in the example of a 320x480 content area on an iPhone 4, since it’s a 640x960 device, Corona SDK would handle scaling up your screen 2X. 

Since scaling images up is kind of a bad thing, we recognize that and allow you to define multiple image sets that can be used as the scale factor passes certain thresholds.  When you see code like this in a config.lua:

      imageSuffix = {
         ["@2x"] = 1.5,
         ["@4x"] = 3.0,
      },

That’s saying if Corona has to scale the screen up 1.5x or larger, add @2x to the image name (i.e. background.png becomes background@2x.png) and use that image instead.  If the screen gets larger than 3x the defined scale, then use the @4x versions of the image.

Hope that helps

Rob

Hi Rob,

Thank you for your explanation. When you said that Corona would scale up or down the screen to fit the physical layout of the device, did you mean that it scales the virtual screen? If thats the case, while scaling, when Corona know it should stop scaling (when the width or height reach certain point)? I think it depends on scale option in the config.lua file but I can’t figure out when it should stop scaling.

 I think to get the best result the content area should be set to the ratio that could match many devices’ aspect ratio (or at least comes near), is that correct?

Thank you.

So

The easiest way to explain this:  Lets say you set your width/height to 320 and 480 respectfully.  That’s the size of the iPhone 3Gs and the standard “points” value used by Apple.  You run your app on and iPhone 4/4s where the screen is really 640x960, then your scale value will be 2.0 (640/320).  Corona uses the actual pixels of the screen / your width to compute the scale value.  You don’t have to worry too much about this as Corona handles it all under the hood. 

You just need to know at what point do you want your @2x and @4x graphics being used.  We recommend values of 1.5 and 3.0 for that for apps that use simple content scaling, like games where you want the same basic screen on all devices.

Rob

When you set a width and height in your config.lua you are defining a “virtual screen size” that you want to use in your app.  Most people use a width to height ratio of 1:1.5, i.e. 320 x 480 (the 480 is 1.5 X greater than the 320) for a couple of reasons.  Early iPhones (iPhone 4 and earlier, many early Android devices) had that shape screen and the 320x480 mapped one virtual pixel to one actual pixel on the iPhones.  The other reason is that it’s inbetween the 16:9 phones we have today and the 1:1.25 iPad (more square shaped).

Once you define your desired virtual screen size in “Points” (since they are not really pixels, we use the term points instead), Corona SDK will scale up or down your screen to fit the physical layout of the device.  In other words in the example of a 320x480 content area on an iPhone 4, since it’s a 640x960 device, Corona SDK would handle scaling up your screen 2X. 

Since scaling images up is kind of a bad thing, we recognize that and allow you to define multiple image sets that can be used as the scale factor passes certain thresholds.  When you see code like this in a config.lua:

      imageSuffix = {
         ["@2x"] = 1.5,
         ["@4x"] = 3.0,
      },

That’s saying if Corona has to scale the screen up 1.5x or larger, add @2x to the image name (i.e. background.png becomes background@2x.png) and use that image instead.  If the screen gets larger than 3x the defined scale, then use the @4x versions of the image.

Hope that helps

Rob

Hi Rob,

Thank you for your explanation. When you said that Corona would scale up or down the screen to fit the physical layout of the device, did you mean that it scales the virtual screen? If thats the case, while scaling, when Corona know it should stop scaling (when the width or height reach certain point)? I think it depends on scale option in the config.lua file but I can’t figure out when it should stop scaling.

 I think to get the best result the content area should be set to the ratio that could match many devices’ aspect ratio (or at least comes near), is that correct?

Thank you.

So

The easiest way to explain this:  Lets say you set your width/height to 320 and 480 respectfully.  That’s the size of the iPhone 3Gs and the standard “points” value used by Apple.  You run your app on and iPhone 4/4s where the screen is really 640x960, then your scale value will be 2.0 (640/320).  Corona uses the actual pixels of the screen / your width to compute the scale value.  You don’t have to worry too much about this as Corona handles it all under the hood. 

You just need to know at what point do you want your @2x and @4x graphics being used.  We recommend values of 1.5 and 3.0 for that for apps that use simple content scaling, like games where you want the same basic screen on all devices.

Rob