Simple config question

Solar2D General Questions/Discussion
#1

Hi all,

I have read the blog and ultimate config posts but I find that I’m just a bit more confused as they cover a ton of other cases.

What I need is a simple config.lua that only needs to accommodate iphone4 and iphone5.

Can someone help me with this? It would be greatly appreciated. I understand the usage of @2x but I’m getting confused beyond that. As mentioned, I only need to cover iphone4 and iphone5. Ideally, I would only have to have 2 sizes of each image. If you can include which dimension I need for iphone4 and which dimension I need for iphone5 that would be great as I’ve seen so many variations I’m not sure which to use.

Thanks so much in advance!

#2 
if ( string.sub( system.getInfo("model"), 1, 2 ) == "iP" and display.pixelHeight \> 960 ) then application = { content = { width = 320, height = 568, scale = "letterBox", xAlign = "center", yAlign = "center", imageSuffix = { ["@2x"] = 1.5, ["@4x"] = 3.0, }, }, } else application = { content = { width = 320, height = 480, scale = "letterBox", xAlign = "center", yAlign = "center", imageSuffix = { ["@2x"] = 1.5, ["@4x"] = 3.0, }, }, } end
#3

Thanks Rob and I appreciate this but I have seen this before. It’s seems like a fair bit of overkill to just target iphone4 and 5.

From what I can understand I would need 3 different images for each case which would be 6 different images in all yes?

Is there not a simpler way to approach this?

Thanks so much for responding. :slight_smile:

–edit–

Maybe I’m just not understanding but can’t I just do this:

application = { content = { width = 640, height = 960, scale = "letterBox", xAlign = "center", yAlign = "center", }, }  

and perhaps just test for a tall version and do this:

application = { content = { width = 640, height = 1136, scale = "letterBox", xAlign = "center", yAlign = "center", }, }  

or is this completely the wrong way to approach it?

I guess I do see the issue with the ‘tall’ version in that there would be no way to differentiate between the images. The thing I don’t understand is :

640 x 1.5 is more than 640. That doesn’t make sense. The iphone5 is the same width as the iphone4 isn’t it?

#4 
if ( display.pixelHeight \> 960 ) then    application =    {       content =       {          width = 640,          height = 1136,          scale = "letterbox",       },    } else    application =    {       content =       {          width = 640,          height = 960,          scale = "letterbox",       },    } end

Now you just need one graphic for your things.   You’re background should be 640x1136 even when loading on the iPhone4’s  and just make sure nothing important in the background would get cut off when the background bleeds off of the smaller device’s screen.  Just load it in using display.newImageRect(“background.png”, 640, 1136) even on the iPhone 4. 

If your background must be different then you will need two backgrounds and you will have to do the test to see if the pixelHeight is greater than 960 in your code and load the other background as needed.

 

#5

Thanks Rob, this gets me alot closer. I was kind of envisioning having 2 different images and using @2x for the iphone5. Is this possible? I just don’t fully grasp the 1.5 part of it.

–edit–

do I have to use the scaling formula at all?

or can I just create a default image at 640x960 and create a tall (iphone5) image at 640x1136 and call it @TALL or something?

I’d rather not have to use the scaling 1.5, 2.0 etc. as it doesn’t appear to be exact.

#6

Both the iPhone 4 and iPhone 5 are 640px wide devices.  They will use the exact same image.   You cannot use dynamic images to handle different shapes only different sizes.

The scaling number are a “greater than” operation.  Since my last config.lua doesn’t use it, you don’t need it if you’re only supporting those two (well three if you count the 4 and 4S) devices. 

But for your future use if and when you decide you want to support a 3G and a 9F when ever that comes out:

To help you understand the calculations, I’m going to drop back to supporing the 3Gs at 320px wide.  Corona looks at at your device and determines it’s width.  It then takes the width value from the config.lua and does a calculation.  In this case:   device = 640, config.lua = 320 so its = 2.0.   Now you want to run it on an iPad2/mini at 768px wide:

768 / 640 = 2.4

And iPad retina (iPad3/4) at 1536 wide would be:  4.8.

If you are only dealing with Apple, then you can get away with 2.0 and 4.0 as the values because the Retina phones are 2.0x greater than 320.   The iPad regular is 2.4 which is greater than or equal to 2.0 but less than 4.0, so it would pick up the @2x images.  Then the iPad Retina at 4.8 is greater than 4.0 so it picks up the @4x graphics.

Because I wrote the ultimate config.lua to support the gazilliion android devices, I had to make some decisions for those devices.  Some devices, like the Motorola Droid was a 480x800 type device.   480 is half way between 320 and 640.  I would prefer for Corona to use the @2x image on this device and scale it down than to pick up the 1x image and blow it up.  480/320 = 1.5, which is where the 1.5 comes from.  This allows all of those 1024x600 class devices (like the 1st gen Kindle Fire and Nook Color Tablet) to pick up the @2x image.  Then the new HD tablets using the 3.0 multiplier would pick up the @4x images (basically any device 960px or wider – remember this is on the short side, not the long side)

Simply put, if the device’s width is less than 480px, you get the regular 1x graphic.  If you are 480px-959px wide, you get the @2x graphic.  If you are 960px or wider you get the @4x graphic.  Remember (can’t emphasize this enough.  Its the width when holding the device in portrait mode regardless on if your app is landscape or portrait)

