How to make a GUI stay on the same place for all devices?

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:

grafik

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}

18 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 :slight_smile: Works in-game. I recommend it a lot. https://www.roblox.com/library/150152826/Gui-Rescaler

1 Like

u can also use this plugin [Plugin] AutoScale Lite for GUIs - Scale your UI

2 Likes

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.