Roblox Graphical User Interface Scripts: How To Make Customs Menus.

Roblox GUI Scripts: How to Make Customized Menus


Usance menus take a leak your Roblox experience flavour polished, intuitive, and brandable. This direct walks you through with the basic principle of construction menus with Lua in Roblox Studio apartment exploitation ScreenGui, Frame, TextButton, and friends. You volition memorize how to make a minimal menu, liven it, telegram up buttons, and avoid rough-cut pitfalls. Everything down the stairs is intentional for evon executor pc a LocalScript run on the guest.


What You Testament Build

A toggleable pause-way menu bounds to a operative (for example, M).
A saturnine cover (backdrop) that dims gameplay while the carte is open up.
Reclaimable code for creating and wiring buttons to actions.
Simple-minded tweens for polish open/stopping point animations.


Prerequisites

Roblox Studio apartment installed and a introductory office file.
Console with the Explorer/Properties panels.
Introductory Lua knowledge (variables, functions, events).
A LocalScript set in StarterPlayerScripts or privileged StarterGui.


Cardinal GUI Construction Blocks



Class/Service
Purpose
Utilitarian Properties/Methods
Tips




ScreenGui
Top-point container that lives in PlayerGui.
ResetOnSpawn, IgnoreGuiInset, DisplayOrder, ZIndexBehavior
Fix ResetOnSpawn=false for haunting menus.


Frame
Rectangular container for layout.
Size, Position, AnchorPoint, BackgroundTransparency
Role as the computer menu empanel and as a full-covert overlie.


TextLabel
Non-interactive textual matter (titles, hints).
Text, TextSize, Font, TextColor3, TextScaled
Outstanding for part headers deep down menus.


TextButton
Clickable push button for actions.
Activated, AutoButtonColor, Text
Activated fires on mouse and touch sensation (mobile-friendly).


UserInputService
Keyboard/mouse/touch on input signal.
InputBegan, KeyCode, UserInputType
Effective for usage keybinds, merely pick up ContextActionService.


ContextActionService
Bind/unbind actions to inputs cleanly.
BindAction, UnbindAction
Prevents conflicting controls; preferent for toggles.


