How to make the game's background fullscreen across devices

[Aidin]

Hi,

I’m well aware of great newImageRect to load different resolution of my art assets but my problem is the background. Since aspect ratio of iPad is 3:2, the corresponding image for iPad, or any 3:2 device, should be 3:2 but since my resolution in my config.lua is 320x480, hence the iPod 3GS, if I change it to 3:2, I think I’ll get problems in my phone devices.

This gets me to other resolutions and aspect ratios as well, like my Android phone, which has the 960 x 540 resolution.

So how can I solve this?

Thanks.

[rob]

This is why I wrote the blog post the Ultimate Config.lua:  http://www.coronalabs.com/blog/2012/12/04/the-ultimate-config-lua-file/

Basically you have to create backgrounds that are larger than the device you are working with.  The technical term is having a “bleed area” that bleeds off the page (comes from the full page printing world where the ink at the edge of the page bleeds off the edges).  For the iPad, your background is going to have part of it on the top and bottom (assuming portrait) that gets cut off.  Using that same background on other devices the sides will get cut off a bit.  The graphic in the post demonstrates what areas show on what devices.    The config.lua presented there handles the different screen shapes for you.   Android is a bit tricky because they are all a little bit different, so it’s not perfect on them.

To simplify it:  You need a 360x570 background (of course for higher res devices, you need larger versions: 720x1140 and 1440x2280) and use display.newImageRect(“background.png”, 360, 570)  (for vertical, 570, 360 for horizontal).  Then you make sure the background is centered.  Don’t put anything important in the bleed areas.

Now the part that trips people up is that the center isn’t fixed.  This depends on you being able to position things a relative distance from the edges or the center.   0, 0 will always be the top left corner.  display.contentWidth, display.contentHeight will always be the bottom left corner and of course display.contentCenterX, display.contentCenterY will be the center.  But depending on the device those numbers will be different. 

Lets say you want to position two buttons an equal distance from the center:

button1.x = display.contentCenterX - 100

button2.x = display.cotnentCenterX + 100

You have to think about positioning different.

The other way, if you need 320, 480 to always be in the same relative space is to use a fixed 320 x 480 in your config.lua, center your background and use negative numbers to fill the top and left areas that are outside of the 320x480 box.  0,0 isn’t guaranteed to be at the top left.  But the idea of using the 360x570 centered background still works.

[rob]

This is why I wrote the blog post the Ultimate Config.lua:  http://www.coronalabs.com/blog/2012/12/04/the-ultimate-config-lua-file/

Basically you have to create backgrounds that are larger than the device you are working with.  The technical term is having a “bleed area” that bleeds off the page (comes from the full page printing world where the ink at the edge of the page bleeds off the edges).  For the iPad, your background is going to have part of it on the top and bottom (assuming portrait) that gets cut off.  Using that same background on other devices the sides will get cut off a bit.  The graphic in the post demonstrates what areas show on what devices.    The config.lua presented there handles the different screen shapes for you.   Android is a bit tricky because they are all a little bit different, so it’s not perfect on them.

To simplify it:  You need a 360x570 background (of course for higher res devices, you need larger versions: 720x1140 and 1440x2280) and use display.newImageRect(“background.png”, 360, 570)  (for vertical, 570, 360 for horizontal).  Then you make sure the background is centered.  Don’t put anything important in the bleed areas.

Now the part that trips people up is that the center isn’t fixed.  This depends on you being able to position things a relative distance from the edges or the center.   0, 0 will always be the top left corner.  display.contentWidth, display.contentHeight will always be the bottom left corner and of course display.contentCenterX, display.contentCenterY will be the center.  But depending on the device those numbers will be different. 

Lets say you want to position two buttons an equal distance from the center:

button1.x = display.contentCenterX - 100

button2.x = display.cotnentCenterX + 100

You have to think about positioning different.

The other way, if you need 320, 480 to always be in the same relative space is to use a fixed 320 x 480 in your config.lua, center your background and use negative numbers to fill the top and left areas that are outside of the 320x480 box.  0,0 isn’t guaranteed to be at the top left.  But the idea of using the 360x570 centered background still works.