On Gideros my game looks different on emulator and actual device

Question

On Gideros I set the Logical Dimensions to 720x1080, with Scale Mode = Letterbox, and when I test it on the emulator with the same resolution it looks good, with no bars at the top and bottom or at the sides.

Then when I test it on a Sony Xperia T (720x1080 also) it shows a top and bottom black bar, with the navigation bar at the right side. It seems as if the navigation bar was interfering with the game's width, and so it loses width so the game will fit, ending up with the mentioned top and bottom black bars. Am I right? is that why I get those bars?

The problem also happens when I set the game's Logical Dimensions to 480x800 and change the images for that resolution. On the emulator works fine but on a 480x800 device it shows the same bars.

So my question is: Why am I geting the top and bottom black bars on my devices? Is it because of the navigation bar? How could I fix this?

PD: The game is on Landscape mode

Answer 1

Yes you are right since onscreen "hardware" buttons does not count as part of the screen, the width then is smaller, thus you get the spaces.

(BTW you can change portrait to landscape in AndroidManifest to display buttons correctly)

More information on spaces and scaling

So you have a logical dimensions, for example: 480w by 320h (although they should be vice versa 320x480, (in logical dimension smaller always comes first) but thats another topic)

It means all your content must be prepared to deal with this dimensions.

But hey, not all devices have this dimensions right, so how to make it look similar on 800x480? You scale it up.

If the aspect ratio is the same (which is not the case in this situation as (480/320 = 1.5) and (800/480 = 1.66)) then you could simply scale up the scene with the one value for both width and height

But what if the aspect ratio is different

There are 3 ways to deal with it:

1) Stretching We could stretch your width or height (what ever's ratio is larger) to fit the whole screen.

2) Cropping scale by center to fill whole screen and crop out other what goes outside the screen may not fit everyone but someone may use it.

3) Letterbox It upscales to the maximal dimension of width or height, which fills the screen first, leaving whitespaces on other dimension.

What you choose depends on what you need to achieve, but my preference is Letterbox And my suggestion would be, to prepare bigger BG graphics that go outside the screen (positioning them in the center of the screen using anchorpoint) and concentrate all the game on your logical dimensions. Here's an example: http://giderosmobile.com/forum/discussion/comment/13692#Comment_13692

Work with desktop simulator set with your logical dimensions if what is better for your, and change resolutions of the Desktop player to see how spaces appear and what BG pics may cover it

Another confusion may be, that by scaling in center, 0,0 coordinate is not in the left top position anymore (thus having spaces) So what if I want to position object in the corner completely Then as you did, ignore scaling by calculating the real offsets

http://appcodingeasy.com/Gideros-Mobile/Ignore-Automatic-Screen-Scaling-when-positioning-objects

Hope that helps :)