How do I keep objects centered based on window size

  • 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.

    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.

  • 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.

  • 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...

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • 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.

  • 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.

  • 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

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)