background image resolutions

fiveforty · January 11, 2013, 9:47am

this is driving me mad, can anyone help me out with this??

I’m trying to make a multi device app - aiming at

iPhone 3
iPhone 4
iPhone 5
iPad 1,2 & mini
iPad 3

but I’m haing major problems getting the background images to show the correct ones

I can either get the iPhone 3 & iPhone 4 to work but then going to iPads I get black bars down the outside
or I get the iPad versions to look right and then the iPhone ones are scaled wrong

and I just cant get the iPhone 5 version to work at all

I’m at the point now where if I can get it to work soon, I’ll just release it as 2 seperate version

my config is as follows

application =  
{  
 content =  
 {  
 width = 320,  
 height = 480,  
 scale = "letterbox",  
  
 imageSuffix =  
 {  
 ["@2x"] = 2,  
 ["@4x"] = 4,  
 },  
 },  
}

and loading images using the baseline size

bgStart = display.newImageRect( "images/bg.png", 320, 480 )

what should my scaling be??
what size should my images be?

my iPhone bg is 320 x 480, so that scales up nicely to the iPhone4 640 x 960 at a scale factor of 2
but of course that then gives the black bars down the sides on the iPad as the image isnt wide enough

if I make the image wide enough for the iPad then it squashs the image up for the iPhone version rather than extending the bleed area off screen like I thought that it should do

are the scale factors and sizes I’m working from right for a start??

-- iphone 3 [scale = @1, width = 320, height = 480]  
-- iphone 4 [scale = @2, width = 640, height = 960]  
-- iphone 5 [scale = @2, width = 640, height = 1136]  
-- ipad [scale = @2, width = 768, height = 1024]  
-- ipad3 [scale = @4, width = 1536, height = 2048]

I’ve read multiple post on the forums and throughtout the corona labs site, but nothing I read and try seems to work, can anyone help me out??
[import]uid: 68633 topic_id: 34849 reply_id: 334849[/import]

richard9 · January 11, 2013, 10:34am

The best solution would probably be to download the Ultimate Config that Rob made a tutorial for earlier this year. Anyway, you have your scaling set to letterbox, which is why you get the black bars.

iPad - 4:3
iPhone - 3:2
iPhone 5 - 16:9 [import]uid: 41884 topic_id: 34849 reply_id: 138489[/import]

bjsorrentino · January 11, 2013, 11:25am

Hi @fiveforty,
Here’s the link to the Ultimate Config that Richard is speaking about:
http://www.coronalabs.com/blog/2012/12/04/the-ultimate-config-lua-file/

Brent [import]uid: 200026 topic_id: 34849 reply_id: 138493[/import]

nick_sherman · January 12, 2013, 3:17am

Firstly, I don’t bother with @2x or @4x versions. I just have one file at the best resolution and Corona just uses that across all devices.

Then, if I’m using letterbox mode, which is most of the time as I don’t want images to appear stretched, I just make my background files 384 x 568 instead of 320 x 480, so that they fill all the space irrespective of which device is being used.

On an iPhone 3/4, 32 pixels either side and 44 pixels at the top and bottom will be offscreen.

On an iPhone 5, just the 32 pixels either side will be offscreen, while on an iPad the 44 pixels at the top and bottom will be offscreen.

You just make sure there’s nothing important in those potentially offscreen areas.

[import]uid: 93133 topic_id: 34849 reply_id: 138573[/import]

richard9 · January 11, 2013, 10:34am