How do I keep objects centered based on window size

Get help using Construct 2

Post » Tue Mar 04, 2014 10:43 am

Hi guys,

I've been trying to figure out how to best keep my objects centered in relation to the size of window. For example, if window size changes from one aspect ratio to another, I would like to keep my stuff centered, like Start Screen menu, results screen etc... Right now I got my logo using Custom Movement to appear from the top to the desired position and it looks good with Letterbox Scale but on Scale Outer (which I guess for example CocoonJS needs to use) makes the logo go a bit to the left and not center as in my canvas on Construct2. My window size is 1024, 720 and my layout size is 2048,720 if that matters

I tried anchoring it but that just made it stuck outside of canvas. :D

Using Scale outer, I also tried setting the x position to window.width/2 (and my origin is smack in the middle of the logo sprite) but that makes the logo/sprite go too much to the right side of screen (I took the anchor function away so it's not interefering) especially when browser anything else than full screen.

So I'm trying to make my logo be horizontally centered based on window width before I activate the Custom Movement.
B
4
Posts: 26
Reputation: 250

Post » Tue Mar 04, 2014 11:21 am

If you have just a few objects then set their position X to WindowWidth/2 and Y to WindowHeight / 2.
If you're talking about your whole project, you should offer different versions depending on your screensize.
B
14
S
3
G
1
Posts: 255
Reputation: 2,027

Post » Tue Mar 04, 2014 4:41 pm

I wanted to just keep 3 objects centered in relation to the actual window size when layout is started.

1. Logo
2. Start -button
3. End -button

Originally they went way too much to the left and after I put the position x to the window.width/2 they went pretty much way too far right. I'm not really sure what is happening... :D
B
4
Posts: 26
Reputation: 250

Post » Tue Mar 04, 2014 5:38 pm

It is centering them based on their original image point, make sure the image point is in the center of the object not in the upper left corner of it if you really want it centered. Otherwise you need to offset the x and y to account for where the image point is.
B
49
S
12
G
10
Posts: 1,833
Reputation: 14,603

Post » Wed Mar 05, 2014 5:29 am

Thanks BluePhaze, that was the first thing I checked when troubleshooting. Origin (X) is smack in the middle of the sprite. I systematically set it always on every sprite to middle (x) and bottom (Y) so that my positioning stays the same for every object in the game - unless it's a special case that's what I do.
I even checked if it's browser dependent and it acts the same way both in IE and Chrome.

This baffles me. I guess I'll have to take a break for a few days and then go troubleshoot with fresh eyes.
B
4
Posts: 26
Reputation: 250

Post » Wed Mar 05, 2014 1:32 pm

Oh man... I was so close!

I found the answer - it was Viewport.Left(Layer)+Viewport.Right(Layer)/2 !!!!!

Here's the full juice:

https://www.scirra.com/tutorials/73/sup ... zes/page-2
B
4
Posts: 26
Reputation: 250


Return to How do I....?

Who is online

Users browsing this forum: No registered users and 42 guests