When you work with GUIs you may have noticed how some properties like size and position are formatted with four numbers as opposed to two.
I mean, it would make sense that there are only two numbers because GUIs only have two dimensions: X and Y. So why do they have four numbers? This tutorial attempts to explain in detail the reasoning behind this and why it can be very useful.
You will need a little experience with Roblox Studio; such as the ability to create and manipulate objects in it. Especially GUIs. You also need to have a basic understand of the X and Y components in 2D space. Like how X is the horizontal (left and right) component and Y is the vertical (up and down) component.
Scale is essentially a percentage of the GUI's parent size (or the screen size if the parent is a ScreenGui) and scales with the size of the parent/screen. Offset is an absolute value in pixels and will always be the same no matter the parent/screen size.
If you have noticed that the size and position properties have four numbers in them, you may have also noticed that when you expand these properties it gives you the individual X and Y components of the property.
And that those components have two numbers as well. However, if you open each component you get a new set of changable numbers.
You may be wondering why these two new sub-properties have one number associated with them and not two or four. This is because these sub-properties are part of the whole property. Very confusing, right? Well, let's hope I can clear that up.
To start, you notice how the position property is stylized as:
{0, 0}, {0, 0}
The two numbers in the curly braces correspond to one coordinate, the first set is the X-coordinate and the second set is the Y-coordinate. So it looks like this:
{X, X}, {Y, Y}
But there's two Xs and two Ys. Y is that? (see what I did there?) This is because the first X and first Y are in "scale" and second X and second Y are in pixels. So it looks more like this:
{XScale, XOffset, YScale, YOffset}
Now it makes more sense why the properties display X and Y as a sub-section and why Scale and Offet are sub-sections of X and Y.
But what exactly is scale and offset? You can think of scale like a percentage (however from 0 to 1 as opposed to 0 to 100; you can multiple the scale by 100 to see it as a percentage). For example; if I set scale of the X coordinate for size to 0.5, then the size of the X component of the GUI will be 50% of its parent's width (if the parent is a ScreenGui then the width of your screen). If the parent of the GUI would be resized, then the GUI's size or position would be scaled automatically. It will always be 50% of its parent's width.
Notice for this example the sizes. The screen size was 600 x 500 pixels, so the GUI with a size of 0.5 for it's X scale was half the the width of the screen (or 50% of the width). This is 300 pixels because half of 600 is 300, alternatively you can mutliple that scale number: 0.5 by the width. In this case 0.5 * 600 is also 300. This is why this property is called "scale" because it scales the coordinate. In this case it scaled the width by half the screen size. You can do this with the first two GUIs, too. 0.25 * 600 = 150 and 0.375 * 600 = 225 | these are their respective size in pixels.
So what happens if you make the scale 2? This will double the size of either the width or height depending on the coordinate. (X is the width and Y is the height).
Then you have offset, which is an absolute amount no matter the parent/screen size. This is in pixels as you can see from the last three GUIs.
Knowing this, you may find it beneficial to go from scale to offset. This is a pretty simple equation, fortunately. All you need to know is the scale and the size of it's parent. Let's say you have a TextLabel with the size of {0.5, 0}, {0, 50} and the size of the TextLabel's parent is 500 x 500 pixels. You want to translate the scale to the offset size. This can be done by taking the X size of the parent frame and multiplying it by the X scale of the TextLabel. In this case it's 0.5 * 500 which is 250 pixels. Your new size would look like this: {0, 250}, {0, 50}
Now what if you wanted to transfer from scale to offset? This is a similar process; you need to know the offset size of your TextLabel and it's parent size. Let's say the size of the TextLabel is {0, 125}, {0, 50} and you want to translate the X and Y offset to their scale counterpart. Let's say the TextLabel's parent size is 500 x 250 pixels. So this is as simple as taking the offset size of the TextLabel and dividing it by the size of the parent. So, the X scale would be 125 / 500 and the Y scale would be 50 / 250. 125 / 500 = 0.25 and 50 / 250 = 0.2. Your new size would look like this: {0.25, 0}, {0.2, 0}