Lesson 01 of 05
The GUI Hierarchy
Every interface lives inside a ScreenGui, and every element inherits from GuiObject.
A Roblox interface is a tree: ScreenGui → Frames → Children. ScreenGui lives in PlayerGui and is the root. Frames are containers. Every visible element is a GuiObject with Position, Size, Visible, and ZIndex.
Key insight: build UI once and manipulate it at runtime. Toggle Visible and update properties — never destroy/recreate.
ResetOnSpawn = false keeps your UI alive across respawns. DisplayOrder controls which ScreenGui renders on top when multiple exist.
luau
1local player = game.Players.LocalPlayer
2local gui = Instance.new('ScreenGui')
3gui.Parent = player:WaitForChild('PlayerGui')
4gui.ResetOnSpawn = false
5gui.DisplayOrder = 10
6
7local frame = Instance.new('Frame')
8frame.Size = UDim2.new(0, 400, 0, 300)
9frame.Position = UDim2.new(0.5, -200, 0.5, -150)
10frame.BackgroundColor3 = Color3.fromRGB(20, 22, 28)
11frame.BackgroundTransparency = 0.1
12frame.Parent = gui
READY · 12 lines