How do you ALWAYS get UI scaled right across all devices?

I’m really puzzled, I always keep size AND position for UI elements in scale, it’s a good result but there’s always some TextLabel or anything really that’s a bit off.

Should offset be used for position? I’ve seen so many threads and I even use AspectRatio, which improves it a bit but makes it look bad on VGA and some phones.

I’d appreciate any help, thanks!

2 Likes

This takes some practice, and most people make specific UI tailored towards PC and console users, mobile users, and phone users.

Offset is highly frowned upon, but offset is more useful than scale once you start knowing how to UI design properly, consider practicing using a combination of offset and scale.

1 Like

If you had something like a text button, 0,50,0,50, since its offset it does not scale on every device. Convert it to scale (0.5,0,0.5,0) and it will scale well on every device.

Note 0,50 is not the same as 0.5,0 (0,50 is 50 PX, 0.5,0 is half the screen)

So when are you supposed to use offset?

It is usually so much easier working with offset than scale. Unfortunately, not everyone has the same screen size as you and the UI would therefore appear in a strange position or size. Therefore, it is best not to use offset for positioning at the final game.

What I usually do is to create the UI using offset values (mostly by adjusting and moving the UI around by dragging it). Once the whole screen is done, I convert the offset values to scale values. Then I work on the scripting aspect later so that it will not mess up the position and size of the UI.

You do not need to worry about manually changing the sizes and position of the UI element on the properties tab as you can adjust it with the dots:
image

I highly recommend using @ZacBytes’s AutoScale plugin when converting as it does this pretty well. I believe it is still working to this date. Here is the link to his topic: [Plugin] AutoScale Lite for GUIs - Scale your UI