Anyone have tips for designing for multiple resolutions?

[abridgedun]

Hey, guys. My first app will go live in a few days, and I’ve learned a lot about Corona and lua in that time (Love Lua; Corona’s okay).

I need a bit of clarification, though.

The iPhone 4 screen resolution is 960×640, which is reflected in the simulator. In an empty screen, I should be able to utilize the full resolution. Why is it when I run the following code in iPhone4 mode, it reports back with “Width: 768 Height:1024”? That’s more than the phone’s actual resolution.

local W = display.viewableContentWidth; local H = display.viewableContentHeight; print("Width: " .. W .. " Height:" .. H);

Secondly, phones have many different resolutions. If I have a moving camera it gets complicated. Do you guys have any techniques or tips to make this easier? I think I’ll just move around a parent group and work at a higher resolution (1920x1080) and scale down a group that contains everything as much as I need to. I’d effectively crop a bit off the sides if I need to. 

I guess my main issue is that I don’t know where to begin learning how to design for all these phones without getting screwed over.

Thanks,

Matthew

[bjsorrentino]

Hi Matthew,

When beginning, one essential aspect to understand is the Corona “content area”. The following guide and videos should help you with this. Working with multiple phones, tablets, screen sizes, etc. is very simple in Corona once you understand the content area and how it relates to device screens.

http://docs.coronalabs.com/guide/basics/configSettings/index.html#contentscaling

http://youtu.be/RwVlzJtQWd8

Take care,

Brent

[abridgedun]

Thanks for the useful video, Brent. Do you have any tips for abstracting an ingame camera?

[roaminggamer]

@abridgedun,

I sense the wrong attitude.  It seems like you want a universal answer to be provided to you without putting in the effort to learn about how this stuff works.

First,   I suggest you make a simple app that puts a few shapes and images on the screen.

Second, read about and experiment with config.lua settings till you understand them.

Third, settle in on a configuration that meets your scaling needs.

Fourth, Now worry about things like virtual cameras.  You’re jumping the gun trying to figure out a semi-complex concept like a virtual camera when you don’t even understand design-space vs true screen resolution and the ramifcations of auto-scaling.  

By the way, these topics are pretty simple, but you’ve got to spend the time.  The staff and community at large have put in a lot of effort to document, discuss, and give examples of content scaling (specifically focused on config.lua).  You simply need to look for it, read it, and experiment with it.  Useful experience is sometimes hard-won.

I must admit I am a bit offended by your leading statement, “Love Lua; Corona’s okay”.  It’s like saying, “Hey guys, I think Corona kinda sucks, but don’t mind that.  Just spend your time packaging up a universal solve-all answer and give it to me ok!”  Now, if you’d said, “Corona’s OK, and here is why I think so…vast experience list follows…” then I might not be so irked.  

Lastly, you’re certainly still welcome here, so take this semi-rebuke with a grain of salt (or a little sugar).  Corona is an excellent API, but you’ll have to invest some effort in it.  The more you invest, the more you will be rewarded.  

Best of luck to you, and to show I’m not a bad guy, here is a very simple camera:

local centerX = display.contentCenterX local centerY = display.contentCenterY local isDisplayObject = function ( obj ) return( obj and obj.removeSelf and type(obj.removeSelf) == "function") end -- == -- fixedCamera() - Follows target exactly. -- == local function fixedCamera( trackObj, layers, params ) if( not isDisplayObject( layers ) ) then return end params = params or {} local lockX = params.lockX local lockY = params.lockY local centered = fnn( params.centered, false) local lx = 0 local ly = 0 if( centered ) then if( lockX ) then lx = trackObj.x else lx = centerX end if( lockY ) then ly = trackObj.y else ly = centerY end else lx = trackObj.x ly = trackObj.y end layers.world.enterFrame = function( event ) if( not isDisplayObject( layers ) ) then return end if( not isDisplayObject( trackObj ) ) then return end local dx = 0 local dy = 0 if(not lockX) then dx = trackObj.x - lx end if(not lockY) then dy = trackObj.y - ly end if(dx or dy) then layers.world:translate(-dx,-dy) lx = trackObj.x ly = trackObj.y end return true end Runtime:addEventListener( "enterFrame", layers.world ) end

This is how you would use the above code:

