Multiple Devices Resolution

Audio and Graphics
#1

I am not sure how I should set up my app to work with multiple devices while keeping screen resolution (not going off the screen). A lot of the time I do something like this:

rect.x = display.contentCenterX - 30

Is this ok to do while creating an app to run on multiple devices? From my experience, this seems to not work, since different screen resolutions will take the - 30 part differently, but I’m not quite sure.

So, do I have to do muliplication and division only when working with display objects to make sure they fit for multiple devices? Also, what do I have to do to get the build.settings and config.lua files set up for this?
 

Thanks.

#2

Basically you need to think about your UI elements and where you want them positioned.  Somethings are going to be a fixed distance from the top and left edges.   Other things can be placed relative to the bottom and right.  As the screen shape changes these may move closer or further from the center of the screen. 

Other things you can place relative to the center of the screen.  These items will stay a fixed distance from the center of the screen. They don’t move when the screen shape changes.  If you look at one of my games:

https://itunes.apple.com/us/app/turkeys-revenge/id481579390?mt=8

And compare the iPad and iPhone screen shots.  Notice the Home and Gear icons and the score.  On the iPad they are closer together.  On the phone they are further apart.  Yet the Turkey is anchored to the center of the screen and it doesn’t move when the screen changes. 

#3

Oh I see. So it depends on if your positioning based on the edge and the center of the screen?

Is it okay to position something based on pixels instead of compared to the overall height and still have the ratio be good in the end?

#4

Well “pixels” is a difficult term to work with.  It’s really a term called “points”.  Your config.lua determines the number of virtual pixels (or points) your screen is.  Corona SDK will dynamically convert everything to real pixels for you.   You of course can put something at a number of pixels:

obj.x = 10

Rob

#5

Oh I see, so if you set the width and height to be 320x480, you’re not saying that those are the resolutions you’re setting up by, but that’s the virtual screen that will auto-resize in case of different resolution?

#6

Yep, exactly.  You only have to worry about your content area and let Corona take care of the rest.

For a 320x480 content area running on an iPhone 4’s 640x960 screen, each content area dot is represented by 4 pixels (2 horizontal and 2 vertical). 

Now if you only have graphics designed for a 320x480 screen and Corona SDK has to up-size those images, they may not look as good as they should.  This is why we support multiple resolutions of images.  So lets say you need a 32x32 image for your content area, you should also provide a 64x64 pixel version with an @2x extension (i.e. button.png = 32x32, button@2x.png = 64x64).  If you want to also support the high resolution tablets, then you would also provide a button@4x.png that would be 128x128.  Your config.lua needs a little code in it.

Corona SDK will pick out the right image for the actual screen size for you.

#7

Ok thanks! I have one more question. Does the display.contentWidth and display.contentHeight also change to scale, and if not is there a way around this?

#8

display.contentWidth and display.contentHeight will be exactly what you set it to in your config.lua.  If the content area is larger or smaller than the actual screen, you still get the values of the content area.  On Android there is information available about the DPI, screen sizes etc. that you can use to get the actual device resolution.  On iOS at least for now, the device’s are very limited in sizes, so it’s easy enough to look at the device ID and know the screen’s physical size.

Rob

#9

one tip, although may not be what you’re looking for but I played with around in my last app…

i wanted to get away from letterboxing (black corners) on different screen aspect ratios… However if i just chose to scale it, then objects would be deformed geometrically.

What I did was that in config.lua i set

