GUI error with resolutions

I want to make GUIs in my game look the same with monitor resolution instead of them being in different places on each resolution.

The GUIs are either spread out or too close.

My resolution: 1920x1080

My friends resolution: 2560x1440


You can see how they are more spread out and out of place on my friends monitor.
I tried using the “devices” tab in the Test tab in studio, except it only allows me to use one resolution.

1 Like

You need to use Scale property for UDim2 positions and sizes; it looks like you are using offset only. Also, changing AnchorPoint is helpful–you can have the AnchorPoint.X property set to 1 (the far right of the frame) and make the frame’s position something like:

UDim2.new(.95, 0, .025)
-- {.95, 0}, {0, .025}

2 Likes

Use the autoscale plugin to scale the UI.

Steps:
1.) Select the UI you want to scale.
for eg. A texlabel.

2.) Click on the AutoScale Plugin.

Link:

As well as using the Scale property instead of the offset one with sizes and positions, you should take advantage of UIConstraints.
What I use the most is UIAspectRatioConstraint, and UITextSizeConstraint.

UIAspectRatioConstraint is used to maintain a ratio for an UI element, so let’s say you make the scale 0.2, for both X and Y axises.
You will notice that it is not a box, but a rectangle.
Now if you parent an UIAspectRatioConstraint to the UI element, and make the aspect ratio 1,
you’ll now see that it is a perfect square.
This is also useful for another reason, maintaining the same shape on every screen.
If you managed to get the size to be a perfect square, let’s say on 1920x1080,
if the ratio of the screen changes, it won’t be a square anymore.
This is fixed by UIAspectRatioConstraint.

UITextSizeConstraint is pretty useful too, and is pretty simple.
It has 2 properties, if you ignore the properties that every instance has.

The properties are, MaxTextSize, and MinTextSize.
It’s pretty self-explanatory, but why this is useful, is because if you want the text sizes to be
somewhat consistent through-out all the screens, you need to use the TextScaled property.
Now you’ll notice a slight problem with the TextScaled property right away, and that is,
if there’s a lot of space, the text will scale with the text object’s size.
This will lead to text being too big, and it’ll look bad.
So the obvious fix for that is, to use the MaxTextSize property and limit the size of the text in the text object.