UI Scaling & Positioning Workarounds 101

I have made a refurbished version of this post, it would be a much better idea to check it out instead:

Old post

Anybody new to interface designing within Roblox studio will get to know the fact that Roblox doesn’t exactly have the friendliest UI editor pretty quickly; on the first few pages of the Art Design Support category itself you can already see three posts talking about the same issue.

Reference

This post will run you through possible scenarios that you are facing and how to solve them.

How do I make my UI fit all devices? Why does it not position correctly?

Reference

Roblox’s UI editor consists of two UDim2 values; Scale and Offset.

image

The Offset UDim2 value will stay with the same amount of pixels, no matter what screen they’re being viewed on.
Scale is based on percentages, a “0.5” Size value will take up half of the screen (0.5 = 50%).

To ensure that your UI scales properly across every device, make sure that the offset property is set to 0. However, if you would like to get technical, a mix of Scale and Offset would work just as well.
As an end product, your UI should scale properly -

Why do the rounded corners of my UI change size on different devices?

Reference

Just like the position and size UDim2 values of any UI, UICorners also consist of these UDim2 values.


Ensuring that your CornerRadius property consists of 0 offset is your issue, however, if you are using interface plugins such as roundify to create rounded UIs the only solution is to put rounding plugins in the past and make use of UICorner.

Plugins like roundify use a circular ImageLabel with a Slice ScaleType to round your Frame.
On top of that, the more you round your frame with roundify the quality of your UI will reduce.

Reference

End result, your UI will maintain it’s round property across every device.

Why does my UI not remain in place and slightly offset on different devices?

Reference

This has nothing to do with Scale/Offset, but more of the hierarchy and setup of your UI.

It is important that your UI is set up with a frame as a placeholder, placing your UIs directly into the ScreenGui is not scale-friendly.

bad bruh :x:
image

very chad, good setup :white_check_mark:

As stated, having your UIs grouped into one frame helps with scaling. Another thing that should be considered is the AnchorPoint.
AnchorPoints are a Vector2 property and determine the origin point of your UI.

You need to set your AnchorPoint depending on where your UIs are positioned, see the API Reference -

In this scenario, the AnchorPoint would need to be set at 0.5, 1

End result, your UIs should not offset.

Additional help

Plugin to help with scaling:
[Plugin] AutoScale Lite for GUIs - Scale your UI

Rounding plugin that utilizes UICorner:
Edge - UiCorner Rounded GUI Plugin

59 Likes

Can you please provide an example for this? Thanks

1 Like

While using scale entirely is a solution, it may not be the best choice.
For example, this is a prompt in entirely scale shown on mobile:

This would be way too small for a mobile user to interact with.
So the solution, we add an extra 300 pixels of offset on both axes (size is {0.115, 300},{-0.025, 300}.

The UI is big enough to be intuitive and functional on mobile, while retaining perfection on any other desktop device.

5 Likes

:thinking: I’ve never tried that before, thanks for the insight! I wonder how it scales properly on all resolutions. Also sorry for responding two years later

1 Like