If you drop Android out of the equation and want to focus only on Apple devices (at least until we see what the next round of iPhone’s are going to hold for us), then you can use 2.0 and 4.0 to get the behavior you want.  If you don’t want to support iPads, then you don’t need @4x.  If you don’t want to support the 3Gs, then you don’t need the small images either and can just do everything on a 640px wide basis.

EDIT: Fixed some typos.

#7

Thank you so much Rob. This has been very enlightening and I appreciate your expertise on the subject.

#8 
if ( string.sub( system.getInfo("model"), 1, 2 ) == "iP" and display.pixelHeight \> 960 ) then application = { content = { width = 320, height = 568, scale = "letterBox", xAlign = "center", yAlign = "center", imageSuffix = { ["@2x"] = 1.5, ["@4x"] = 3.0, }, }, } else application = { content = { width = 320, height = 480, scale = "letterBox", xAlign = "center", yAlign = "center", imageSuffix = { ["@2x"] = 1.5, ["@4x"] = 3.0, }, }, } end
#9

Thanks Rob and I appreciate this but I have seen this before. It’s seems like a fair bit of overkill to just target iphone4 and 5.

From what I can understand I would need 3 different images for each case which would be 6 different images in all yes?

Is there not a simpler way to approach this?

Thanks so much for responding. :slight_smile:

–edit–

Maybe I’m just not understanding but can’t I just do this:

application = { content = { width = 640, height = 960, scale = "letterBox", xAlign = "center", yAlign = "center", }, }  

and perhaps just test for a tall version and do this:

application = { content = { width = 640, height = 1136, scale = "letterBox", xAlign = "center", yAlign = "center", }, }  

or is this completely the wrong way to approach it?

I guess I do see the issue with the ‘tall’ version in that there would be no way to differentiate between the images. The thing I don’t understand is :

640 x 1.5 is more than 640. That doesn’t make sense. The iphone5 is the same width as the iphone4 isn’t it?

#10 
if ( display.pixelHeight \> 960 ) then    application =    {       content =       {          width = 640,          height = 1136,          scale = "letterbox",       },    } else    application =    {       content =       {          width = 640,          height = 960,          scale = "letterbox",       },    } end

Now you just need one graphic for your things.   You’re background should be 640x1136 even when loading on the iPhone4’s  and just make sure nothing important in the background would get cut off when the background bleeds off of the smaller device’s screen.  Just load it in using display.newImageRect(“background.png”, 640, 1136) even on the iPhone 4. 

If your background must be different then you will need two backgrounds and you will have to do the test to see if the pixelHeight is greater than 960 in your code and load the other background as needed.

 

#11

Thanks Rob, this gets me alot closer. I was kind of envisioning having 2 different images and using @2x for the iphone5. Is this possible? I just don’t fully grasp the 1.5 part of it.

–edit–

do I have to use the scaling formula at all?

or can I just create a default image at 640x960 and create a tall (iphone5) image at 640x1136 and call it @TALL or something?

I’d rather not have to use the scaling 1.5, 2.0 etc. as it doesn’t appear to be exact.

#12

Both the iPhone 4 and iPhone 5 are 640px wide devices.  They will use the exact same image.   You cannot use dynamic images to handle different shapes only different sizes.

The scaling number are a “greater than” operation.  Since my last config.lua doesn’t use it, you don’t need it if you’re only supporting those two (well three if you count the 4 and 4S) devices. 

But for your future use if and when you decide you want to support a 3G and a 9F when ever that comes out:

To help you understand the calculations, I’m going to drop back to supporing the 3Gs at 320px wide.  Corona looks at at your device and determines it’s width.  It then takes the width value from the config.lua and does a calculation.  In this case:   device = 640, config.lua = 320 so its = 2.0.   Now you want to run it on an iPad2/mini at 768px wide:

768 / 640 = 2.4

And iPad retina (iPad3/4) at 1536 wide would be:  4.8.

If you are only dealing with Apple, then you can get away with 2.0 and 4.0 as the values because the Retina phones are 2.0x greater than 320.   The iPad regular is 2.4 which is greater than or equal to 2.0 but less than 4.0, so it would pick up the @2x images.  Then the iPad Retina at 4.8 is greater than 4.0 so it picks up the @4x graphics.

Because I wrote the ultimate config.lua to support the gazilliion android devices, I had to make some decisions for those devices.  Some devices, like the Motorola Droid was a 480x800 type device.   480 is half way between 320 and 640.  I would prefer for Corona to use the @2x image on this device and scale it down than to pick up the 1x image and blow it up.  480/320 = 1.5, which is where the 1.5 comes from.  This allows all of those 1024x600 class devices (like the 1st gen Kindle Fire and Nook Color Tablet) to pick up the @2x image.  Then the new HD tablets using the 3.0 multiplier would pick up the @4x images (basically any device 960px or wider – remember this is on the short side, not the long side)

Simply put, if the device’s width is less than 480px, you get the regular 1x graphic.  If you are 480px-959px wide, you get the @2x graphic.  If you are 960px or wider you get the @4x graphic.  Remember (can’t emphasize this enough.  Its the width when holding the device in portrait mode regardless on if your app is landscape or portrait)

If you drop Android out of the equation and want to focus only on Apple devices (at least until we see what the next round of iPhone’s are going to hold for us), then you can use 2.0 and 4.0 to get the behavior you want.  If you don’t want to support iPads, then you don’t need @4x.  If you don’t want to support the 3Gs, then you don’t need the small images either and can just do everything on a 640px wide basis.

EDIT: Fixed some typos.

#13

Thank you so much Rob. This has been very enlightening and I appreciate your expertise on the subject.