Cross platform resolution

schwab · October 2, 2012, 2:58pm

Hi, I have a newbie question and hope someone can clarify for me.

I am trying to build an app mostly for iOS right now but is struggling to get it display properly in the simulator.

I want my app to look perfect in both iPad, Iphone and Iphone 5. Part of the app uses x, y coordinates and it seems like the x, y coordinates does not scale according to device. It results in some object displaying off screen since my x,y coordinates are based on iPad resolution. Is there a way to fix this?

Also, before I upgraded my Corona build, everything looks fine, but after I upgraded, all images look stretched. Anyone know why? Thanks in advance! [import]uid: 26410 topic_id: 31580 reply_id: 331580[/import]

brandon.kleinert · October 2, 2012, 3:27pm

Hey, so I’m not sure what the “official” way to do this is (I’m still a newbie, myself) but I’ve found a satisfactory way to go between phone / tablet size without too much headache.

Basically, instead of using absolute x/y coordinates, I place everything based on display.contentWidth / Height and then adjust based on the object width / height (to make this work, I do maintain separate image sets for different size devices)

So my object placement looks something like:

  
\_W = display.contentWidth -- Declared in main.lua  
\_H = display.contentHeight  
  
--  
  
local object = display.newImage("images/pic.png")  
object.x = \_W + object.width  
object.y = \_H - object.height/2  
displayGroup:insert(object)

This way, everything maintains their proper relative locations whenever I use my code for another device size.

Corona may have it’s own way of scaling content. Never used it. But the method above (combined with maintaining different image sets) has given me a guaranteed way to control how my scenes look on whatever device I’m building for.

Hope this helps,

Brandon [import]uid: 136211 topic_id: 31580 reply_id: 126177[/import]

mike470 · October 2, 2012, 7:24pm

My app is landscape only. What I do (the app now works on every device out there) is:

set the resolution to iPad 2’s.
scale - letterbox
get the left/right/up/down coords of the scene

local scX1 = display.screenOriginX
local scY1 = 0
local scX2 = scX1+math.abs(scX1)*2+display.contentWidth-1
local scY2 = scY1+display.contentHeight-1

if scX1 is negative (so the screen is wider than iPad’s) - for backgrounds: if they are suitable, just stretch them into the new screen. For backgrounds that would get too distorted like that, I just have extra right and left panes that I load when needed.
All placement and drawing of dynamic elements is done relative to the sc* parameters above.
Some UI elements should be scaled up in order to be reasonably accessible to human fingertips on smaller devices. How to do that is whole different story.

If you want to see how this works in practice - look for “Math to the Rescue Lite” on Apple store or Android store (or Amazon or Nook), install and run it.

For example, for new iPad3, for iPhone 5, for new Kindles and new Nooks, all I had to do was recompile and upload. No code changes. (The recompiles were for OS changes, not for scaling). [import]uid: 160496 topic_id: 31580 reply_id: 126188[/import]

Omnigeek_Media · October 2, 2012, 8:58pm

I take a little bit different approach to this.

First I use background images that makes sure nothing of importance is around the edges and I use a size of like 360x570 or something similar. That way, depending on the actual aspect ratio of the screen while using LetterBox, it will put some of the background off screen. This is called the bleed area. Just don’t put anything important on the background in areas that could get cropped.

