Project size

Hi,

I am making a simple puzzle game for kids as first project.

I checked the tutorial to support multiple screen size : scirra.com/tutorials/73/supporting-multiple-screen-sizes

There it says that it's a good idea to choose a 16:9 screen resolution, so I went for 1920 x 1080.

When I run my game on my laptop browser and press f11 to have it fullscreen it displays perfectly:

lo-zone.com/labo/puzzle/demo/index.html

But when I open it on my iPhone (4S) or Ipad 2 I have a black part below the application.

lo-zone.com/labo/puzzle/photo.png

Maybe the iphone 4S and the iPad2 are not 16:9, but then how would I center my app to have the black space on top and below the app?

I also noticed that I can drag and drop items from my game in this black space below.

Here are my settings :

lo-zone.com/labo/puzzle/settings.png

Thx for your help

Iphones Ipads etc use other resolutions. You can find them on the internet...as I cant remember them :D

I read somewhere that one C2 game dev always make his background considerably bigger than the window because he was having the same

black areas on the screen.

Although this is not a solution, it is a work around.

If I want to target IOS and android what would be the best choice/option ?

We got a official Scirra tutorial on this

scirra.com/tutorials/73/supporting-multiple-screen-sizes

Check it. It's been very helpful to me :)

Yeah as you can see in my initial post, I am referring to that tutorial.

Unfortunately I don't seem to have the correct result.

What would I be missing?

What project size and settings do you use in order to fit iOS and android devices?

Thx for the help

There are two ways to solve this problem:

1) Use Scale outer mode, and draw your backgrounds wider (or taller, depending on orientation) than the window size, past the normally viewable edges, to ensure no gaps ever appear regardless of the device aspect ratio.

2) Use Scale inner mode, and make sure nothing important is close to the edges, since the edges are susceptible to being cut off on different size displays.

It's not always easy to design a game correctly using either technique. However it allows you to design games that always use the full display, which often looks better than showing black bars.

from the before mentioned tutorial

Is there a way to position the objects relatively to the real device screen size?

For example center the content and have the menu option button stick to the bottom of the screen?