Module 11 · Roblox UI systems
ScreenGui, StarterGui, and PlayerGui
Separate the UI template from each player's runtime copy.
What you will learn
- Describe StarterGui as a template location
- Find runtime ScreenGui copies in PlayerGui
- Place UI logic on the client
- ScreenGui
- A container that displays 2D interface descendants on a player's screen.
- template
- A configured source Roblox copies to create runtime UI.
Loading saved progress…
Understand
Read the idea and follow a worked example.
Why this matters
Every Coin Quest player needs a local HUD copy that can update responsively without making the server draw interface elements.
The mental model
StarterGui holds UI templates. Roblox copies supported content into each Player's PlayerGui for runtime display.
LocalScripts control the runtime UI. The server sends approved state rather than directly editing every screen.
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.
print(...) calls the built-in print function. Put the values to show inside its parentheses; separate multiple values with commas. Read the result in Studio's Output panel.
local is read as “local”: it creates a name that is available only in the current code scope.
== is read as “equals equals”: it compares two values and produces a boolean.
: 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 Players = game:GetService("Players")local player = Players.LocalPlayerlocal playerGui = player:WaitForChild("PlayerGui")local coinHud = playerGui:WaitForChild("CoinHud")assert(coinHud:IsA("ScreenGui"), "CoinHud must be a ScreenGui")print(coinHud.Parent == playerGui)Line by line
- 3
Players provides the local Player on the client.
- 4
LocalPlayer is client-only identity for presentation.
- 5
PlayerGui is the runtime UI container.
- 6
The copied CoinHud is required before controller work.
- 8
The class assertion documents the expected template result.
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: Players provides the local Player on the client.
Line 4: LocalPlayer is client-only identity for presentation.
Line 5: PlayerGui is the runtime UI container.
Line 6: The copied CoinHud is required before controller work.
Line 8: The class assertion documents the expected template result.
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 point to both template and runtime copy and explain why they are different objects.
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
Where does the visible runtime copy live?
Try it
Mark each step after you have tried it.
Common mistake
Editing only the StarterGui template during Play may not change the already-created PlayerGui copy. Controllers should target the runtime copy.
Checkpoint
Submit once you have considered every question. Retries are unlimited.
Recap
- StarterGui stores templates.
- PlayerGui holds a player's runtime UI.
- UI controllers run locally.
Next: Next, you will create Frames, labels, and buttons for their intended roles.
Studio Companion
Not connected
Connect once. Compatible challenges will prepare automatically as you reach them.