How do I always center the screen (resolution )

Hi!

I've read a lot about screen resolutions and stuff but still i am not sure what way to go.

I do know how i want to work with screen resolutions but i am not sure if this is possible.

Let me explain with a image.

As you can see the content will always be centered, and the sides will just be wider a.k.a more is revealed since it will be designed that way.

The red line is a 720x1280 resolution.

The white outside is a 1080x1920 resolution.

Everything within the red lines is content.

My goal is to actually have my content always centered. If the screen resolution changes i want it to simply take the space outside the container. So if for example the screen is wider than the 720x1080 resolution i want my game to take the left AND right AND bottom area that is outside the screen.

Example on phone

Is this possible? And if yes can any one get me started on how to reach this goal?

Thanks in advance!

Aren't "Fullscreen in browser" options "Scale outer" or "Scale inner" going to work here? Using Inner it always crops to the center, and Outer can be centered by setting the layer's parallax to 0,0.

That could be possible! I think scale outer could do the trick in combination with the parallax.

So what i should do is:

• Scale Outer
• Background parallax 100,100
• All content layers parallax 0,0?

Wish i had something to test it, i only got 1 phone which has the 720x1280 resolution so for me it always fits.

I was not sure because i remember a game i made like a year ago and it would simply align all content to the left which made it look pretty ugly.

And i always used Scale outer.

I wish i could say that i'm going to try it but i have no idea how without buying a phone that has a different resolution

Is there any tool to check different screensizes? Like a emulator i can trust that it displays the app the exact same as on a phone?

If the layer with the content has any parallax it will go to the left.

As for the testing bit - the easiest way is simply resizing your browser window.

Other than that, you can use Chrome's emulator (Open your game then press CTRL+SHIFT+I and then CTRL+SHIFT+M):

or Intel XDK's emulator:

Are you bloody serious? Chrome has this feature? This is awesome!

Thanks for the help! This explains why everything was centered to the left with everything i created.

I will try this right now and let you know how it ends up.

I would be so happy if this works out great since that was the only thing i was worried about. Will check back in later .

EDIT: Oh god this really works!

Thank you so much! Now i can really finish my app exactly the way i want it.

P.s. i don't know what you are working on at Intel XDK but i really like the name