application = {
    content = {
        width = display.pixelWidth,
        height = display.pixelHeight,
        scale = “letterBox”,
        fps = 30

so my content area is always the same as screen resolution.

When you do that however, you must refrain from using any absolute pixel amounts in your positioning and sizing.

So intead of creating object of size 100x100 pixels (points in content area), I would create an object that has sizes defined for example

display.contentWidth*0.1  and  display.contentHeight*0.1

it takes a little more effort to optimize for the most common screens, but it can be done with good enough results, and your app is then truly fullscreen on all devices.

if you want to see the end result, look at my very simple app called GodApp:

https://play.google.com/store/apps/details?id=com.mcxondev.godapp

https://itunes.apple.com/us/app/godapp-religious-wisdom/id912982963?mt=8

#10

Oh ok thanks a ton! So display.pixelWidth and display.pixelHeight change according to the device you’re on?

#11

yes, those two will match your device’s physical resolution… but as long as you’re using a static content width and height in lua, you really shouldn’t have any use for pixelwidth and pixelheight, cause you leave corona to do all the scaling for you.

#12

Oh ok. I played around with it a bit and I think I get it. So what’s the best width and height besides display.pixelWidth/display.pixelHeight for creating an app to launch for a bunch of different devices/screen resolutions?

#13

Basically you need to think about your UI elements and where you want them positioned.  Somethings are going to be a fixed distance from the top and left edges.   Other things can be placed relative to the bottom and right.  As the screen shape changes these may move closer or further from the center of the screen. 

Other things you can place relative to the center of the screen.  These items will stay a fixed distance from the center of the screen. They don’t move when the screen shape changes.  If you look at one of my games:

https://itunes.apple.com/us/app/turkeys-revenge/id481579390?mt=8

And compare the iPad and iPhone screen shots.  Notice the Home and Gear icons and the score.  On the iPad they are closer together.  On the phone they are further apart.  Yet the Turkey is anchored to the center of the screen and it doesn’t move when the screen changes. 

#14

Oh I see. So it depends on if your positioning based on the edge and the center of the screen?

Is it okay to position something based on pixels instead of compared to the overall height and still have the ratio be good in the end?

#15

Well “pixels” is a difficult term to work with.  It’s really a term called “points”.  Your config.lua determines the number of virtual pixels (or points) your screen is.  Corona SDK will dynamically convert everything to real pixels for you.   You of course can put something at a number of pixels:

obj.x = 10

Rob

#16

Oh I see, so if you set the width and height to be 320x480, you’re not saying that those are the resolutions you’re setting up by, but that’s the virtual screen that will auto-resize in case of different resolution?

#17

Yep, exactly.  You only have to worry about your content area and let Corona take care of the rest.

For a 320x480 content area running on an iPhone 4’s 640x960 screen, each content area dot is represented by 4 pixels (2 horizontal and 2 vertical). 

Now if you only have graphics designed for a 320x480 screen and Corona SDK has to up-size those images, they may not look as good as they should.  This is why we support multiple resolutions of images.  So lets say you need a 32x32 image for your content area, you should also provide a 64x64 pixel version with an @2x extension (i.e. button.png = 32x32, button@2x.png = 64x64).  If you want to also support the high resolution tablets, then you would also provide a button@4x.png that would be 128x128.  Your config.lua needs a little code in it.

Corona SDK will pick out the right image for the actual screen size for you.

#18

Ok thanks! I have one more question. Does the display.contentWidth and display.contentHeight also change to scale, and if not is there a way around this?

#19

display.contentWidth and display.contentHeight will be exactly what you set it to in your config.lua.  If the content area is larger or smaller than the actual screen, you still get the values of the content area.  On Android there is information available about the DPI, screen sizes etc. that you can use to get the actual device resolution.  On iOS at least for now, the device’s are very limited in sizes, so it’s easy enough to look at the device ID and know the screen’s physical size.

Rob

#20

one tip, although may not be what you’re looking for but I played with around in my last app…

i wanted to get away from letterboxing (black corners) on different screen aspect ratios… However if i just chose to scale it, then objects would be deformed geometrically.

What I did was that in config.lua i set

application = {
    content = {
        width = display.pixelWidth,
        height = display.pixelHeight,
        scale = “letterBox”,
        fps = 30

so my content area is always the same as screen resolution.

When you do that however, you must refrain from using any absolute pixel amounts in your positioning and sizing.

So intead of creating object of size 100x100 pixels (points in content area), I would create an object that has sizes defined for example

display.contentWidth*0.1  and  display.contentHeight*0.1

it takes a little more effort to optimize for the most common screens, but it can be done with good enough results, and your app is then truly fullscreen on all devices.

if you want to see the end result, look at my very simple app called GodApp:

https://play.google.com/store/apps/details?id=com.mcxondev.godapp

https://itunes.apple.com/us/app/godapp-religious-wisdom/id912982963?mt=8