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.
This post will run you through possible scenarios that you are facing and how to solve them.
Roblox’s UI editor consists of two UDim2 values; Scale and Offset.
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 -
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.
End result, your UI will maintain it’s round property across every device.
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.
very chad, good setup
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
End result, your UIs should not offset.
Plugin to help with scaling:
Rounding plugin that utilizes UICorner: