Hello!
I’m trying to make my GUI stay in the same position.
On studio, it’ll look centered, but in playtest, it’s a complete mess, the frames scatter all around the screen.
How can I fix this?
Thanks in advance,
Mehdi
17 Likes
Your gui is probably positioned using Offset. This doesn’t take into account varrying screen sizes, so it will stay in a static position.
To make a gui centered on all screens, set the anchor point to 0.5, 0.5 and set the position to 0.5,0,0.5,0
Anchor Point will set the focus of position of the gui on the center of that element, setting this to 0.5 will get the half of both x and y axis which will be the center
The same logic applies to position. Setting the scale to 0.5 on both x and y will position the anchor point to the center of the screen.
Why use scale? This takes into account the parent’s dimensions and applies an equivalent of that value depending on the parent’s dimension. (Something like multiplication factor)
10 Likes
Hi. A possible fix to this is to use GuiObject.Position.Scale and GuiObject.Size.Scale instead of Offset whenever it is possible. For example, you could put a square frame in the center of the screen as this:
Frame.Size = 0.1, 0, 0.1, 0
Frame.Position = 0.45, 0, 0.45, 0
4 Likes
Every GUI has four position Values. They are structured like that:
Both scale values are percentages. Let’s say 'Scale 1’s value is 0.5 that means that the GUI’s position is in the middle (if AnchorPoint = 0.5,0.5) of the screen as 0.5 = 50% = half of the screen. The offset values are in pixels that means no matter how big your screen is, the GUI will always have the position in pixels. If you want your GUI to be in the middle of the screen set the AnchorPoint to ‘0.5,0.5’ and the position to {0.5,0},{0.5,0}
17 Likes
Hey.
The position of my GUI is something like 0.800, 0.400, should I set the AnchorPoint to that
Thanks in advance
That makes no sense if it is the position. The position consists of four values.
2 Likes
{0.800, 0, 0.400, 0} if you prefer
1 Like
Well that are scale values indeed. Can you please send a before/after picture? Would make it easier to understand what the problem is. What’s
?
Thanks for the detailed explanation, helped me alot understand what’s the difference.
Hold on, I think I’ve found a fix.
2 Likes
Can you please share the fix with us?
I will be basic for you. I have a plugin named “GUI Rescaler” Works 100% fine for me, simple, select a GUI object, click on plugin and done 
Works in-game. I recommend it a lot. https://www.roblox.com/library/150152826/Gui-Rescaler
1 Like
Well apparently it doesn’t work (or at least isn’t a good enough solution I’d say), so here are some screenshots:
On studio:
In-Game
Yes, the size are offset. It’s because as said in @Nova_MrRoyal’s explanation, offset is pixels, which is perfect for me cause I need the containers to be a certain size. Yes those are two frames.
1 Like
Try with the pluginI said, and make sure screengui “IgnoreGuiinset” is set to true
1 Like
Hey.
Thanks for the proposition, but I don’t really like relying on plugins for that.
Same for @yeahbror would prefer to fix the issue by myself so I know how to fix it later.
I think that’s a scaling problem. Are you using any Constraints?
No, I do not use any constraints. The closest thing to a constraint that I use are UIGradients.
Is your GUI scaled in scale or in offset? If it is scaled in scale the problem probably is that the GUI gets scaled smaller as the screen size changes. You can see that AVATAR image in the first image is square while the AVATAR image in the second one is skewed a bit.
No, my GUI is scaled in Offset because it looks better.