How to scale GUIs for all devices

I have a problem with scaling the guis properly! Playing on pc works fine but from mobile it’s a complete mess

(I used auto scale lite and this is the result)
Thanks!

8 Likes

Maybe this helps,

Video

Roblox Studio | UI Scaling Tutorial [How to Fit a UI on the Screen on any Device] - YouTube

If not, try this, it’s a roblox developer hub article, I hope it helps:

Article

Cross-Platform Design | Documentation - Roblox Creator Hub

Another dev forum article about this I guess?

Similar questions

How to scale or position same on all devices - #4 by PurpSinister

If you need more help, I can try explaining it myself in more detail, at least I’ll try :slightly_smiling_face:

4 Likes

I have the most unorthodox method of achieving scaling on multiple devices.
I type in 1,1,1,1 into the size bar of my UI element. image then i resize by dragging the handles. For some odd reason, it works like a charm. my frame on a 4s


my frame on xbox

5 Likes
  1. Go onto properties for the frame that you want to scale
  2. Go onto size then click the arrow for the x and y axis
  3. Set the offset for both axis to 0
  4. Now you can scale the frame however you like (using the properties tab or just by drawing it around like usual)
  5. You should be done if it doesn’t work, please tell me at what point it didn’t work then I can send a screenshot to help further.

Tip: It is easier to do these steps when creating the GUI so you don’t have to re-size the frame!

Have a nice day! :slight_smile:

Edit: This will mean that you have to re-size your GUIs but, without using a plug-in, it is the only way.

7 Likes

You can use my plugin, it adds UIAspectRatioConstraint that makes frame on X axes same on all devices. The plugin have other functions too like round corners or scale UI on all devices.

https://www.roblox.com/library/6514761722/UI-Tools

4 Likes

honestly this is something the engine should do by itself, i dont know why we have to do it

There are uses for scale and uses for offset…how would the engine know which one you want to use?

The (1,1,1,1) is effectively using scale… its almost identical to (1,0,1,0) which will scale everything to its parent on a 100% scale, or to the exact ratio of its parents property(size or position).

Offset is useful when you dont want to scale something, such as text inside a billboard gui where scaling when you walk away will change its intended effect…offset works much better for that. Thats just one example.

Yeah, I’ve probably should have updated once I realized how to do the scaling properly and realized it should be (1,0,1,0) as the little bit of offset makes no sense practically.

1 Like

still it would be good if we didnt have to install a plugin to do it

In the characteristics of any interface (frame, button, TextLabel, etc.) there is a position and a size. These characteristics are written like this {0, 0} - X {0, 0} - Y. The first number in brackets {} is Scale and Offset.

Offset is the size/position in pixels.
Scale is the size/position as a percentage of the screen.

The first number in brackets is what we need!
So always use Scale instead of Offset. Also don’t forget to change Offset to Scale in Scripts.

UISizeConstraint will also help to limit the minimum and maximum size.
UITextSizeConstraint will help to limit the minimum and maximum text size.
And the UIAspectRatioConstraint will scale the object to the aspect ratio.

I would recommend the AutoScale lite plugin, the plugin will turn Offset into Scale and vice versa and set the required number to UIAspectRatioConstraint.

P.S. I saw that you are using this plugin, unfortunately the plugin does not automatically scale the interface, each interface object will have to be clicked on its own.

Hello!

Ive had this problem in the past, and someone told me to use this plugin called AutoScale Lite.
I use this plugin for my whole time GUI designing, and it works perfectly for me.

The way it works is that when you create a new gui element (or your existing element) you can press Unit Conversion on the plugins bar, then a small window will popup with options of scaling and offseting. I dont use UI Constraint because it doesnt work 100% of the time for me.

You want to Scale the Postition and Size for All the Screen Elements you will be using.

Hope this Helps!

1 Like

It would still be great to have the option to automatically scale it, to this day I still have issues with UI scaling, I tried every plugin in existence, nothing works

2 Likes