How to make GUIs remain the same size and ratio relative to a player's screen size?

Lately I have been working on a lot of GUIs. However, I am running into an issue when it comes to GUI sizing relative to the player’s screen size (Going from Studio to In-game, it does not remain the same.) I currently have an aspect ratio constraint in the GUI, but that isn’t quite what I’m looking for, that seems to keep the GUI size on the screen overall (If a player has a screen smaller than the GUI size, the gui simply goes past the screen. Refer to the pictures below.

In Studio (The goal view):

In Studio (Smaller Player Screen):

In Game:

Goal: The goal is to get the GUI to appear with the same size ratio to the player’s screen, and not the same size overall.

Thanks for any and all help! Once I learn how to correct this, I will be able to do many of my additional UIs that I plan on.


Is the GUI’s size in offset, or in scale?

Is this what you’re referring to?? That is the main frame.

EDIT: I have been scaling through the screen, just seems easier to me - but I’m not sure if that’s an issue.

If it helps, the top view what I am aiming to have.



Currently, the GUI is 292 pixels wide, and 609 pixels tall. That’s because you’re using the Offset property of the X and Y UDims. If you click the arrow next to “X”, a table will appear under “X”.

Inside the table, there will be one cell called “Offset”. Its current value, shown in the cell next to it, is 292. The “Offset” value is the size in pixels, and it’s what you’re currently using. The problem with setting the size in pixels is that different screens have different amounts of pixels.

Let’s say the offset was 300:

On a phone with a 500-pixel wide screen (exagerration, but it helps to explain), 300 pixels would mean 60% of the screen!

But on a 3000-pixel wide monitor, it would be 10% of the screen.

If you look at that table again, you’ll see one cell says “Scale”. Next to it is the value of 0. Scale is the solution to this problem. If, instead of 292 offset, you set the scale to 0.15 for example, the frame will take up 15% of the screen, no matter what screen the player uses - whether they’re using a phone or a laptop.

Expand both “X” and “Y”. Set the offset values to 0, and set the scale to a decimal value between 0 and 1. You’ll get the right scale value after a bit of experimenting.

(Sorry for the long explanation, but if I just told you the answer, you could run into the problem again and again. Gaining an understanding is very useful.)


By the way, about the UIAspectRatioConstraint:

Incase you didn’t know, it’s supposed to constrain the ratio of size on the X axis and size in the Y axis, to whatever AspectRatio you set. If the ratio is 0.2, then the X size of the element will always be 0.2 times the Y size.

You know what, I think I’ve seen that explained hundreds of times but you explained it in a slightly different way and I understand it. So, should I delete the aspect ratio and it will work accordingly?

1 Like

For this I actually used the AutoScale Lite plugin to insert the ratio constraint.

I’d recommend moving the constraint somewhere else, editing the size so it uses Scale, and then trying it with the constraint.

The constraint could prevent the menu from becoming too wide on certain types of screens.

The buttons and labels are appearing big, is there a way to make it fit the ratio of the frame?

If you created their sizes using Offset, then you’ll need to edit their sizes, too.

But, no need to worry, for the buttons under “Flight Information”, for example, you can just edit one of the button’s size to use Scale, and then you could copy and paste the size property for the rest of the buttons. You can do the same for the other buttons that share sizes - just configure one and copy-paste to the rest.

Ah, thanks! So I see while messing around that if you change the scale to a number and the offset to 0, and size it via the screen it goes off of the scale and not the offset, that really helps out!

I figured it all out well, Thanks for your help!

1 Like