How do I always center the screen (resolution )

Get help using Construct 2

Post » Thu Feb 04, 2016 9:19 pm

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.

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
Image

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

Thanks in advance!
B
10
S
4
G
3
Posts: 163
Reputation: 2,507

Post » Thu Feb 04, 2016 10:25 pm

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.
Ba-dum Tsss!
B
11
S
2
G
1
Posts: 45
Reputation: 757

Post » Thu Feb 04, 2016 11:21 pm

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?
B
10
S
4
G
3
Posts: 163
Reputation: 2,507

Post » Fri Feb 05, 2016 9:09 am

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):
Image

or Intel XDK's emulator:
Image
Ba-dum Tsss!
B
11
S
2
G
1
Posts: 45
Reputation: 757

Post » Fri Feb 05, 2016 9:46 am

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 :lol:
B
10
S
4
G
3
Posts: 163
Reputation: 2,507


Return to How do I....?

Who is online

Users browsing this forum: Alex Bryant, mercuryus, Moordhuis, omnipaws, sirheimer, tarek2, zenox98 and 12 guests