The scale-and-offset coordinate system that keeps GUIs on the right spot at every screen size.
Where a GUI element sits and how big it is — that's the job of UDim2. It looks cryptic at first, but it's just two pairs of numbers, and once you get the pattern, layout stops being guesswork.
A UDim2 is two pairs of numbers: scale then offset, for width then height.
UDim2.new(0, 200, 0, 50)
0.5 is halfway across.So UDim2.new(0, 200, 0, 50) means "200 by 50 pixels." And UDim2.new(0.5, 0, 0.5, 0) means "half the screen wide, half the screen tall" — it stretches with the window.
Use scale for things that should resize with the screen (a full-width bar), offset for things with a fixed size (a button).
In UDim2.new(0, 300, 0, 80), the number 300 is an measured in pixels.
The two properties work the same way:
label.Size = UDim2.new(1, 0, 0, 60) -- full width, 60 tall
button.Size = UDim2.new(0, 200, 0, 120) -- 200 by 120
button.Position = UDim2.new(0.5, 0, 0.5, 0) -- center of the screen
Size is how big; Position is where. UDim2.new(0.5, 0, 0.5, 0) for Position puts the element at the screen's center — but with a catch you'll fix next.
Which UDim2 makes a button exactly 100 pixels wide and 40 pixels tall?
A GUI's Position points to the top-left corner of the element by default. UDim2.new(0.5, 0, 0.5, 0) with no anchor puts the button's top-left corner at screen center — it looks off-center.
AnchorPoint changes which point of the element sticks to the Position:
button.AnchorPoint = Vector2.new(0.5, 0.5)
button.Position = UDim2.new(0.5, 0, 0.5, 0)
Vector2.new(0.5, 0.5) says "treat my center as my anchor." Now Position truly centers the button. Center anything by setting AnchorPoint to (0.5, 0.5) and Position to (0.5, X) / (0.5, Y).
Center a 200x100 button on the screen. Write the three lines: AnchorPoint, then Size, then Position — using Vector2 and UDim2.
-- center the button
UDim2.new(200, 0, 50, 0) is not "200 by 50".Next: making those GUIs look good.