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.
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.
Solution:
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.)
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?
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!
