UIs not positioned correctly

Hey Developers!
So basically, I was making some UI for more story game, one of them, was text that changes in the lobby, saying info, in studio, it is centered perfectly:

I have a HD 1080 Monitor, so in-game, and in the UI View option, it looks like this:

It is a bit off-center, and on mobile, it is even worse!
If I view with average laptop, it is centered:

Also, lots of my other GUIs are in the wrong position
I cannot see how I can fix this,
the position of the gui is:

{0.17, 0},{0.9, 0}
1 Like

The size has to be in Scale. If you use Offset, it will not center across multiple devices.
Here is an example Offset size: {0, 365},{0, 365}
Here is an example Scale size: {0.365, 0},{0.365, 0} ({1, 0},{1, 0} will fill the entire screen, no matter the device size, so work with decimals)
Notice how Scale is on the left side of the pair. To center your GUI with Scale, use the position {0.5, 0},{0.5, 0}.

2 Likes

They can’t be centered in every device. However, you can use the simulation option Studio offers to see where do the GUIs appear.

1 Like

I have set my position to this:

But it is still not centered correcrtly.

1 Like

Your position is in Scale. However, that is not the issue. The issue is the GUI element’s size. The size is in offset and it needs to be changed into Scale. You will notice how it is centered once you have changed its size from offset to scale.

2 Likes

There are many ways to go about solving this positioning issue. I would recommend this helpful devforum resource which helps you deal with this issue: Keeping the Aspect Ratio of your GUIs

2 Likes

to fix this problem, you can:

  • mess with offset until you get the perfect size and position on every device

  • use this plugin
    you can find out more about the plugin here and here

I wish you the best of luck! :grin:

1 Like

The plugin is especially useful for converting between offset and scale and vice versa, however, messing with offset will not center the UI. You will need to mess with Scale instead.

3 Likes

Alright,
so right now, I am really confused what to do… What property do I need to change?

What is your GUI element’s size? Please reply with a screenshot or text of the size.

1 Like

image
That is the issue.
Your pairs (or these things: {number, number}) are in Offset, not Scale. To change it to Scale, simply change the Size to {0.1, 0}, {0.1, 0} which will remove Offset and change it to Scale. From there, you can drag-to-resize the GUI to your liking and you will soon notice the GUI element resizes to fit on all screens.
Although your position is in Scale already, that is not the problem here. Both the size and position have to be in Scale in order to move and resize across multiple devices.

2 Likes

How can you tell that the size is in offset, not scale?

1 Like

If you open the Size drop-down and open the X and Y drop-downs as well, you will see that the data is in Offset. Otherwise, it will show Scale.

2 Likes

Where i can use the simulation option

My Frame Position is set to 0,0,0,0 with size 1,0,1,0. When designing the gui, it is centered and covers the whole screen. However, when I press play, the gui does not cover the whole screen but is slightly lower than it should be, exposing the top of the screen. Any reason why this may be happening?

It seems like an issue with the ScreenGui parent object having one of its values disabled. The ScreenGui object has a boolean named “IgnoreGuiInset” which toggles whether the UI elements will extend to cover the entire screen past the menu bar or will fit below the menu bar.

Luckily, it is a simple fix of just setting the value to true. If your Frame size is set to 1,0,1,0 and it is centered, it should fill the whole screen. If it does not, check the Frame’s properties to ensure there isn’t any weird property that messes with the positioning or size.

1 Like