Seeking Clear Definition Of Config.lua Screen Size

Getting Started Newbie Questions
#1

If width & height are set to 320x480 in config.lua, what does that mean exactly?

And how does it relate to inserting a background image of a different size in main.lua, like:

local background = display.newImageRect("background.png", 360, 570)

And finally, how does the original resolution of the background image file play into all this?

I know it’s a ridiculously simple set of questions, but I’ve done a lot of reading on this, and while it’s helped a lot, it’s also confused me a bit (I tend to over analyze everything…)

Thanks

#2

It also depends which type of scaling you use - “zoomStretch”, “zoomEven” or "letterbox.

With zoomStretch, x = 0 and y = 0 will always be the top left corner of the screen no matter which device you run on. A 320 x 480 image would be stretched to fit an iPad or iPhone 5 screen, so any circles in that image will appear like ovals.

On the other hand, with letterbox images will retain their aspect ratio, but you will get ‘bleed’ areas on iPhone 5, iPad and Android devices. For instance, on iPhone 5 the top left corner of the screen would be x = 0, y = -44. If you place a 320 x 480 image on an iPhone 5 you would get black areas at the top and bottom, and on the iPad on the left and right.

In both cases the centre of the screen remains the same at x = 160, y = 240.

When working with letterbox I tend to create my background images to be 768 x 1136 (defined in the code as 384 x 568), making sure there is nothing of importance in the areas that wouldn’t show on an iPhone 4. This way they are wide enough for an iPad and tall enough for an iPhone 5.

As for image resolution, many people use @2x and @4x images to make use of Corona’s automatic scaling.

So, using my background size you’d have a 384 x 568 for 3GS, 768 x 1136 @2x for Retina, and 1536 x 2272 @4x for iPad 3/4. You would load the image as 384 x 568 and Corona will automatically use the 2x or 4x files where required.

However I now tend to just use the 768 x 1136 without a @2x prefix, which will be automatically scaled down and look good on 3GS while still looking sharp on an iPad 3/4. This way I can just have one image for all my buttons etc rather than 2 or 3.

#3

Just a note -

Width is ALWAYS the short side (even if you’re using landscape mode) and height is ALWAYS the long side. I got into a lot of trouble because I thought that width and height were changeable according to the orientation of the device; i.e. you’re holding it landscape and the width is the left-right measurement. That  is not correct.

C

#4

thanks guys

#5

It also depends which type of scaling you use - “zoomStretch”, “zoomEven” or "letterbox.

With zoomStretch, x = 0 and y = 0 will always be the top left corner of the screen no matter which device you run on. A 320 x 480 image would be stretched to fit an iPad or iPhone 5 screen, so any circles in that image will appear like ovals.

On the other hand, with letterbox images will retain their aspect ratio, but you will get ‘bleed’ areas on iPhone 5, iPad and Android devices. For instance, on iPhone 5 the top left corner of the screen would be x = 0, y = -44. If you place a 320 x 480 image on an iPhone 5 you would get black areas at the top and bottom, and on the iPad on the left and right.

In both cases the centre of the screen remains the same at x = 160, y = 240.

When working with letterbox I tend to create my background images to be 768 x 1136 (defined in the code as 384 x 568), making sure there is nothing of importance in the areas that wouldn’t show on an iPhone 4. This way they are wide enough for an iPad and tall enough for an iPhone 5.

As for image resolution, many people use @2x and @4x images to make use of Corona’s automatic scaling.

So, using my background size you’d have a 384 x 568 for 3GS, 768 x 1136 @2x for Retina, and 1536 x 2272 @4x for iPad 3/4. You would load the image as 384 x 568 and Corona will automatically use the 2x or 4x files where required.

However I now tend to just use the 768 x 1136 without a @2x prefix, which will be automatically scaled down and look good on 3GS while still looking sharp on an iPad 3/4. This way I can just have one image for all my buttons etc rather than 2 or 3.

#6

Just a note -

Width is ALWAYS the short side (even if you’re using landscape mode) and height is ALWAYS the long side. I got into a lot of trouble because I thought that width and height were changeable according to the orientation of the device; i.e. you’re holding it landscape and the width is the left-right measurement. That  is not correct.

C

#7

thanks guys