Does an iphone 5 compatible need different dimension images?

Solar2D General Questions/Discussion
#1

Hello guys.

I just started looking at the iphone 5 compatibility issue and what I found reading the forum/blog is that I need at minimum:

  • New splash image: Default-568h@2x.png.

  • Any background image (image that suppose to cover all the screen (so no black bars left/right…landscape app) which should be 640 x 1136

What I am not sure about is the rest of the images like buttons, enemies…Do they need to be of a certain resolution or the system would simply use the @2x images that was used in the case iphone4/4S? Or I do not have to worry because of dynamic scaling?

It is probably a stupid question but I am a little confuse right now about this issue.

THANKS!

Mo [import]uid: 100814 topic_id: 32640 reply_id: 332640[/import]

#2

I presumed it would use the same files as the 4/4S, so depends what your config file says.

So if your targeting 3/3G with 320 x 480 and you have @2x setup, then they would be used.

Dave [import]uid: 117617 topic_id: 32640 reply_id: 129783[/import]

#3

Hello thedavebaxter,

Thanks so much for your quick response. I was assuming that too. Yes I am supporting 3GS and 4/4S/5 and ipad2 and have the regular size and @2x images.

But what about background image? I already have 640 x 960 (iphone 4/4S) but the iphone 5 takes 640 x 1136. Would the system automatically use the 640x 1136 version of say a background image that suppose to cover the all screen.

I am maybe over-thinking this:)

Mo [import]uid: 100814 topic_id: 32640 reply_id: 129788[/import]

#4

No it would use the 960 image and you would have borders.

I think you have seen this thread, but just incase -

http://developer.coronalabs.com/forum/2012/03/12/understanding-letterbox-scalling

I wonder if you calculated the scale factor of the 5 against the 3, you could put a extra line in config.

So say it was 1.5 as big, then a extra line in config with 1.5 = @1.5x

Might be worth creating some different size images, write all over them (so you know which one is being used) create a load of lines in config covering 2 to say 5 (@2x to @5x) in half steps and see which one the iPhone 5 uses.

All of this is just guess work mind you as am new to this.

What I did was done it exactly how that thread says. Then on my title screen changed the background colour to the same colour as my background image. That way the bars on either side (or top and bottom) are not noticeable. My main game backgrounds actually scroll, so I just made them a bit wider, the wider bits are only seen on iPhone 5, on other devices they are off the screen.

My app is landscape, hence why I keep saying either side, instead of top and bottom.

Dave
[import]uid: 117617 topic_id: 32640 reply_id: 129791[/import]

#5

I presumed it would use the same files as the 4/4S, so depends what your config file says.

So if your targeting 3/3G with 320 x 480 and you have @2x setup, then they would be used.

Dave [import]uid: 117617 topic_id: 32640 reply_id: 129783[/import]

#6

Hello thedavebaxter,

Thanks so much for your quick response. I was assuming that too. Yes I am supporting 3GS and 4/4S/5 and ipad2 and have the regular size and @2x images.

But what about background image? I already have 640 x 960 (iphone 4/4S) but the iphone 5 takes 640 x 1136. Would the system automatically use the 640x 1136 version of say a background image that suppose to cover the all screen.

I am maybe over-thinking this:)

Mo [import]uid: 100814 topic_id: 32640 reply_id: 129788[/import]

#7

@thedavebaxter

Thanks so much. No I did not see that post. Thank you for sharing. It is obvious even all this time, I have still a lot to learn about letter box scaling! I am going thru this post and your suggestions as we speak. One thing I do not get is the why the need to change the content width and height when switching to an ipad (for an app that should work both ipad and iphone)

