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:
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}.
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.
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
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.
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.
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.