iPhone 5, imageSuffix, and x, y.

[dan300]

I am kind of getting lost as the new iPhone 5 is coming.
It is easy to make iphone 5 specific app and leave it letterbox or stretch for iphone3/4.
But in the case I want to make a version which can fully support all three all them, how?

What I do before:
image.png for iphone 3
image@2x.png for iphone 4
What should I do for iPhone 5?
In most case, only the background needs to change to 1136*640 ratio, I will use same UI and object for iphone 4 and 5.

And how to define the x, y value for items?
In the case, I want a “back” button on the right bot corner, I can use x = screen size - selfwidth/2, same for the y.
But In the case, for example, my background is a display counter, and I need to put some items on it in the exactly x, y value, how to do so?
This will not be the same for iphone 5 and iphone3/4, as not the same screen ratio. Do I need to have a “if” to check it is iphone 5 or iphone3/4 each time I have to input those x, y value? I am sure there will be a easy way.

It will be great if corona’s staff can give a topic about how to make an app which is support iphone 3, 4, 5 without letterbox. (peach, we need your help )

BTW, is it possible to make both iphone 3/4 version and a iphone 5 version for the same app? So user will download the version suit their device and make things easier.

Thanks [import]uid: 81853 topic_id: 31586 reply_id: 331586[/import]

[CraftyDeano]

My latest app is universal and supports both iPhone 3/4/ & 5 (as well as iPad 2 & 3 resolutions)

I h ave the following set as global variables, targetDevice which returns either ‘iPhone’ or ‘iPad’ and isTall which is either true if iphone 5, or false if iphone 4s (or below model).

also I have my _W & _H variables that center into the middle of the screen no matter what resolution the device is. iPhone 5’s add 88 pixels to both the top and bottom of the display, although because this is at @2x resolution, its 44 pixels. so if you have a toolbar that is sat on the bottom of the screen on an iphone 4, if you -44 on the _H (height) it will sit on the bottom of the iphone 5.

[lua]isTall = ( “iPhone” == system.getInfo( “model” ) ) and ( display.pixelHeight > 960 )
targetDevice = ( system.getInfo( “model” ) )

_W = display.contentWidth / 2
_H = display.contentHeight / 2[/lua]

From here, I use a few if statements to display backgrounds. here is how i display the image for my splash screen (I have removed a lot of code so it is just very basic how to place an image)

[lua]function splash()
if isTall == false then
if targetDevice == “iPhone” or targetDevice == “iPhone Simulator” then
print “iPhone 4s or below”
splashBG = display.newImageRect(“image/splash.png”,320,480)
splashBG.x = _W
splashBG.y = _H

elseif targetDevice == “iPad” or targetDevice == "iPad Simulator"then
print “iPad”
splashBG = display.newImageRect(“imageipad/splash.png”,763,1024)
splashBG.x = _W
splashBG.y = _H
end
else
print “iPhone 5”
splashBG = display.newImageRect(“image/splash5.png”,320,568) – this file is actually 640x1136
splashBG.x = _W
splashBG.y = _H
end
end[/lua]

Here is a link to the config.lua i use in the above project:
https://gist.github.com/3751257

Hope this makes sense, let me know if you need any help or anything clarified.

Note: While this works perfect for me, if there is any other way or better way to structure this, then please let me know! [import]uid: 62706 topic_id: 31586 reply_id: 126216[/import]

[dan300]

Thanks

[import]uid: 81853 topic_id: 31586 reply_id: 126258[/import]

[CraftyDeano]

Looks like you have got it sorted, for those interested, i have a working app below on my github

https://github.com/CraftyDeano/Universal-App-Template [import]uid: 62706 topic_id: 31586 reply_id: 126264[/import]

[dan300]

I will need to download the daily built 909 to use “display.pixelHeight” command.
This will take a while,
Still not understand something about x, y value, such as I want the location of an object fit to the exactly same spot on the background image , do I need to define it twice for iphone3/4 and 5?
I have a look of your main file, thank you so much for your patient and share that code.
But do you think I need to do same thing such as the background example each time when I call a new image?
It is a pain to use “if” all the time.
(there are 30-50 object in each scene for my new app)
[import]uid: 81853 topic_id: 31586 reply_id: 126269[/import]

[dan300]

Is there a way to just let the app have three version? iphone 5, iphone3/4 and ipad? [import]uid: 81853 topic_id: 31586 reply_id: 126270[/import]

[CraftyDeano]

Another way would be to have multipul functions, just copy/paste the functions and name them something else and use an if statement to call the function. Example below.

As you are dealing with different resolutions, you will most likely need to adjust the x/y value for majority of items.

It made it easier for me having everything referenced to the centre, as all i needed to do was copy/paste the code and adjust the values.

[lua]function main()
if targetDevice == “iPad” or targetDevice == “iPad Simulator” then
backgroundiPad()
else
if isTall == true then
backgroundTall()
else
backgroundNormal()
end
end
end

function backgroundNormal()
print “Normal iPhone”
splashBG = display.newImageRect(“background_NORMAL.png”,320,480)
splashBG.x = _W; splashBG.y = _H
end

function backgroundTall()
print “Tall iPhone”
splashBG = display.newImageRect(“background_TALL.png”,320,568)
splashBG.x = _W; splashBG.y = _H
end

