Scripting Helpers is winding down operations and is now read-only. More info→
Ad
Log in to vote
0

How do I make my guis fit on different different screen sizes?

Asked by
thebluepicaxe717 18
6 years ago

I have a set of guis that fit and look nice on my monitor, but on a laptop are all squished together.

Here is what it looks like from the explorer tab:

ScreenGui .......Frame........................................................................................................................................ ..............Frame................................................................................................................................. .....................v ImageLabel............................................................................................................... ...................................TextButton...................................................................................................... ..........................................LocalScript.............................................................................................. .....................v ImageLabel............................................................................................................... ...................................TextButton...................................................................................................... ..........................................LocalScript.............................................................................................. .....................v ImageLabel............................................................................................................... ...................................TextButton...................................................................................................... ..........................................LocalScript.............................................................................................. .....................v ImageLabel............................................................................................................... ...................................TextButton...................................................................................................... ..........................................LocalScript.............................................................................................. .....................v ImageLabel............................................................................................................... ...................................TextButton...................................................................................................... ..........................................LocalScript..............................................................................................

Any way that I could have the guis change size and position depending on the size of the screen/tab?

0
Use scale gmatchOnRoblox 103 — 6y
0
Instead of using the Offset on the positioning, use the scale ( ScaleX,OffsetX,ScaleY,OffsetY ). You can find tutorials on Youtube and Wikis, but just remember its tricky to make it work, you just have to work around things. Troxure 87 — 6y
0
@gmatchOnRoblox , @Troxure , he IS using scale. Nowhere in his question did he mention he was using offset. If he was using offset, the GUIs would be outside of the screen, not squished together like he said. Anyways, the simplest way you can do this w/ minimal scripting is to go into the different UI views(iPhone 5, S7, etc), re-make the GUIs with those views, & then change those sizes when neede laughablehaha 494 — 6y

1 answer

Log in to vote
0
Answered by
mattscy 3725 Moderation Voter Community Moderator
6 years ago

One way to achieve this is to use the SizeConstraint properties of GUIs. A great tutorial on this can be found here.

If you set the SizeConstraint property to RelativeYY, it will "transform" the way that the Scale aspect of Size works. Setting it to RelativeYY will mean that the X aspect of the GUI will extend only as far as the Y height of the screen. For example, if you have a GUI with the size {1,0},{1,0}, it would usually cover the whole screen, because it means the GUI will be 100% of the screen's size on both the X and Y axes. changing the GUI to RelativeYY will change this to form a perfect square on the screen. Instead of covering the whole screen on both axes, it will now cover only the whole Y height of the screen, and extend outwards on the X axis until it forms a square (thus extending outwards as far as it extends upwards, as it maintains a 1:1 ratio).

So, to test this, simply insert a ScreenGui into StarterGui, and then a Frame into the ScreenGui, and set the Size of the Frame to {1,0},{1,0}. This will make the frame cover the whole screen. Then, set the SizeConstraint property of the Frame to RelativeYY, which will then form it into a square to the left of your screen. You will notice that if you turn studio into windowed mode and resize studio's window size, the square will always remain a square no matter how you move it (although it will only be entirely visible on horizontal screens). Because of this, the gui will not stretch or squish for different screen ratios, always keeping as a square.

So, to use this with your GUIs, you first have to make sure everything in all of your GUIs uses scale (e.g. {0.5,0,0.5,0}) rather than offset (e.g. {0,50,0,50}). Then, whenever you make a new frame to insert other GUIs into, set that frame's SizeConstraint to RelativeYY. You only have to do this for the outermost frame; every gui inside that frame can have a normal RelativeXY SizeConstraint (but still must use scale). After you do this, your GUIs and all of their contents should keep their aspect ratio, no matter how big or small the screen is.

Hope this helps!

Ad

Answer this question