Scripting HelpersARCHIVE
A little piece of Roblox history. Preserved for everyone, one question at a time.Read about the archive →
All questions/Question #65707
✓ ANSWER ACCEPTED

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

Asked 327 views1 answers

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?

Anonymous

3 comments

0

Use scale

Anonymous#
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.

Anonymous#
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

Anonymous#

1 answer

✓ Accepted answer

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!

AnonymousPermalink

This discussion is preserved as it was. New answers, comments, and votes are closed.