Making my game fitt for all screen sizes

[idanahal3]

When I play my app in my nexus 5 it looks like the navigation bar goes over my app. I know it doesn’t supose to be like that. i think it is my config.lua:

&nbsp;local aspectRatio = display.pixelHeight / display.pixelWidth &nbsp; &nbsp; local aspectRatio = display.pixelHeight / display.pixelWidth &nbsp; &nbsp; application = &nbsp; &nbsp; { &nbsp; &nbsp; content = &nbsp; &nbsp; { &nbsp; &nbsp; &nbsp; width = aspectRatio \> 1.5 and 1080 or math.ceil( 1920 / aspectRatio ), &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height = aspectRatio \< 1.5 and 1920 or math.ceil( 1080 \* aspectRatio ), &nbsp; &nbsp; scale = "letterBox", &nbsp; &nbsp; fps = 60,&nbsp; all of my code is writen in scale of 1920/1080.

The game’s frame is a little bigeer then the screen itself just on the bottom.

The sides are good and also the top.

How can I fix this?

it is happens on: nexus 5, nokia lumia 920, NexusOne, HTC windows phone 8s (all are cut at the same place).

works good on:galaxy s3/4/5, HTC Sensation, iphne 5/6/plus, Sumsung ATIV S.

thise are the phones I checked.

PS on iphone 4 it even worse-The game’s frame is mach smaller then the screen from the top and the right.

pls, I am newbie and very frastrated, I will be more then happy if someone will help.

  

[rob]

If that’s an actual copy of your config.lua you have syntax errors in it which causes Corona SDK to use the device’s actual resolution rather than a scaled  variant.  So that iPhone 4 that’s a 960 x 640 screen is only a fraction of the pixels of the 1920 x 1080 screen  you’re defining.  

local aspectRatio = display.pixelHeight / display.pixelWidth application = { &nbsp;&nbsp;&nbsp;&nbsp; content = &nbsp;&nbsp;&nbsp;&nbsp; { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; width = aspectRatio \> 1.5 and 1080 or math.ceil( 1920 / aspectRatio ), &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; height = aspectRatio \< 1.5 and 1920 or math.ceil( 1080 \* aspectRatio ), &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; scale = "letterbox", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; fps = 60, &nbsp;&nbsp;&nbsp;&nbsp; } } &nbsp;

Rob

[idanahal3]

1.Now it suppose to work on all screen sizes?
2.plz you can tell me where is the problem in my code? Or where does your code is different then mine?
3.thank you very much for your help. I am going to try your code right now

[rob]

The code you posted above defines aspect ratio twice.  You have the scale set to letterBox when it should be letterbox.  And you’re missing the two closing curly braces }.

The missing curly braces will cause Lua to fail to process that block of code.  It won’t generate an error because the app isn’t up enough to log that error yet.  When that chunk of code fails, you fall back to default behavior which is to set the width and height to the exact pixel dimensions of the device.   This may sound like a good thing, but because so many different devices have different screen sizes and shapes it would be very, very hard to adjust for that in code.  You’re best to define a common content area for all devices and program for your content area not the the device’s screen.  This config.lua, when without errors, does just that.

[idanahal3]

i did have the } in my code i just didnt copyed them.

now my code is :

local aspectRatio = display.pixelHeight / display.pixelWidthapplication = { &nbsp; &nbsp; &nbsp;content = &nbsp; &nbsp; &nbsp;{ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width = aspectRatio \> 1.5 and 1080 or math.ceil( 1920 / aspectRatio ), &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height = aspectRatio \< 1.5 and 1920 or math.ceil( 1080 \* aspectRatio ), &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; scale = "letterbox", &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fps = 60, &nbsp; &nbsp; &nbsp;} }

and it is sttil not good… it is exactly the same as before.

what do I do wrong?