function backgroundiPad()
print “iPad”
splashBG = display.newImageRect(“background_IPAD.png”,763,1024)
splashBG.x = _W; splashBG.y = _H
end

main()[/lua] [import]uid: 62706 topic_id: 31586 reply_id: 126275[/import]

[CraftyDeano]

Oh, you said earlier that only the background needs to change, so you could do an if statement just for the background, then after the ‘if’ do everything else as normal before you close the function. [import]uid: 62706 topic_id: 31586 reply_id: 126276[/import]

[dan300]

@Crafty Thanks, I will try it. [import]uid: 81853 topic_id: 31586 reply_id: 126286[/import]

[CraftyDeano]

My latest app is universal and supports both iPhone 3/4/ & 5 (as well as iPad 2 & 3 resolutions)

I h ave the following set as global variables, targetDevice which returns either ‘iPhone’ or ‘iPad’ and isTall which is either true if iphone 5, or false if iphone 4s (or below model).

also I have my _W & _H variables that center into the middle of the screen no matter what resolution the device is. iPhone 5’s add 88 pixels to both the top and bottom of the display, although because this is at @2x resolution, its 44 pixels. so if you have a toolbar that is sat on the bottom of the screen on an iphone 4, if you -44 on the _H (height) it will sit on the bottom of the iphone 5.

[lua]isTall = ( “iPhone” == system.getInfo( “model” ) ) and ( display.pixelHeight > 960 )
targetDevice = ( system.getInfo( “model” ) )

_W = display.contentWidth / 2
_H = display.contentHeight / 2[/lua]

From here, I use a few if statements to display backgrounds. here is how i display the image for my splash screen (I have removed a lot of code so it is just very basic how to place an image)

[lua]function splash()
if isTall == false then
if targetDevice == “iPhone” or targetDevice == “iPhone Simulator” then
print “iPhone 4s or below”
splashBG = display.newImageRect(“image/splash.png”,320,480)
splashBG.x = _W
splashBG.y = _H

elseif targetDevice == “iPad” or targetDevice == "iPad Simulator"then
print “iPad”
splashBG = display.newImageRect(“imageipad/splash.png”,763,1024)
splashBG.x = _W
splashBG.y = _H
end
else
print “iPhone 5”
splashBG = display.newImageRect(“image/splash5.png”,320,568) – this file is actually 640x1136
splashBG.x = _W
splashBG.y = _H
end
end[/lua]

Here is a link to the config.lua i use in the above project:
https://gist.github.com/3751257

Hope this makes sense, let me know if you need any help or anything clarified.

Note: While this works perfect for me, if there is any other way or better way to structure this, then please let me know! [import]uid: 62706 topic_id: 31586 reply_id: 126216[/import]

[dan300]

Thanks

[import]uid: 81853 topic_id: 31586 reply_id: 126258[/import]

[CraftyDeano]

Looks like you have got it sorted, for those interested, i have a working app below on my github

https://github.com/CraftyDeano/Universal-App-Template [import]uid: 62706 topic_id: 31586 reply_id: 126264[/import]

[dan300]

I will need to download the daily built 909 to use “display.pixelHeight” command.
This will take a while,
Still not understand something about x, y value, such as I want the location of an object fit to the exactly same spot on the background image , do I need to define it twice for iphone3/4 and 5?
I have a look of your main file, thank you so much for your patient and share that code.
But do you think I need to do same thing such as the background example each time when I call a new image?
It is a pain to use “if” all the time.
(there are 30-50 object in each scene for my new app)
[import]uid: 81853 topic_id: 31586 reply_id: 126269[/import]

[dan300]

Is there a way to just let the app have three version? iphone 5, iphone3/4 and ipad? [import]uid: 81853 topic_id: 31586 reply_id: 126270[/import]

[CraftyDeano]

Another way would be to have multipul functions, just copy/paste the functions and name them something else and use an if statement to call the function. Example below.

As you are dealing with different resolutions, you will most likely need to adjust the x/y value for majority of items.

It made it easier for me having everything referenced to the centre, as all i needed to do was copy/paste the code and adjust the values.

[lua]function main()
if targetDevice == “iPad” or targetDevice == “iPad Simulator” then
backgroundiPad()
else
if isTall == true then
backgroundTall()
else
backgroundNormal()
end
end
end

function backgroundNormal()
print “Normal iPhone”
splashBG = display.newImageRect(“background_NORMAL.png”,320,480)
splashBG.x = _W; splashBG.y = _H
end

function backgroundTall()
print “Tall iPhone”
splashBG = display.newImageRect(“background_TALL.png”,320,568)
splashBG.x = _W; splashBG.y = _H
end

function backgroundiPad()
print “iPad”
splashBG = display.newImageRect(“background_IPAD.png”,763,1024)
splashBG.x = _W; splashBG.y = _H
end

main()[/lua] [import]uid: 62706 topic_id: 31586 reply_id: 126275[/import]

[CraftyDeano]

Oh, you said earlier that only the background needs to change, so you could do an if statement just for the background, then after the ‘if’ do everything else as normal before you close the function. [import]uid: 62706 topic_id: 31586 reply_id: 126276[/import]

[dan300]

@Crafty Thanks, I will try it. [import]uid: 81853 topic_id: 31586 reply_id: 126286[/import]