Hello. I’m trying to make a GUI for my game. It looks good on all the desktop screen previews except the VGA where it looks awful. My question is: does anyone use this kind of screen? Should I bother adjusting my GUI to it?
Yes, you should. Whether people use them shouldn’t be a concern, since all UI’s should scale for every device.
You can simply download a plugin such as AutoScale, select all UI elements, and click convert to scale. Then it will fit all devices.
Alright. Can you please send me a link to this plugin?
This is what I use.
Of course you can pay for the premium version, but the free one gets the job done.
When designing user interface, you want it to be playable on as many devices as possible. This is why many developers and UI Designers take advantage of something called UI Scaling to make their GUIs appear in the same position and appear the same size on any size of screen. In other words, they scale with the size of the screen.
There are many different plugins you can use that can help you, or you can do it manually by changing the “Offset” values in the “Size” property of your GUI elements to 0, and using the “Scale” property instead. Many developers, including myself, use the AutoScale plugin, as it’s as easy as clicking a button. You do not need to mess around with properties, you simply select the UI elements and click a button, then they will be converted to scale instead of offset. There are many different plugins and tutorials out there, so you can choose whatever you want.
Yeah, but there’s one problem: VGA screens are much “taller” than normal ones so the GUI would appear a bit stretched vertically sometimes.
I used this plugin and it kind of broke my UI - it’s not where it’s supposed to be and half of it is out of the screen.
You probably had your UI positioned wrong in the first place. Try repositioning the UI manually or undoing your changes. This plugin shouldn’t actually move the UI, so I’m not sure why this is happening. When I use it, it just changes the properties. It does not appear moved or resized on the screen I’m working on.
Well, this time it worked correctly. It’s all scaled as it should but the UI looks bad on the VGA screen because it’s so tall. I’m thinking about making a separate UI set for it since I will need to do that anyway for mobile devices - current UI is only meant for desktops. Is that a good idea?
I would suggest that you also work with UIPadding, and Constraints to stop it from stretching, while also keeping it nice and clean. Overall, your gui should fit of all screens.
Here’s what a gui would look like without Constraints, while still set to scale sizes and positions:
As you can see, the frame becomes distorted and stretched out.
However, if you apply a constraint as a child of the frame:
It will always stay as the shape you intend.
https://www.roblox.com/library/1496745047/AutoScale-Lite. This plugin can add the constraint.
1 Like
Instead of constraints, I prefer to use SizeConstraint.RelativeXX. But thanks for the help, I’ve been wondering what the UIAspectRatioConstraints do and now I know it 
You should probably check out this: Keeping the Aspect Ratio of your GUIs
I don’t know, it says alot about the stuff you prefer. Anyways your very welcome!
It is possible to have your UI work for all screens. All you have to do is use scale and work with AspectRatioConstraints. Good luck!
1 Like