(sttil it cats the bottom and in iphone 4 it is smaller then the screen itself.

[rob]

You still have an error.  You ran two lines together.

local aspectRatio = display.pixelHeight / display.pixelWidth &nbsp; application = { &nbsp;&nbsp;&nbsp;&nbsp; content = &nbsp;&nbsp;&nbsp;&nbsp; { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; width = aspectRatio \> 1.5 and 1080 or math.ceil( 1920 / aspectRatio ), &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; height = aspectRatio \< 1.5 and 1920 or math.ceil( 1080 \* aspectRatio ), &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; scale = "letterbox", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; fps = 60, &nbsp;&nbsp;&nbsp;&nbsp; } }

[idanahal3]

sorry for beeing newbie but I dont understand what your meaning is?

edit:

sorry i did not copied it right:

this is my code:

local aspectRatio = display.pixelHeight / display.pixelWidth application = { &nbsp; &nbsp; &nbsp;content = &nbsp; &nbsp; &nbsp;{ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width = aspectRatio \> 1.5 and 1080 or math.ceil( 1920 / aspectRatio ), &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height = aspectRatio \< 1.5 and 1920 or math.ceil( 1080 \* aspectRatio ), &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; scale = "letterbox", &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fps = 60, &nbsp; &nbsp; &nbsp;}, }

Do you know what the problem is?

[rob]

Can you provide some screen shots?

[idanahal3]

http://tinypic.com/view.php?pic=1romyb&s=8#.VSk8_vmsXuN

The red arrow shows pretty much where the cutting

(I took a picture that it would be easy to see where the problem is)

this is the code:

menu\_background = display.newImage("abstract-rainbow-colors.jpg")     menu\_background.x=540      menu\_background.y=1920/2      menu\_background.width=1080     menu\_background.height=1920

[rob]

The problem you are running into is that not all screens are the same aspect ratio (width / height).   For instance the iPhone 4 has a 640x960 screen which produces an aspect ratio of 1.5:1.  Mean that for every horizontal pixel, there are 1.5 vertical pixels  This gives the phone the shape of a 4x6 photo.  The nexusOne has a screen resolution of 480 x 800 which is a 1.67:1 aspect ratio.  For every horizontal pixel there are 1.67 vertical pixels.   The S3 is a 720 x 1280 device which is a 1.78:1 device (the same as a 16:9 high def TV).   Your background is based on a 16:9 (1.78:1) ratio.  When you put it on a device that is shorter like the nexusOne some of it’s going to get cut off and the iPhone 4 is going to cut off even more because the screen is physically shorter.

To get your full 16:9 screen showing on all devices you have to be in “letterbox” mode which means you’re going to get black bars on the sides of the shorter screens.  Change your config.lua to:

application = {      content =      {           width = 1080,           height = 1920,           scale = "letterbox",           fps = 60,      }, }

to see this effect.  Many people don’t like the black bars and in fact Apple has been known to reject apps that have them.  Most developers want to fill the screen to do so.  One way is to not use “letterbox” but to use “zoomEven”.  This will case part of your app to be off screen on some devices, but it will fill the screen exactly.  It basically zooms up the app until it fills, making things a bit larger than they should be.  But because there are many different shaped devices (an iPad is the widest at 1.25:1, basic a 4:3 standard def TV shape), you have to sacrifice something.  Either have black bars or have part of your game off screen.

One of the problems of using it this way is that 0, 0 is not always the top left point of the screen.  It could be off screen, it could be somewhere on screen but not at an edge.   To adjust for this, there are a couple of system calls you can make to get the offset value: display.screenOriginX and display.screenOriginY.  If you want to position things at the edges, you have to add these values to your objects .x and .y.  To me this is a bit overly complicated.

The config.lua you’re using was engineered to make sure the top left is 0, 0 and the bottom right is display.contentWidth, display.contentHeight and the center is display.contentCenterX and display.contentCenterY.  On different devices these will be different values.  But its easier to position things relative to the edges or the center using those display constants.  If you want  your high score to be 10 pixels from the right edge, just set it’s .y = display.contentWidth - 10

Now for your iPhone 4 screen shot, it does seem to be offset to the left and down more than I would have expected it, but I think that’s because of the way you’re positioning things and it’s the widest and shortest screen you’re testing.

Rob

[idanahal3]

ok but when you gave me this code (the code above) you said it shold be good, so why for others it works and for me it does not work? 

so you are saying thire is no solution?

[rob]

The code above is from this tutorial:

http://coronalabs.com/blog/2013/09/10/modernizing-the-config-lua/

However, before you read that, you should read its predecessor that explains several things:

http://coronalabs.com/blog/2012/12/04/the-ultimate-config-lua-file/

Modernizing works and it works well as long as you a) accept that on some screens some of your app will be off screen and you plan the positioning of things accordingly and b) you use the right method of positioning things.  In other words if you want to center something horizontally you do:

