UI Sizing Issues

Hello designers,

While there is probably a way to fix this, I don’t know how to fix this issue. In studio, the UI is fully scaled, in-game, its small.


If anyone knows how to fix this, please tell! Cheers!

I do know that if you changed the highlighted part to 1, it would stretch till it fit the bottom on any screen size
problem

4 Likes

There is a plugin for this.

You can use the Autoscale GUI plugin as @EpicCheatCodes mentioned.

You need to convert your size properties to scale. Scale would not only fill the screen up for your device but will also appear the same on other devices with smaller or larger resolutions.

If you go onto the properties and find size, the format of it will be this:
{X-SCALE, X-OFFSET}{Y-SCALE, Y-OFFSET}

EDIT: On the plugin, you need to click on the scale button.

When resizing, you see this:
{0, 200}, {0, 50}

In this case, the object is 200 pixels wide and 50 pixels high. But since we have a specific size, everywhere this rectangle will look different. If a person’s monitor with a resolution of 1920x1080 pixels, then for him it will be a small rectangle, and for a person with a 640x480 phone, it will occupy almost a third of the screen.

But if you want to resize to all screens, so that the object looks the same relative to the size of the screens then change the first values, for example:
{0.5, 0}, {0.25, 0} – {0,5 scale, 0 offset}, {0.25 scale, 0 offset

In this case, the object will occupy 50% of the width of its parent and 25% of the height from the parent. Only the object of the UI acts as the parent. But if there is no parent, and the object is a descendant of the gui screen, then the size is determined relative to the user’s screen.

For example: create a frame with the sizes {0.4, 0}, {0.2, 0} - the frame will occupy 40% of the screen width and 20% of the screen height, now create a Text Label in the frame, with the size {0.5, 0}, {0.25, 0} . In this case, the text is not the parent of the screen, but the frame, so the text size is set relative to the frame. It turns out that the text in size will be only 20% of the screen width (0.4 frame width * 0.5 text width) and 5% of the screen height. I hope you understand how this works.
By the way, in Rolox you can watch how an object looks on different screens. To do this, click on the monitor icon in the studio (next to the eye that makes all objects of the gooey invisible)