Module 11 · Roblox UI systems
UDim2 and AnchorPoint
Combine scale, offset, and an anchor to position UI as parent size changes.
What you will learn
- Distinguish scale and offset
- Use AnchorPoint for centering
- Predict UI movement when parent size changes
- UDim2
- Two-dimensional UI values combining scale and pixel offset for X and Y.
- AnchorPoint
- The normalized point inside an object used for positioning.
Loading saved progress…
Understand
Read the idea and follow a worked example.
Why this matters
Coin Quest HUD should remain centered and usable on phones, tablets, and desktop windows instead of matching only one test size.
The mental model
Scale is a fraction of the parent; offset is a pixel adjustment. Each position axis combines both.
AnchorPoint chooses which point inside the child sits at Position. Vector2.new(0.5, 0.5) anchors the center.
New words and symbols
--!strict asks Studio to check your code for type mistakes. It is an instruction for the editor and produces no Output message.
Matching quotes such as "hello" surround a string: a piece of text. The quotation marks tell Luau where the text starts and ends.
local is read as “local”: it creates a name that is available only in the current code scope.
: is read as “colon”: it calls a method with the object supplied as the first receiver value.
= is read as “is assigned”: it evaluates the right side and stores that value in the name on the left.
. is read as “dot”: it accesses a named property or table field.
A tiny example
--!strictlocal panel = script.Parentassert(panel:IsA("GuiObject"), "Script parent must be a GuiObject")panel.AnchorPoint = Vector2.new(0.5, 0.5)panel.Position = UDim2.fromScale(0.5, 0.5)panel.Size = UDim2.new(0.8, 0, 0, 96)Line by line
- 3
The selected lesson target is the Script's parent.
- 4
GuiObject refinement permits position and size properties.
- 6
The panel's center becomes its positioning anchor.
- 7
The anchor is placed at the parent's center by scale.
- 8
Width follows 80 percent of the parent while height remains 96 pixels.
Read the code aloud
Read one statement at a time: name the value being read, what the operation does, and where its result goes. Keep identifiers exactly as written so you can find them again in the code.
Pause at calls, conditions, and loops. Explain when the body runs before moving to the next statement; use the line notes above when a symbol is unfamiliar.
Execution trace
Begin at the first executable statement. Comments and blank lines do not run; a branch chooses which block runs, and a loop may revisit its body.
Line 3: The selected lesson target is the Script's parent.
Line 4: GuiObject refinement permits position and size properties.
Line 6: The panel's center becomes its positioning anchor.
Line 7: The anchor is placed at the parent's center by scale.
Line 8: Width follows 80 percent of the parent while height remains 96 pixels.
State before and after
Before running, identify the starting values and any existing Studio objects this example needs. List what you expect to change.
After your practice change, check this result: You can predict which child point moves and which measurements scale or remain pixels.
Reading or printing a value leaves it unchanged. Look for assignments, calls that change state, and property updates to explain each change you observe.
Predict before running
What stays fixed when the parent becomes wider?
Try it
Mark each step after you have tried it.
Common mistake
Setting Position to 50 percent without a center AnchorPoint places the object's top-left at center. Set both values intentionally.
Checkpoint
Submit once you have considered every question. Retries are unlimited.
Recap
- Scale follows parent size.
- Offset adds pixels.
- AnchorPoint defines which child point Position controls.
Next: Next, layout and constraint objects will organize groups without manual coordinates.
Studio Companion
Not connected
Connect once. Compatible challenges will prepare automatically as you reach them.