Intermediate Free

UI Basics

A game with great mechanics but a terrible UI will fail. Let's learn how to build responsive, scripted 2D interfaces for your players.

The StarterGui

All UI elements are created inside the StarterGui folder in the Explorer. When a player's character spawns, everything inside StarterGui is copied directly into their personal PlayerGui folder.

The base container for any UI is a ScreenGui. You must create a ScreenGui inside StarterGui before you can add any text or buttons.

Scale vs. Offset (Critical Concept)

Every UI element's Size and Position uses a UDim2 coordinate, formatted like this: {X Scale, X Offset}, {Y Scale, Y Offset}.

Offset: Exact pixel measurements. A button sized `{0, 100}, {0, 50}` will be exactly 100x50 pixels. It looks great on PC, but tiny on mobile!
Scale: A percentage of the screen. A button sized `{0.5, 0}, {0.5, 0}` will take up exactly 50% of the screen width and 50% of the height, no matter if the player is on an iPhone or a 4K monitor.

Pro Tip: Professional games rely heavily on Scale for responsive design, combined with a UIAspectRatioConstraint to prevent elements from stretching into weird shapes on ultra-wide monitors.

Scripting Buttons

Because UI only exists on the player's screen, you must use LocalScripts to make buttons work. A Server Script placed inside a UI element will not function correctly.

LocalScript inside a TextButton

local button = script.Parent

button.MouseButton1Click:Connect(function()
    print("The button was clicked!")
    
    -- Optional: If you need to buy an item, fire a remote!
    -- BuyItemEvent:FireServer("Sword")
end)

Layout Modifiers

Instead of manually positioning 50 inventory slots, you can insert a UIGridLayout into a Frame. The grid layout automatically snaps all child elements into a perfect grid, saving you hours of tedious work.