Displaying object at correct coordinates on iPhone 4 and iPhone 5

Getting Started Newbie Questions
#1

My last game, Super Smoothies, was written to run on non-Retina and Retina iPhones. Using Corona’s dynamic scaling this worked well. Not only does Corona use the correct images, but it also displays everything at the correct coordinates. For example, if in my code I display an image at 50, 50 the image appears at 50, 50 on non-Retina devices and at 100, 100 on Retina devices.

Now I am trying to target iPhone 5 too. In terms of images I want my game to use the Retina versions. But, how do I make Corona automatically position those images at the correct coordinates? For example, if I position something at 50, 50 will Corona know to position it at 100, 118 on iPhone 5?
 

Is this something that I have to do manually by adding a scaling value to my positioning coordinates?

#2

Hi @lordmooch,

First thing I must ask: have you added the iPhone5 “launch image” to your project directory? This is required by Apple now, and detailed here: http://docs.coronalabs.com/guide/distribution/buildSettings/index.html#launchimage

That being said, the position of your objects will depend on how you set up your content area. If you set up an “iPhone4” aspect ratio, i.e. 640x960, and that content area is centered as in “yAlign=‘center’” in your config.lua setup, then the object will not automatically adapt to the taller iPhone5 display, assuming you want it higher up or lower down (closer to the screen edges). If you want that, you’ll need to add the necessary offset value to these object positions.

The approach to this may vary, but I prefer to create my offset values at the very top of my code, like this:

[lua]

local ox, oy = math.abs(display.screenOriginX), math.abs(display.screenOriginY)

[/lua]

If you test (print) these values and run in the Simulator, they should vary depending on the simulated device, and return to you the proper “offset” values on iPhone5: meaning, the width and height of the additional space beyond the content area. With that knowledge, you can force an object closer to any screen edge by doing something like this:

[lua]

local objectAlignedBottomEdge = display.newRect( 0, 0, 200, 50 )

objectAlignedBottomEdge.x = display.contentCenterX

objectAlignedBottomEdge.y = 960 - (objectAlignedBottomEdge.height / 2) + oy

[/lua]

This should work in your code too, but it depends on your config setup, scale setting (“letterbox” or “zoomEven”), etc. Other developers may use different methods, and hopefully they’ll contribute here, or you can just experiment on your own.

Hope this helps,

Brent

#3

Hi Brent

Thank you for the detailed reply, I appreciate it. I have added the iPhone 5 “launch image” and that side of it is working correctly.

Your answer is really useful and I’m already seeing the benefits of the offset code you provided. Off to experiment more with my config file etc to see if I can get this working just as I want it.

Cheers!

Michael

#4

Hi @lordmooch,

First thing I must ask: have you added the iPhone5 “launch image” to your project directory? This is required by Apple now, and detailed here: http://docs.coronalabs.com/guide/distribution/buildSettings/index.html#launchimage

That being said, the position of your objects will depend on how you set up your content area. If you set up an “iPhone4” aspect ratio, i.e. 640x960, and that content area is centered as in “yAlign=‘center’” in your config.lua setup, then the object will not automatically adapt to the taller iPhone5 display, assuming you want it higher up or lower down (closer to the screen edges). If you want that, you’ll need to add the necessary offset value to these object positions.

The approach to this may vary, but I prefer to create my offset values at the very top of my code, like this:

[lua]

local ox, oy = math.abs(display.screenOriginX), math.abs(display.screenOriginY)

[/lua]

If you test (print) these values and run in the Simulator, they should vary depending on the simulated device, and return to you the proper “offset” values on iPhone5: meaning, the width and height of the additional space beyond the content area. With that knowledge, you can force an object closer to any screen edge by doing something like this:

[lua]

local objectAlignedBottomEdge = display.newRect( 0, 0, 200, 50 )

objectAlignedBottomEdge.x = display.contentCenterX

objectAlignedBottomEdge.y = 960 - (objectAlignedBottomEdge.height / 2) + oy

[/lua]

This should work in your code too, but it depends on your config setup, scale setting (“letterbox” or “zoomEven”), etc. Other developers may use different methods, and hopefully they’ll contribute here, or you can just experiment on your own.

Hope this helps,

Brent

#5

Hi Brent

Thank you for the detailed reply, I appreciate it. I have added the iPhone 5 “launch image” and that side of it is working correctly.

Your answer is really useful and I’m already seeing the benefits of the offset code you provided. Off to experiment more with my config file etc to see if I can get this working just as I want it.

Cheers!

Michael

#6

I’ve been placing things vertically by making their content relative positions consistent with the background image height instead of the display’s height. for example, for a sliding pointer near the bottom of the screen, I used: pointer.y=background.height*.85 which places it consistently across all devices. I use letterbox, and just add an extra image to cover the bottom gap in the screen of the taller devices. seems to work out okay…

#7

I’ve been placing things vertically by making their content relative positions consistent with the background image height instead of the display’s height. for example, for a sliding pointer near the bottom of the screen, I used: pointer.y=background.height*.85 which places it consistently across all devices. I use letterbox, and just add an extra image to cover the bottom gap in the screen of the taller devices. seems to work out okay…