Next for my UI elements, things are either anchored to a side or based off of the center. Thus if something needs to be at the top, it gets a Y = 0, if it needs to be at the bottom, Y = display.contentHeight (of course I’ll add or subtract some based on the size of the element I’m placing. Likewise somethings need to be a the left or right edge, so I use 0 or display.contentWidth to place those elements.

Things that need to be towards the center, I’ll use display.contentWidth / 2 and display.contentHeight / 2 and then add or subtract an offset from center where I want it.

So like in my game OmniTrivia (http://itunes.apple.com/us/app/omnitrivia/id490135157?mt=8) on the category select screen I have a wheel of fortune type spinning wheel. I anchor the wheel to the left side and the logo to the right side. On a wide device like the iPhone 5, this gives me some dead space in the middle since the wheel and logo are pulled out towards the sides. When the app runs on more of a square device like the iPad I have less dead space in the middle as those UI elements get pushed closer together. But looking at the settings screen, I don’t want my on/off switch wondering too far from my labels, so they are all anchored to the center and when the device gets wider I end up with dead space on the outer edges and my elements in the middle stay at the same relative spot. [import]uid: 19626 topic_id: 31580 reply_id: 126199[/import]

walter · October 4, 2012, 9:12am

BTW, for convenience, we’ve also added display.contentCenterX/Y:

http://docs.coronalabs.com/api/library/display/contentCenterX.html
http://docs.coronalabs.com/api/library/display/contentCenterY.html

If you set the scale mode to letterbox like Rob is doing, it means you can still draw to the portion of the screen that’s outside your content. In that case, it’s handy to know what the screen size is in content units (as opposed to pixels), so we’ve added display.actualContentWidth and display.actualContentHeight to the daily builds. [import]uid: 26 topic_id: 31580 reply_id: 126367[/import]

brandon.kleinert · October 2, 2012, 3:27pm

Hey, so I’m not sure what the “official” way to do this is (I’m still a newbie, myself) but I’ve found a satisfactory way to go between phone / tablet size without too much headache.

Basically, instead of using absolute x/y coordinates, I place everything based on display.contentWidth / Height and then adjust based on the object width / height (to make this work, I do maintain separate image sets for different size devices)

So my object placement looks something like:

  
\_W = display.contentWidth -- Declared in main.lua  
\_H = display.contentHeight  
  
--  
  
local object = display.newImage("images/pic.png")  
object.x = \_W + object.width  
object.y = \_H - object.height/2  
displayGroup:insert(object)

This way, everything maintains their proper relative locations whenever I use my code for another device size.

Corona may have it’s own way of scaling content. Never used it. But the method above (combined with maintaining different image sets) has given me a guaranteed way to control how my scenes look on whatever device I’m building for.

Hope this helps,

Brandon [import]uid: 136211 topic_id: 31580 reply_id: 126177[/import]

mike470 · October 2, 2012, 7:24pm

My app is landscape only. What I do (the app now works on every device out there) is:

set the resolution to iPad 2’s.
scale - letterbox
get the left/right/up/down coords of the scene

local scX1 = display.screenOriginX
local scY1 = 0
local scX2 = scX1+math.abs(scX1)*2+display.contentWidth-1
local scY2 = scY1+display.contentHeight-1

if scX1 is negative (so the screen is wider than iPad’s) - for backgrounds: if they are suitable, just stretch them into the new screen. For backgrounds that would get too distorted like that, I just have extra right and left panes that I load when needed.
All placement and drawing of dynamic elements is done relative to the sc* parameters above.
Some UI elements should be scaled up in order to be reasonably accessible to human fingertips on smaller devices. How to do that is whole different story.

If you want to see how this works in practice - look for “Math to the Rescue Lite” on Apple store or Android store (or Amazon or Nook), install and run it.

For example, for new iPad3, for iPhone 5, for new Kindles and new Nooks, all I had to do was recompile and upload. No code changes. (The recompiles were for OS changes, not for scaling). [import]uid: 160496 topic_id: 31580 reply_id: 126188[/import]

Omnigeek_Media · October 2, 2012, 8:58pm

I take a little bit different approach to this.

First I use background images that makes sure nothing of importance is around the edges and I use a size of like 360x570 or something similar. That way, depending on the actual aspect ratio of the screen while using LetterBox, it will put some of the background off screen. This is called the bleed area. Just don’t put anything important on the background in areas that could get cropped.

Next for my UI elements, things are either anchored to a side or based off of the center. Thus if something needs to be at the top, it gets a Y = 0, if it needs to be at the bottom, Y = display.contentHeight (of course I’ll add or subtract some based on the size of the element I’m placing. Likewise somethings need to be a the left or right edge, so I use 0 or display.contentWidth to place those elements.

Things that need to be towards the center, I’ll use display.contentWidth / 2 and display.contentHeight / 2 and then add or subtract an offset from center where I want it.

So like in my game OmniTrivia (http://itunes.apple.com/us/app/omnitrivia/id490135157?mt=8) on the category select screen I have a wheel of fortune type spinning wheel. I anchor the wheel to the left side and the logo to the right side. On a wide device like the iPhone 5, this gives me some dead space in the middle since the wheel and logo are pulled out towards the sides. When the app runs on more of a square device like the iPad I have less dead space in the middle as those UI elements get pushed closer together. But looking at the settings screen, I don’t want my on/off switch wondering too far from my labels, so they are all anchored to the center and when the device gets wider I end up with dead space on the outer edges and my elements in the middle stay at the same relative spot. [import]uid: 19626 topic_id: 31580 reply_id: 126199[/import]

walter · October 4, 2012, 9:12am

BTW, for convenience, we’ve also added display.contentCenterX/Y:

http://docs.coronalabs.com/api/library/display/contentCenterX.html
http://docs.coronalabs.com/api/library/display/contentCenterY.html

If you set the scale mode to letterbox like Rob is doing, it means you can still draw to the portion of the screen that’s outside your content. In that case, it’s handy to know what the screen size is in content units (as opposed to pixels), so we’ve added display.actualContentWidth and display.actualContentHeight to the daily builds. [import]uid: 26 topic_id: 31580 reply_id: 126367[/import]