Hello!
There are way to many posts of people who want to make their UI scale correctly on all devices, but just dont understand how to do it, so I thought I’d make this post to compile all the info I can get!
Now before we talk about scale and offset, lets talk about where they are used.
Scale and offset are used inside of something we call a UDim2. UDim2’s are similar to a vector2, except they have 4 arguments, what are these arguments you ask?
Example:
{ScaleX,OffsetX,ScaleY,OffsetY}
Udim2’s are what roblox uses to position, and size UI elements in roblox, among other things.
So now that we know where they are used, lets see how they are used.
Whats scale?
You can think of scale as a percentage, the only difference is that it goes from 0 to 1, instead of 0% to 100%.
Anyhow, have you ever played a game and noticed how UI actually scales to fit the screen correctly? Introducing scale!
Heres an example, lets say I have a UI element thats ScaleX is set to 0.5, or 50%, that means its going to take up 50% of its parents total width!
So if the frames parent is a ScreenGui, then it’ll take up 50% of my screens size!
Same thing can be said about ScaleY, except ScaleY is height.
So yeah thats how scale works in the simplest terms.
Next we have . . .
Offset
Offset is a measurement that will retain its same shape basically always.
For instance if I set a frame’s OffsetX and OffsetY to both 50, then its going to take up lets say 50 pixels (I know its not actually 50 pixels, it just works for the demonstration).
That means the frame is going to take up 50 pixels for both the width, and the height.
Now lets say I swap to a different device, and said device has a bigger screen, meaning more pixels. The frame will still be 50 by 50 pixels, thus it remains the same size, this can be said with getting a smaller device, the amount of pixels on the screen drops, but the frame will still remain the same size.
PS: Ill add images later for the demonstrations so its not a complete read fest.
Now lets talk about . . .
How roblox uses Scale and Offset
So when it comes to roblox, the use scale and offset in some interesting ways, for instance, if you were to scale a UI Element via the drag tools, its size will increase via offset, on the other hand, when positioning elements, their positions change via scale.
Plugins
Lets say you are using offset and you want to start using scale, but dont want to resize every single element, well dont worry as you can just use a nice plugin that no one has ever heard of before, AutoScale Lite by @ZacBytes. This plugin allows you to convert offset to scale, or vise versa.
It also allows you to create UIAspectRatiosConstraints, which I would recommend looking into!
There are also some plugins that will automatically convert offset to scale for you, but I dont know what they are so if you do, please tell me so I can list them!
Other Stuff
Documents
Other Posts Involving UI
Final Notes.
If I made an mistakes, please correct me, along with if you have any feedback, or something you’d like to add, feel free to leave it in the replies!
Ok bye~
~ Frodev
.