[lua]application =
{
content =
{
width =768, height = 1024,
My understanding is config.lua set the virtual area (where each object are positioned) I have chosen 320/480 (landscape app) so I thought you to keep the same dimensions in the config.lua for all devices and simply change the

[lua]imageSuffix =
{
["@2x"] = 2,
},[/lua]

If I used width = 768 and height = 1024 when on ipad then the images are low res so all the images are showing small. If I keep the 320/480 then the images are normal (using @2x)

Anway I will work more on this and report here or ask more questions if i may.

Thanks again so much.

Mo

[import]uid: 100814 topic_id: 32640 reply_id: 129803[/import]

#8

No it would use the 960 image and you would have borders.

I think you have seen this thread, but just incase -

http://developer.coronalabs.com/forum/2012/03/12/understanding-letterbox-scalling

I wonder if you calculated the scale factor of the 5 against the 3, you could put a extra line in config.

So say it was 1.5 as big, then a extra line in config with 1.5 = @1.5x

Might be worth creating some different size images, write all over them (so you know which one is being used) create a load of lines in config covering 2 to say 5 (@2x to @5x) in half steps and see which one the iPhone 5 uses.

All of this is just guess work mind you as am new to this.

What I did was done it exactly how that thread says. Then on my title screen changed the background colour to the same colour as my background image. That way the bars on either side (or top and bottom) are not noticeable. My main game backgrounds actually scroll, so I just made them a bit wider, the wider bits are only seen on iPhone 5, on other devices they are off the screen.

My app is landscape, hence why I keep saying either side, instead of top and bottom.

Dave
[import]uid: 117617 topic_id: 32640 reply_id: 129791[/import]

#9

I agree with the way you thought you should do it. Never change the values on config and use imageSuffix.

I don’t understand how some people have different width / height depending on the device. For me that just wouldn’t work when positioning stuff on screen.

I have 320 x 480 and use @2x and @4x (same as you). I made my background images the size as recommended by that post (360 x 480 for @1x). This seems to work perfectly on all devices including Android.

Dave [import]uid: 117617 topic_id: 32640 reply_id: 129809[/import]

#10

Lets say for instance your art is all scaled for the retina iPhones at 640x960 and you want to use letterbox scaling so that there is no stretching on the iPhone 5. You will need your backgrounds at 640x1136, but the rest of your graphics can stay the same since they are using the same pixel density.

You will need to put a conditional block in your config.lua because if you just leave it at width=640, height=960 (or 320 and 480, if you’re using that scale) then the extra space will not respond to touch events. You have to specifically scale that device at 640x1136 and have a second block at 640x960. If you follow the config.lua examples in the Corona Lab’s blog post this will take care of you.

What about the iPad? Well it’s a completely different ratio and I tend to scale things based on 768 pixels so I have 3 blocks, one for the iPad, one for the iPhone5 and one for everything else, but scaled at 768. So the iPad is 768x1024, the iPhone 5 is 768x1363 and the rest is 768x1152.

I then make my background graphics to be the 768x1363 size and don’t put anything important outside of the 1024 middle portion of the graphics. When I load the background using display.newImageRect() I use the 768x1636 dimensions and if the device can’t show it all, those bits are off screen. X and Y of 0 are where they should be. X and Y of display.contentWidth and display.contentHeight are where they should be as well. Then for positioning, if I anchor most everything to the center +/- some offset and try to keep it within the 1024 width on the iPad and then things I want at the edges, I’ll use 0 and display.contentWidth/Height to position them. That way when I’m on a wide device those elements move away from the center, on narrower devices they move towards the center. Things that need to be towards the middle or not move at all use the center as their anchor point.

I went a little insane the other day on my Yosemite Photo Gallery app since B&N didn’t want letterboxed apps (it still letterboxes the photos, but the UI is now responsive) Here is my uber complex config.lua. Okay I’m tweeking this a bit on the fly for you. This should be iPad mini proof.

[code]
if string.sub(system.getInfo(“model”),1,4) == “iPad” then
application = {
content = {
width = 768,
height = 1024,
scale = “letterBox”,
fps = 30,

imageSuffix = {
["@2x"] = 2,
}

}
}
elseif string.sub(system.getInfo(“model”), 1, 2) == “iP” and display.pixelHeight > 960 then
application = {
content = {
width = 768,
height = 1363,
scale = “letterbox”,
fps = 30,
imageSuffix = {
["@2x"] = 1.5,
}
}
}
elseif string.sub(system.getInfo(“model”), 1, 2) == “iP” and display.pixelHeight <= 960 then
application = {
content = {
width = 768,
height = 1152,
scale = “letterbox”,
fps = 30,
imageSuffix = {
["@2x"] = 1.5,
}
}
}
else
application = {
content = {
width = 768,
height = 1363,
scale = “letterBox”,
fps = 30,
imageSuffix = {
["@2x"] = 2,
}

}
}
end
[/code] [import]uid: 19626 topic_id: 32640 reply_id: 129816[/import]

#11

@thedavebaxter

Thanks so much. No I did not see that post. Thank you for sharing. It is obvious even all this time, I have still a lot to learn about letter box scaling! I am going thru this post and your suggestions as we speak. One thing I do not get is the why the need to change the content width and height when switching to an ipad (for an app that should work both ipad and iphone)

[lua]application =
{
content =
{
width =768, height = 1024,
My understanding is config.lua set the virtual area (where each object are positioned) I have chosen 320/480 (landscape app) so I thought you to keep the same dimensions in the config.lua for all devices and simply change the

[lua]imageSuffix =
{
["@2x"] = 2,
},[/lua]

If I used width = 768 and height = 1024 when on ipad then the images are low res so all the images are showing small. If I keep the 320/480 then the images are normal (using @2x)

Anway I will work more on this and report here or ask more questions if i may.

Thanks again so much.

Mo

[import]uid: 100814 topic_id: 32640 reply_id: 129803[/import]

#12

Thank you guys. Thanks Rob, I admit I am a litte bit confused. As thedavebaxter said, always using 320/480 seems to work fine for me. I tried the config you are refering to but it will screwed up my objects locations since set them up a long time ago using 320/480. I went back to 3230/480 and this seems to work for all IOS devices including the iphone 5 and ipad3.

I also do not see any issue any issue touching buttons on the side of the screen.

The only issue I had was with iphon5 and background image. So I did this (note the,568,384 for iphone 5) :

[lua]if isTall == false then

space = display.newImageRect(imagesPath…“space.jpg”,512,384,true )

space.x = display.contentWidth / 2
space.y = display.contentHeight / 2
space:setFillColor( mRand(0,255), mRand(10,255), mRand(0,255) )
space.alpha = 0.7

else

space = display.newImageRect(imagesPath…“space.jpg”,568,384,true )
space.x = display.contentWidth / 2
space.y = display.contentHeight / 2
space:setFillColor( mRand(0,255), mRand(10,255), mRand(0,255) )
space.alpha = 0.7

end[/lua]

and here my config.lua

[lua]application =
{
content =
{
width = 320,
height = 480,
scale = “letterbox”,
antialias = false,

audioPlayFrequency = 44100,
fps = 30,
imageSuffix =
{

["@2x"] = 2, – for iPhone, iPod touch, iPad1, and iPad2
– ["@4x"] = 4, – for iPad 3

},
},
}[/lua]

Please note that background image space.jpg has 2 versions (1024x768 and 512x384) I do not mind the zoom in in the case of iphone5 since it is just as stars field and look good for all device (at least on the ios xcode simulator on the Mac) since I do not have a iphone5 device (nor ipad3)

Even so it seems to work for me but I still need to learn more about the config file so I will understand why it is working and not working…

In event thanks a lot of guys. I really appreciate the time and your suggestions.

Mo
[import]uid: 100814 topic_id: 32640 reply_id: 129832[/import]

#13

I agree with the way you thought you should do it. Never change the values on config and use imageSuffix.

I don’t understand how some people have different width / height depending on the device. For me that just wouldn’t work when positioning stuff on screen.

I have 320 x 480 and use @2x and @4x (same as you). I made my background images the size as recommended by that post (360 x 480 for @1x). This seems to work perfectly on all devices including Android.

Dave [import]uid: 117617 topic_id: 32640 reply_id: 129809[/import]

#14

Lets say for instance your art is all scaled for the retina iPhones at 640x960 and you want to use letterbox scaling so that there is no stretching on the iPhone 5. You will need your backgrounds at 640x1136, but the rest of your graphics can stay the same since they are using the same pixel density.

You will need to put a conditional block in your config.lua because if you just leave it at width=640, height=960 (or 320 and 480, if you’re using that scale) then the extra space will not respond to touch events. You have to specifically scale that device at 640x1136 and have a second block at 640x960. If you follow the config.lua examples in the Corona Lab’s blog post this will take care of you.

What about the iPad? Well it’s a completely different ratio and I tend to scale things based on 768 pixels so I have 3 blocks, one for the iPad, one for the iPhone5 and one for everything else, but scaled at 768. So the iPad is 768x1024, the iPhone 5 is 768x1363 and the rest is 768x1152.

I then make my background graphics to be the 768x1363 size and don’t put anything important outside of the 1024 middle portion of the graphics. When I load the background using display.newImageRect() I use the 768x1636 dimensions and if the device can’t show it all, those bits are off screen. X and Y of 0 are where they should be. X and Y of display.contentWidth and display.contentHeight are where they should be as well. Then for positioning, if I anchor most everything to the center +/- some offset and try to keep it within the 1024 width on the iPad and then things I want at the edges, I’ll use 0 and display.contentWidth/Height to position them. That way when I’m on a wide device those elements move away from the center, on narrower devices they move towards the center. Things that need to be towards the middle or not move at all use the center as their anchor point.

I went a little insane the other day on my Yosemite Photo Gallery app since B&N didn’t want letterboxed apps (it still letterboxes the photos, but the UI is now responsive) Here is my uber complex config.lua. Okay I’m tweeking this a bit on the fly for you. This should be iPad mini proof.

[code]
if string.sub(system.getInfo(“model”),1,4) == “iPad” then
application = {
content = {
width = 768,
height = 1024,
scale = “letterBox”,
fps = 30,

imageSuffix = {
["@2x"] = 2,
}

}
}
elseif string.sub(system.getInfo(“model”), 1, 2) == “iP” and display.pixelHeight > 960 then
application = {
content = {
width = 768,
height = 1363,
scale = “letterbox”,
fps = 30,
imageSuffix = {
["@2x"] = 1.5,
}
}
}
elseif string.sub(system.getInfo(“model”), 1, 2) == “iP” and display.pixelHeight <= 960 then
application = {
content = {
width = 768,
height = 1152,
scale = “letterbox”,
fps = 30,
imageSuffix = {
["@2x"] = 1.5,
}
}
}
else
application = {
content = {
width = 768,
height = 1363,
scale = “letterBox”,
fps = 30,
imageSuffix = {
["@2x"] = 2,
}

}
}
end
[/code] [import]uid: 19626 topic_id: 32640 reply_id: 129816[/import]

#15

Thank you guys. Thanks Rob, I admit I am a litte bit confused. As thedavebaxter said, always using 320/480 seems to work fine for me. I tried the config you are refering to but it will screwed up my objects locations since set them up a long time ago using 320/480. I went back to 3230/480 and this seems to work for all IOS devices including the iphone 5 and ipad3.

I also do not see any issue any issue touching buttons on the side of the screen.

The only issue I had was with iphon5 and background image. So I did this (note the,568,384 for iphone 5) :

[lua]if isTall == false then

space = display.newImageRect(imagesPath…“space.jpg”,512,384,true )

space.x = display.contentWidth / 2
space.y = display.contentHeight / 2
space:setFillColor( mRand(0,255), mRand(10,255), mRand(0,255) )
space.alpha = 0.7

else

space = display.newImageRect(imagesPath…“space.jpg”,568,384,true )
space.x = display.contentWidth / 2
space.y = display.contentHeight / 2
space:setFillColor( mRand(0,255), mRand(10,255), mRand(0,255) )
space.alpha = 0.7

end[/lua]

and here my config.lua

[lua]application =
{
content =
{
width = 320,
height = 480,
scale = “letterbox”,
antialias = false,

audioPlayFrequency = 44100,
fps = 30,
imageSuffix =
{

["@2x"] = 2, – for iPhone, iPod touch, iPad1, and iPad2
– ["@4x"] = 4, – for iPad 3

},
},
}[/lua]

Please note that background image space.jpg has 2 versions (1024x768 and 512x384) I do not mind the zoom in in the case of iphone5 since it is just as stars field and look good for all device (at least on the ios xcode simulator on the Mac) since I do not have a iphone5 device (nor ipad3)

Even so it seems to work for me but I still need to learn more about the config file so I will understand why it is working and not working…

In event thanks a lot of guys. I really appreciate the time and your suggestions.

Mo
[import]uid: 100814 topic_id: 32640 reply_id: 129832[/import]