Scaling GUIs for smaller screens

I noticed that on really small resolutions my interface is far too large and intrusive. However, I like the size it has on larger screens and do not want to make them really small for everyone unnecessarily. I would like to avoid having to use scripts to determine the optimal size and positioning as this seems tedious and time consuming for an expansive interface.

Another is positioning. After I tested using UIScale on my interface, while the sizing was acceptable, their positioning was awkward. For example, making two elements smaller made them unreasonably far apart from each other. Scaling the entire interface down all at once caused the elements to be far away from the screen’s edges.

Recently Roblox has released several UI element objects that seem useful for this situation. Is there any easy solution to scale my GUIs using these objects? What is the best way to scale them for various screen resolutions?

My current interface as represented by the VGA emulator:

6 Likes

It might be useful to use the percentage scaling rather than the size scaling.
This would refer to in the size area of the GUI Elements, using the first set of numbers.

In the scaling, (.5, 0) (.5, 0) would make the GUI element be 50% of the screen for both the X and Y axises.

4 Likes

And ya beat me to it; was about to say the same thing. I really love how people often are so quick to reply with ways to help.

EDIT: another way to help with scaling is maybe a UIAspectRatioConstraint since scale is difficult to make perfect shapes that don’t change size using plain scaling

3 Likes

It’s kinda funny though because I’m a complete hypocrite with my solution, because I don’t use the percentage scaling.

3 Likes

I only use percentage scaling… :roll_eyes:

1 Like

Along with the other suggestions people had, if you want to center your GUI, use AnchorPoint and Scale.

Set the AnchorPoint to 0.5,0.5 and the Position’s Scale to 0.5,0.5. This will center your GUI, no matter the screen size.

7 Likes

use UIAspectRatioConstraint, it makes your gui square no matter on what screen size

Using the Scale properties for size and position rather than Offset and making use of http://wiki.roblox.com/index.php?title=API:Enum/SizeConstraint has helped me ensure GUIs scale appropriately for all resolutions.

1 Like

I’ve been trying to figure this out. Life saver.

2 Likes