local layers = display.newGroup() layers.world = display.newGroup() layers.underlay = display.newGroup() layers.overlay = display.newGroup() layers.content1 = display.newGroup() layers.content2 = display.newGroup() layers.content3 = display.newGroup() layers:insert(layers.underlay) layers:insert(layers.world) layers:insert(layers.overlay) layers.world:insert(layers.content1) layers.world:insert(layers.content2) layers.world:insert(layers.content3) -- Display groups are now layerd(bottom-to-top): -- underlay, world, content1, content2, content3, overlay -- -- Place ground tiles in layers.content1 -- Place 'cloud' tiles in layers.content3 -- Place player object and other objects in layers.content2 -- Place interface elements in layers.overlay -- Place Static backgrounds in layers.underlay --Ex: local player = display.newCircle( layers.content2, 10, 10, 20 ) fixedCamera( player, layers, {} ) --Alt: { lockX = true } lock horizontal movement 

You’ll have to experiment from here to learn more about cameras.

[roaminggamer]

It is worth noting, I typed most of that without verifying syntax, so there may be a typo or two.  If so, read the console output and correct the typos.

[abridgedun]

First,   I suggest you make a simple app that puts a few shapes and images on the screen.

I mentioned releasing an app soon; There’s no need to be so condescending. 

[roaminggamer]

Yes, I’m a grumpy git.  My apologies.  I do think it is awesome that you have an app coming soon.  You have made great progress in little time.  I was probably set off by the ‘Corona’s OK’ part.  

If you can, please forgive the assumed slight.  

I still suggest putting together a simple test-bench (the simple app I mentioned) and experimenting w/ config.lua settings.  I think you’ll find that the how and why of config.lua settings soon becomes clear.  I also think you’ll find a setting or recipe that you like and which fits your usage.  We all have different recipes that resonate with the way we work.  

Then, take a look at the supplied camera code and I think it will make sense, or at least be less mysterious.

Best of luck to you on your app and with future progress using Corona.

[corona273]

I mentioned releasing an app soon; There’s no need to be so condescending. 

<roaminggamer> took the time to post nearly 100 lines of code for you. There is a need, simple courtesy implies, to thank him.

I agree with <roaminggamer> that your questions about handling “many different resolutions” (not the camera, but the resolution question) are adequately covered by Corona’s documentation, and you gave no indication that you’ve read them. As a general rule, it’s useful to say: “I’ve read X, Y, and Z, and it doesn’t answer my question. Here’s why…”

Especially when many people in these forums don’t bother to read X, let alone Y and Z.

[roaminggamer]

@corona273 - Thank you for coming to the defense here.  

However, I want to say, abridgedun has a point.  I could have done a better job of phrasing my response so I wouldn’t come across as a jerk.  I’ll try to do better in the future.

Meanwhile, major hat tip and kudos to ‘abridgedun’ for making an app in record time (I truly mean this), and may your progress continue to be rapid.

[corona273]

<roaminggamer>: I aspire to be as throughly pleasant and agreeable as you.

<abridgedun>: Good luck on the app! Actually declaring it finished and shipping it can sometimes be the hardest part and your end appears to be in sight…

[bjsorrentino]

Hi Matthew,

When beginning, one essential aspect to understand is the Corona “content area”. The following guide and videos should help you with this. Working with multiple phones, tablets, screen sizes, etc. is very simple in Corona once you understand the content area and how it relates to device screens.

http://docs.coronalabs.com/guide/basics/configSettings/index.html#contentscaling

http://youtu.be/RwVlzJtQWd8

Take care,

Brent

[abridgedun]

Thanks for the useful video, Brent. Do you have any tips for abstracting an ingame camera?

[roaminggamer]

@abridgedun,

I sense the wrong attitude.  It seems like you want a universal answer to be provided to you without putting in the effort to learn about how this stuff works.

First,   I suggest you make a simple app that puts a few shapes and images on the screen.

Second, read about and experiment with config.lua settings till you understand them.

Third, settle in on a configuration that meets your scaling needs.

Fourth, Now worry about things like virtual cameras.  You’re jumping the gun trying to figure out a semi-complex concept like a virtual camera when you don’t even understand design-space vs true screen resolution and the ramifcations of auto-scaling.  

By the way, these topics are pretty simple, but you’ve got to spend the time.  The staff and community at large have put in a lot of effort to document, discuss, and give examples of content scaling (specifically focused on config.lua).  You simply need to look for it, read it, and experiment with it.  Useful experience is sometimes hard-won.

I must admit I am a bit offended by your leading statement, “Love Lua; Corona’s okay”.  It’s like saying, “Hey guys, I think Corona kinda sucks, but don’t mind that.  Just spend your time packaging up a universal solve-all answer and give it to me ok!”  Now, if you’d said, “Corona’s OK, and here is why I think so…vast experience list follows…” then I might not be so irked.  

