Simplest Way To Make Your GUI Fit To All Devices

Hi developers!
Today, I am going to show you the simplest way to make your GUI fit to all devices using this awesome plugin. Why we have to do this ? Well, i have seen people having problems with their GUI not scaled properly, it makes us feel quite uncomfortable. If something is wrong or having any suggestions, you can let me know down below. Anyways, let’s start.

STEP 1
Create a screen gui and a frame (or textlabel, textbutton,imagelabel,…) inside it, go to the properties and set the AnchorPoint to 0.5,0.5 (after adjusting, it will be moved a little bit, you can drag it back to its original position)
a

STEP 2
Open your plugin, we will need to use these buttons Capture1 , click the blue one, select the UI which you want to scale then click Scale (both Position and Size)

STEP 3 [OPTIONAL]
Why is it optional ? Because done step 2, your gui has been rescaled properly. In this final step, we will add UIAspectRatioConstraint to keep the aspect ratio of the gui unaltered on any devices ( use the red button of the plugin )
For example, the ratio of the frame is 2:1, it will be changed on other devices if we don’t use UIAspectRatioConstraint ( i will use iPhone 4S in this case, as you can see, it changed from 300 x 150 to 131 x 90 [ not 2:1 anymore ] )


This will happen if you use UIAspectRatioConstraint ( you can see it changed to 131 x 65 [ closest to 2:1] ) Capture4

FINAL RESULT
Before

After

Without AspectRatioConstraint

With AspectRatioConstraint

Thanks for reading my first post, hope this helped. Have a nice day !

54 Likes

This really helped! Thanks! :star: :star: :star: :star: :star:

10 Likes

Hello, this post seems very helpful but for some reason it does not really work for me that way.

I did everything you said, but the buttons that you will see in the screenshot are still taking more distance from the top element than they should. I am working on a very huge screen, but I just can’t imagine that this is a problem. Is there a way to fix that?

How it should look like:
Right

How it actually looks like on other devices:

I am glad for any help, thanks in advance!

Did you go to unit conversion(blue button) and convert them to scale? This may be the issue. If you didn’t use the UIAspectRatio.(Red button)

I use the UIAspectRatio in combination with the blue button settings.

First of all I press both blue buttons (for scale), and press the red button afterwards for the UIAspectRatio.

Is there anything I do wrong?

Right now I use a manual created UIAspectRatio with a value of 2,
(even tho I don’t really know what the value has to do with all this, since I am not a GUI - designer) but it’s still kinda hard to add an element with a perfect position / size.

When I press both blue buttons (scale), and after that the red button, then the positions for some elements are diffrent in other resolutions.

This should work, where are you trying to put it?(The UI)

The GUI itself is constantly in the StarterGui, I do not change the parent of it.

as you can see on my screenshot the elements are still not in the correct position. (on some resolutions)
I am really desperate about the situtation, since I really need my GUI to work.

Hm.
Are you trying to put the Frame or whatever in the topbar?

That’s because the positions are relative to the screen size meaning the gap is also relative. To fix this, make the buttons the same position as the top frame then you should have something like {…, …}, {…, x} make sure to set the x to 15

Thank you! I have always wondered how to use the plugin but was to lazy to search for it.

I don’t really understand what you mean, if I set the position of my bottom buttons to the position of the top element then the buttons are inside of the top element.

Another thing is, I thought you should never use the offset value {scale, offset} for editing GUIS.
Could you maybe explain me what you mean, by some screenshots or more information?

Because I don’t know how this is gonna fix my problem, if I just set the position of my buttons to the top elements position.

Thanks in advance!

The only thing I try is to bring the buttons below the top element in the correct position, wich they aren’t right now.

In order to achieve this, I am trying to use the plugin but for some reason they are not positioning correctly as they should. As @Chinesse_apes said, it has something to do with the relative position.
Sadly I still do not exactly know what he means by that.

Offset is constant and scale is relative, if you want a constant gap use offset. Simple as that.

If the position (scale) is relative, why should we use it then?
since it’s not constant.

I think you misunderstood.

The Position property has 2 values: X and Y
And they both have a Scale and an Offset.

X Scale is relative to the Screen Width
Y Scale is relative to the Screen Height

If you set the Y Scale to 0.333 then the gap from the top would be 1/3 of the Screen Height (simplified without accounting anchorpoints etc). As you can see it’s like % except it’s between 0 and 1 like normal fractions
(
eg: you have frame with y scale 0.333 and your computer screen is 1920x1080. So 1080 / 3 = 360 so the frame has a 360 pixels gap from the top.

Now if you switch to a bigger computer (3840x2160)
2160/3 = 720 so the frame has a 780 pixels gap from the top.
).
Scale depends on the screen size.

While Offset is used to offset things like its name suggest.
Using both Scale and Offset is a great practice.

Offset is not relative to anything, you to set the offset in pixels and it offsets.
(
eg: You have 1920x1080 computer, the frame has a 30 px gap,
It’s therefore 30 pixels from the top,
You have 3840x2160 computer, the frame has a 30 px gap,
It’s therefore 30 pixels from the top,
)

I also used to believe that, but now it feels like what a 1-2 month experience developer would spread.
Offset is primordial for roblox games, i believe that developer that use only Scale and discourages offset are too lazy to make a good ui for both mobile and pc. They often think Scaling it down is completely enough.

Yes, please standby.

You could just use the RescaleGui plugin. Works for me