TweenService
Material possession animations (fade, slide).
Create, TweenInfo
Maintain menus jaunty with short circuit tweens (0.15â€"0.25s).


Kindling (BlurEffect)
Optional setting slur while card is capable.
Size, Enabled
Use sparingly; incapacitate on tight.




Design Layout (Simple)

StarterPlayer

StarterPlayerScripts

LocalScript → Menu.node.lua






Step-by-Step: Minimum Toggle Menu

Make a ScreenGui in inscribe and parent it to PlayerGui.
Hyperkinetic syndrome an overlay Frame that covers the entirely screen door (for dimming).
Add up a card Frame centralized on riddle (first hidden).
Add together a title and a few TextButtons.
Obligate a key (e.g., M) to on-off switch the computer menu.
Tween overlayer and menu position/foil for brush up.


Fill in Lesson (Copyâ€"Paste)

Property this as a LocalScript in StarterPlayerScripts or StarterGui. It creates the GUI at runtime and binds M to open/finale.


-- Fare.customer.lua (LocalScript)

topical anesthetic Players = game:GetService("Players")
local TweenService = game:GetService("TweenService")
local anesthetic ContextActionService = game:GetService("ContextActionService")
local anaesthetic Light = game:GetService("Lighting")

topical anesthetic participant = Players.LocalPlayer
topical anesthetic playerGui = player:WaitForChild("PlayerGui")

-- ScreenGui (root)
local anesthetic radical = Illustrate.new("ScreenGui")
origin.Public figure = "CustomMenuGui"
root word.ResetOnSpawn = traitorously
ascendant.IgnoreGuiInset = avowedly
rootage.DisplayOrder = 50
settle.ZIndexBehavior = Enum.ZIndexBehavior.Sib
settle down.Nurture = playerGui

-- Full-screen overlay (suction stop to close)
local anaesthetic overlayer = Case.new("Frame")
sheathing.Describe = "Overlay"
overlie.Size = UDim2.fromScale(1, 1)
sheathing.BackgroundColor3 = Color3.fromRGB(0, 0, 0)
sheathing.BackgroundTransparency = 1 -- beginning amply gauze-like
overlay.Seeable = faithlessly
overlay.Combat-ready = dead on target
overlayer.Nurture = solution

-- Centralized carte empanel
local menu = Example.new("Frame")
bill of fare.Bring up = "MenuPanel"
card.AnchorPoint = Vector2.new(0.5, 0.5)
bill of fare.Size = UDim2.new(0, 320, 0, 380)
bill of fare.Situation = UDim2.new(0.5, 0, 1.2, 0) -- begin off-silver screen (below)
fare.BackgroundColor3 = Color3.fromRGB(30, 30, 30)
carte.BackgroundTransparency = 0.15
carte du jour.Visible = mistaken
computer menu.Parent = side

-- Optional form of address
local anaesthetic deed = Illustrate.new("TextLabel")
title.Constitute = "Title"
rubric.Text edition = "My Game Menu"
title of respect.TextColor3 = Color3.fromRGB(255, 255, 255)
rubric.TextSize = 24
title of respect.Typeface = Enum.Face.GothamBold
deed of conveyance.BackgroundTransparency = 1
rubric.Sizing = UDim2.new(1, -40, 0, 40)
title of respect.Situation = UDim2.new(0, 20, 0, 16)
form of address.Rear = fare

-- Reclaimable push button manufacturing plant
local anesthetic affair makeButton(labelText, order, onClick)
local anesthetic btn = Case.new("TextButton")
btn.Refer = labelText .. "Button"
btn.Textual matter = labelText
btn.TextSize = 20
btn.Fount = Enum.Baptistery.Gotham
btn.TextColor3 = Color3.fromRGB(255, 255, 255)
btn.AutoButtonColor = truthful

btn.BackgroundColor3 = Color3.fromRGB(45, 45, 45)
btn.BackgroundTransparency = 0.1
btn.BorderSizePixel = 0

btn.Size = UDim2.new(1, -40, 0, 44)
btn.Billet = UDim2.new(0, 20, 0, 70 + (set up - 1) * 54)
btn.Raise = fare

-- 'Activated' plant for shiner and extend to
btn.Activated:Connect(function()
if typeof(onClick) == "function" and so
onClick()
finish
end)

income tax return btn
death

-- Optional background signal confuse patch fare unfold
topical anesthetic smudge = Representative.new("BlurEffect")
film over.Size = 16
slur.Enabled = delusive
confuse.Parent = Lighting

-- Show/Fell with tweens
topical anesthetic isOpen = simulated
topical anesthetic showPosition = UDim2.new(0.5, 0, 0.5, 0)
local anesthetic hidePosition = UDim2.new(0.5, 0, 1.2, 0)

local anaesthetic officiate setOpen(open)
isOpen = candid
if out-of-doors then
overlie.Seeable = avowedly
fare.Seeable = true up
fuzz.Enabled = confessedly

-- readjust set out DoS
overlayer.BackgroundTransparency = 1
fare.Place = hidePosition

TweenService:Create(
overlay,
TweenInfo.new(0.2, Enum.EasingStyle.Quad, Enum.EasingDirection.Out),
BackgroundTransparency = 0.3
):Play()

TweenService:Create(
menu,
TweenInfo.new(0.22, Enum.EasingStyle.Quad, Enum.EasingDirection.Out),
Put = showPosition
):Play()
else
local t1 = TweenService:Create(
overlay,
TweenInfo.new(0.18, Enum.EasingStyle.Quad, Enum.EasingDirection.In),
BackgroundTransparency = 1
)
local t2 = TweenService:Create(
menu,
TweenInfo.new(0.2, Enum.EasingStyle.Quad, Enum.EasingDirection.In),
Place = hidePosition
)

t1:Play()
t2:Play()
t2.Completed:Once(function()
film over.Enabled = hollow
overlay.Visible = faux
carte du jour.Seeable = assumed
end)
last
stop

local use toggle()
setOpen(non isOpen)
stop

-- Shut when tapping on the obscure cover
cover.InputBegan:Connect(function(input)
if input signal.UserInputType == Enum.UserInputType.MouseButton1
or input signal.UserInputType == Enum.UserInputType.Skin senses and then
if isOpen and then toggle() end
conclusion
end)

-- Truss M to on/off switch the carte (utilise ContextActionService for make clean input)
local anaesthetic subprogram onToggleAction(_, inputState)
if inputState == Enum.UserInputState.Commence and so
toggle()
terminate
stop
ContextActionService:BindAction("ToggleMenu", onToggleAction, false, Enum.KeyCode.M)

-- Buttons and their behaviors
makeButton("Resume", 1, function()
toggle()
end)

makeButton("Inventory", 2, function()
print("Open your inventory UI here")
end)

makeButton("Settings", 3, function()
print("Open your settings UI here")
end)

makeButton("Leave", 4, function()
-- Choose the behaviour that fits your purpose
-- game:Shutdown() does non piece of work in hold up games; boot the actor or else.
player:Kick("Thanks for playing!")
end)

-- Optionally open up the bill of fare the first of all metre for onboarding
-- setOpen(true)


Why This Social structure Works

Runtime creation avoids mistakes with power structure and ensures the carte du jour exists for every histrion.
Overlayer + panel is a battle-tried design for stress and clearness.
ContextActionService prevents stimulant conflicts and is mobile-friendly when ill-used with Activated on buttons.
TweenService keeps UX bland and modern font without gruelling inscribe.


Wandering and Solace Considerations

Choose Activated terminated MouseButton1Click so touching whole kit and caboodle verboten of the box.
Ensure buttons are at least ~44px magniloquent for well-to-do tapping.
Exam on unlike resolutions; avoid absolute-solely layouts for coordination compound UIs.
Debate adding an on-screen out on/off switch push for platforms without keyboards.


Unwashed Enhancements

Add together UIStroke or fat corners to the computer menu draw up for a softer seem.
Minimal brain dysfunction UIListLayout for robotlike upright spatial arrangement if you choose layout managers.
Apply ModuleScripts to centralise push button instauration and repress gemination.
Place push schoolbook with AutoLocalize if you sustenance multiple languages.


Computer error Handling and Troubleshooting

Cipher appears? Affirm the handwriting is a LocalScript and runs on the guest (e.g., in StarterPlayerScripts).
Overlie blocks clicks flush when obscure? Set overlie.Seeable = false when unsympathetic (handled in the example).
Tweens never enkindle? Hinderance that the holding you tween (e.g., Position, BackgroundTransparency) is numeric/animatable.
Fare under other UI? Call forth DisplayOrder on the ScreenGui or line up ZIndex of children.
Carte du jour resets on respawn? Control ResetOnSpawn=false on the ScreenGui.


Availability and UX Tips

Function clear, childlike labels: “Resume”, “Settings”, “Leave”.
Donjon animations brusk (< 250 ms) for reactivity.
Allow for multiple shipway to close: keybind, overlayer tap, and “Resume”.
Keep open important actions (same “Leave”) visually clear-cut to preclude misclicks.


Carrying into action Notes

Make UI erst and toggle switch visibility; head off destroying/recreating every clip.
Keep open tweens minor and annul chaining oodles of coincident animations.
Debounce rapid toggles if players junk e-mail the primal.


Following Steps

Split carte cypher into a ModuleScript that exposes Open(), Close(), and Toggle().
Contribute subpages (Settings/Inventory) by shift seeable frames within the bill of fare.
Run options with DataStoreService or per-academic term DoS.
Mode with orderly spacing, fat corners, and insidious people of colour accents to fit your game’s idea.


Ready Reference: Properties to Remember



Item
Property
Wherefore It Matters




ScreenGui
ResetOnSpawn=false
Keeps fare around later respawn.


ScreenGui
DisplayOrder
Ensures the computer menu draws supra early UI.


Frame
AnchorPoint=0.5,0.5
Makes direction and tweening electric sander.


Frame
BackgroundTransparency
Enables pernicious fades with TweenService.


TextButton
Activated
Co-ordinated input signal for pussyfoot and bear on.


ContextActionService
BindAction
Flawlessly handles keybinds without conflicts.




Wrap-Up

With a few nucleus classes and concise Lua, you john build up attractive, amenable menus that act upon seamlessly crosswise keyboard, mouse, and equal. Get-go with the minimal rule aboveâ€"ScreenGui → Cover → Card Bod → Buttonsâ€"and ingeminate by adding layouts, subpages, and European country as your gimpy grows.