Lastly, you’re certainly still welcome here, so take this semi-rebuke with a grain of salt (or a little sugar).  Corona is an excellent API, but you’ll have to invest some effort in it.  The more you invest, the more you will be rewarded.  

Best of luck to you, and to show I’m not a bad guy, here is a very simple camera:

local centerX = display.contentCenterX local centerY = display.contentCenterY local isDisplayObject = function ( obj ) return( obj and obj.removeSelf and type(obj.removeSelf) == "function") end -- == -- fixedCamera() - Follows target exactly. -- == local function fixedCamera( trackObj, layers, params ) if( not isDisplayObject( layers ) ) then return end params = params or {} local lockX = params.lockX local lockY = params.lockY local centered = fnn( params.centered, false) local lx = 0 local ly = 0 if( centered ) then if( lockX ) then lx = trackObj.x else lx = centerX end if( lockY ) then ly = trackObj.y else ly = centerY end else lx = trackObj.x ly = trackObj.y end layers.world.enterFrame = function( event ) if( not isDisplayObject( layers ) ) then return end if( not isDisplayObject( trackObj ) ) then return end local dx = 0 local dy = 0 if(not lockX) then dx = trackObj.x - lx end if(not lockY) then dy = trackObj.y - ly end if(dx or dy) then layers.world:translate(-dx,-dy) lx = trackObj.x ly = trackObj.y end return true end Runtime:addEventListener( "enterFrame", layers.world ) end

This is how you would use the above code:

local layers = display.newGroup() layers.world = display.newGroup() layers.underlay = display.newGroup() layers.overlay = display.newGroup() layers.content1 = display.newGroup() layers.content2 = display.newGroup() layers.content3 = display.newGroup() layers:insert(layers.underlay) layers:insert(layers.world) layers:insert(layers.overlay) layers.world:insert(layers.content1) layers.world:insert(layers.content2) layers.world:insert(layers.content3) -- Display groups are now layerd(bottom-to-top): -- underlay, world, content1, content2, content3, overlay -- -- Place ground tiles in layers.content1 -- Place 'cloud' tiles in layers.content3 -- Place player object and other objects in layers.content2 -- Place interface elements in layers.overlay -- Place Static backgrounds in layers.underlay --Ex: local player = display.newCircle( layers.content2, 10, 10, 20 ) fixedCamera( player, layers, {} ) --Alt: { lockX = true } lock horizontal movement 

You’ll have to experiment from here to learn more about cameras.

[roaminggamer]

It is worth noting, I typed most of that without verifying syntax, so there may be a typo or two.  If so, read the console output and correct the typos.

[abridgedun]

First,   I suggest you make a simple app that puts a few shapes and images on the screen.

I mentioned releasing an app soon; There’s no need to be so condescending. 

[roaminggamer]

Yes, I’m a grumpy git.  My apologies.  I do think it is awesome that you have an app coming soon.  You have made great progress in little time.  I was probably set off by the ‘Corona’s OK’ part.  

If you can, please forgive the assumed slight.  

I still suggest putting together a simple test-bench (the simple app I mentioned) and experimenting w/ config.lua settings.  I think you’ll find that the how and why of config.lua settings soon becomes clear.  I also think you’ll find a setting or recipe that you like and which fits your usage.  We all have different recipes that resonate with the way we work.  

Then, take a look at the supplied camera code and I think it will make sense, or at least be less mysterious.

Best of luck to you on your app and with future progress using Corona.

[corona273]

I mentioned releasing an app soon; There’s no need to be so condescending. 

<roaminggamer> took the time to post nearly 100 lines of code for you. There is a need, simple courtesy implies, to thank him.

I agree with <roaminggamer> that your questions about handling “many different resolutions” (not the camera, but the resolution question) are adequately covered by Corona’s documentation, and you gave no indication that you’ve read them. As a general rule, it’s useful to say: “I’ve read X, Y, and Z, and it doesn’t answer my question. Here’s why…”

Especially when many people in these forums don’t bother to read X, let alone Y and Z.

[roaminggamer]

@corona273 - Thank you for coming to the defense here.  

However, I want to say, abridgedun has a point.  I could have done a better job of phrasing my response so I wouldn’t come across as a jerk.  I’ll try to do better in the future.

Meanwhile, major hat tip and kudos to ‘abridgedun’ for making an app in record time (I truly mean this), and may your progress continue to be rapid.

[corona273]

<roaminggamer>: I aspire to be as throughly pleasant and agreeable as you.

<abridgedun>: Good luck on the app! Actually declaring it finished and shipping it can sometimes be the hardest part and your end appears to be in sight…