How to center 2 objects at the same time during game running?

  • Hey guys!

    How can I center 2 objects together when the game is running? I have a number of coins displayed on the first layout of the game, the main menu, but I want it centered, like this:

    How can I configure this so when the player gets lots of coins it doesn't look like this:

    Thannnks!

  • Hi andreluizgollo is not very clear what you are trying to do, you say centred but on both Pictures they look centred on the same position basically they look the same, are you referring to something else?

  • Hi tarek2. The second picture is not actually centered, you can see that there's a lot of space to the left of the coin, and not so much to the right of the numbers. Get it?

  • Here tarek2, I mada an image to explain better. I want the text+coin to always be on the center of the layout, like the image on the bottom. I drawed some blue squares to show how it's not centered.

  • Create new layer, ex. layer name HUD then set layer properties to parallax 0x0 and arrange coin + text to the center viewport.

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads
  • andreluizgollo

    to center two objects, you need to calculate their total width (including the gap between them),

    then find the center of the screen,

    then subtract half of the total width of the objects from the center, so obviously half the total width is on one side, and the other half is on the other side...

    a couple things to watch out for: if you use "Scale Outer" to have your game fill the screen, then the left edge of the screen might not start at zero. So, I always calculate the center by doing:

    viewportRight(0)-viewportLeft(0) / 2

    you also have to factor in where the origin of the coin sprite is. If the origin is the middle of the sprite, then you have to add back in Coin.Width / 2

    I made a sample because it is harder to explain than to show... click the coin to randomly generate a new number and have it center the coin and text. Note: when you start my sample, the coin and text wont be centered until you click on the coin...

    https://www.rieperts.com/games/forum/coincenter.capx

  • i think this is what you meant, by centering both objects... this was a bit tricky... never had to align them i always used topleft screen for stuff and not middle. i think you will find them pretty close to center....

    anyway this was ~60 minutes of fun ^_^ hope it fixes your issue, and you understand something from it :D

    download coin+text-center

    Edited: this was not tested on retina x2 or ios devices... but my browser pc... so any desktop or android should work...

  • andreluizgollo

    Haah Righ, I'm glad I asked then :) for one moment I thought you referring to (shortening or converting) the Number so it looks nice and centred

    Example:

    100.000 To 100K

    1.000.000 To 1M

    I see that you got plenty of helpful Answers cool

  • tarek2 Sure I got! Thanks anyway, tho. :)

    and AllanR Thanks for the sample, guys. I'm gonna take a look into them, but maybe they're a bit too advanced for me, since I'm just starting on Construct. Sure I'll learn something, tho. :)

  • andreluizgollo

    I noticed my sample was slightly off - because the textwidth was too long. turns out I had a silly bug. The font character widths weren't actually getting loaded because of a typo with the loopindex tag.

    So, I fixed that, and added rulers and drop shadows, and some Regex to add commas... you can re-download it from the same link above.

  • tarek2 Sure I got! Thanks anyway, tho. :)

    and AllanR Thanks for the sample, guys. I'm gonna take a look into them, but maybe they're a bit too advanced for me, since I'm just starting on Construct. Sure I'll learn something, tho. :)

    i updated my capx and copied what makes things centered so u don't get confused. there should be 2 everyticks 1 enabled with the edges and guides enabled, and one without. the simplified version is the one at the bottom without guides and edges that sits currently disabled. if u just want that for your project, copy the global variables and use the disabled everytick event. my version of doing things apply to spritefonts also, however u need to know the width and height of the characters in the spritefont u using, and the difference ratio of the height vs width. once u know that u can simply replace the data i previously had to the one u have for the spritefont. You can redownload the file from the same link. Merry Christmas to all.

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