obj.x = display.contentCenterX

If you want to position something 50 px from the top regardless of the screen shape, you do:

obj.y = 50

If you want it 50 pixels from the bottom:

obj.y = display.contentHeight - 50

This allows things like scores, titles, buttons, lives left, to stay anchored near an edge or centered.  As long as there are not critical art elements in the background then you’re okay.  So some care has to go into the background design.

If your app is one where an object needs to be X number of pixels  away from another object, this config.lua can create more math than is needed.  In that case you would tend to go with a content area that is common to all screens, like the 1.5:1 aspect ratio of the iPhone 4 and have that area centered on the screen.  You provide a bigger than the area background that bleeds off on some devices.  0,0 won’t be the top left corner, nor will display.contentWidth, display.contentHeight be the bottom right corner.  In this situation (think of a game like angry birds where the slignshot and the building’s are the same distance apart regardless of device) you just use things like

slingshot.x = 10

block.x = 400

But to keep things like scores, lives, etc. relative to the edges, then you have to do more complicated math to position them.  It’s a trade off.   Based on your screen shot, I would keep you config.lua but do:

menu\_background = display.newImageRect("abstract-rainbow-colors.jpg", 1080, 1920) menu\_background.x=display.contentCenterX menu\_background.y=display.contentCenterY

Now depending on the device some of the top and bottom are going to be cut off a bit on some of the devices, but that’s the nature of the beast.  If you plan on supporting the iPad, your background really should be 1215 x 1920, and center it like above.

Rob

[idanahal3]

OK thank you for your time and help

[idanahal3]

but if i want to put Ads at the bottom? how people do that if the bottom is beeing cutting?

[rob]

First, it’s only cutting off the background.   display.contentHeight will return you the actual screen height you have to work with.  However ads are a different best.  Just set the y to something obsurd like y = 10000 so that it’s off screen and the ad software will anchor it to the bottom.

[idanahal3]

I have just used every thing in my app with: display.contentWidth, display.contentHeight.

Instead of, for example, 500, 1000 I did   display.contentWidth*0.46 , display.contentHeight*0.52.

It works very good on all devices. The only problem is on iphone 4 the top and the  bottom are black. whay it dosent good?

And what can i change in the config to make it better? 

[rob]

You’re going to have to post some code for us to see.

Rob

[rob]

If that’s an actual copy of your config.lua you have syntax errors in it which causes Corona SDK to use the device’s actual resolution rather than a scaled  variant.  So that iPhone 4 that’s a 960 x 640 screen is only a fraction of the pixels of the 1920 x 1080 screen  you’re defining.  

local aspectRatio = display.pixelHeight / display.pixelWidth application = { &nbsp;&nbsp;&nbsp;&nbsp; content = &nbsp;&nbsp;&nbsp;&nbsp; { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; width = aspectRatio \> 1.5 and 1080 or math.ceil( 1920 / aspectRatio ), &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; height = aspectRatio \< 1.5 and 1920 or math.ceil( 1080 \* aspectRatio ), &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; scale = "letterbox", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; fps = 60, &nbsp;&nbsp;&nbsp;&nbsp; } } &nbsp;

Rob

[idanahal3]

1.Now it suppose to work on all screen sizes?
2.plz you can tell me where is the problem in my code? Or where does your code is different then mine?
3.thank you very much for your help. I am going to try your code right now

[rob]

The code you posted above defines aspect ratio twice.  You have the scale set to letterBox when it should be letterbox.  And you’re missing the two closing curly braces }.

The missing curly braces will cause Lua to fail to process that block of code.  It won’t generate an error because the app isn’t up enough to log that error yet.  When that chunk of code fails, you fall back to default behavior which is to set the width and height to the exact pixel dimensions of the device.   This may sound like a good thing, but because so many different devices have different screen sizes and shapes it would be very, very hard to adjust for that in code.  You’re best to define a common content area for all devices and program for your content area not the the device’s screen.  This config.lua, when without errors, does just that.