How would I center UI's correctly?

I’m having a bit of trouble with centering my UI’s to all device’s. And I already know that you have to set the UI’s offset to 0, but it doesn’t seem to work 100 percent for me. (The UI’s bellow have an offset of 0)

1 Like

(The UI’s end up looking squashed)

Scale varies of the size of the device your playing on.
Btw, it already seems centered, but if you want the same size for all devices use offset.

Dont listen to this, make your ui all using all scale then then the anchor point to .5, .5 then set your position to 0.5, 0, 0.5, 0 itll center it no matter the screen size. To keep its same shape use UIAspectRatio you can find free plugins that will calculate the math for you.

It is centered, but the UI keep’s getting squashed even on a 0 offset.

I also have been using plugin’s to center my UI’s but it just keep’s getting squashed. (I even tried what you said and it still squashed my UI’s.)

The reason it’s getting “squished” is because you’re using the scale property, which is like a percent of the screen. Therefore, when your screen size changes, so does the amount of space the UI takes up.

For example, lets say a computer screen is 1000px long and you set the size scale to be 0.5 ( 50% ). On that computer, it would take up 500px, while lets say on a phone that’s 500px long, it would take up 250px, which is similar to what’s happening here.

To solve this issue, you can:

  1. Use offset sizes, which makes it constant across all screens (only recommended for smaller interfaces)
    or
  2. If you need the UI to size dynamically across all screen, use scale. If you would like it to be a square, then using a UIAspectRatioConstraint will help in this situation.
2 Likes

It overall worked, thank you! (The 2nd option)

1 Like