Editable Luau Visual HUD only

Roblox HUD: Examples & GUI Maker

Start from a real game HUD scenario, tune the values players need to read, and export a responsive visual HUD with matching Luau.

What belongs in a HUD?

A HUD stays visible while the player acts: it can show identity, health, stamina, currency, and quick-access slots without taking over the game world.

HUD vs. inventory vs. main menu

Use a HUD for in-play status, an inventory for browsing item ownership, and a main menu for the first decision before play. This page gives each HUD preset a job and a usable visual starting point.

Interactive HUD preview

Change values and slots to see the in-play layout update

Ranger

LVL 24

1,280 Coins

Health75 / 100

Stamina42 / 100

Selected 2

Hotbar

1Sword

2Potion

3Torch

4Map

5Bow

6Food

7Key

8Empty slot

8 Hotbar · 2 Selected Mobile

Luau export

RangerHUDGui.lua

-- Visual HUD layout only. Connect live player data and input logic in your own game.
local Players = game:GetService("Players")
local player = Players.LocalPlayer
local playerGui = player:WaitForChild("PlayerGui")

local screenGui = Instance.new("ScreenGui")
screenGui.Name = "RangerHUDGui"
screenGui.ResetOnSpawn = false
screenGui.IgnoreGuiInset = true
screenGui.ZIndexBehavior = Enum.ZIndexBehavior.Sibling
screenGui.Parent = playerGui

local hudFrame = Instance.new("Frame")
hudFrame.Name = "HudFrame"
hudFrame.Size = UDim2.fromScale(1, 1)
hudFrame.BackgroundTransparency = 1
hudFrame.Parent = screenGui

local playerPanel = Instance.new("Frame")
playerPanel.Name = "PlayerPanel"
playerPanel.Position = UDim2.new(0.04, 0, 0.05, 0)
playerPanel.Size = UDim2.new(0.28, 0, 0.1, 0)
playerPanel.BackgroundColor3 = Color3.fromRGB(30, 41, 59)
playerPanel.BorderSizePixel = 0
playerPanel.Parent = hudFrame

local playerLabel = Instance.new("TextLabel")
playerLabel.Name = "PlayerNameLabel"
playerLabel.Position = UDim2.new(0.08, 0, 0.14, 0)
playerLabel.Size = UDim2.new(0.58, 0, 0.42, 0)
playerLabel.BackgroundTransparency = 1
playerLabel.Text = "Ranger"
playerLabel.TextColor3 = Color3.fromRGB(248, 250, 252)
playerLabel.Font = Enum.Font.GothamBold
playerLabel.TextScaled = true
playerLabel.TextXAlignment = Enum.TextXAlignment.Left
playerLabel.Parent = playerPanel

local playerIdentifier = Instance.new("TextLabel")
playerIdentifier.Name = "PlayerIdentifierLabel"
playerIdentifier.Position = UDim2.new(0.08, 0, 0.57, 0)
playerIdentifier.Size = UDim2.new(0.58, 0, 0.25, 0)
playerIdentifier.BackgroundTransparency = 1
playerIdentifier.Text = "LVL 24"
playerIdentifier.TextColor3 = Color3.fromRGB(74, 222, 128)
playerIdentifier.Font = Enum.Font.GothamSemibold
playerIdentifier.TextScaled = true
playerIdentifier.TextXAlignment = Enum.TextXAlignment.Left
playerIdentifier.Parent = playerPanel

local currencyPanel = Instance.new("Frame")
currencyPanel.Name = "CurrencyPanel"
currencyPanel.AnchorPoint = Vector2.new(1, 0)
currencyPanel.Position = UDim2.new(0.96, 0, 0.05, 0)
currencyPanel.Size = UDim2.new(0.24, 0, 0.08, 0)
currencyPanel.BackgroundColor3 = Color3.fromRGB(30, 41, 59)
currencyPanel.BorderSizePixel = 0
currencyPanel.Parent = hudFrame

local currencyLabel = Instance.new("TextLabel")
currencyLabel.Name = "CurrencyLabel"
currencyLabel.Position = UDim2.new(0.08, 0, 0.12, 0)
currencyLabel.Size = UDim2.new(0.84, 0, 0.76, 0)
currencyLabel.BackgroundTransparency = 1
currencyLabel.Text = "1,280 Coins"
currencyLabel.TextColor3 = Color3.fromRGB(251, 113, 133)
currencyLabel.Font = Enum.Font.GothamBold
currencyLabel.TextScaled = true
currencyLabel.TextXAlignment = Enum.TextXAlignment.Right
currencyLabel.Parent = currencyPanel

local statusPanel = Instance.new("Frame")
statusPanel.Name = "StatusPanel"
statusPanel.AnchorPoint = Vector2.new(0, 1)
statusPanel.Position = UDim2.new(0.04, 0, 0.72, 0)
statusPanel.Size = UDim2.new(0.4, 0, 0, 80)
statusPanel.BackgroundTransparency = 1
statusPanel.Parent = hudFrame

local statusPadding = Instance.new("UIPadding")
statusPadding.PaddingTop = UDim.new(0, 4)
statusPadding.PaddingBottom = UDim.new(0, 4)
statusPadding.PaddingLeft = UDim.new(0, 4)
statusPadding.PaddingRight = UDim.new(0, 4)
statusPadding.Parent = statusPanel

local statusLayout = Instance.new("UIListLayout")
statusLayout.Padding = UDim.new(0, 4)
statusLayout.SortOrder = Enum.SortOrder.LayoutOrder
statusLayout.Parent = statusPanel

local healthRow = Instance.new("Frame")
healthRow.Name = "HealthRow"
healthRow.Size = UDim2.new(1, 0, 0, 34)
healthRow.BackgroundTransparency = 1
healthRow.Parent = statusPanel

local healthRowLabel = Instance.new("TextLabel")
healthRowLabel.Name = "HealthLabel"
healthRowLabel.Size = UDim2.new(0.26, 0, 0.35, 0)
healthRowLabel.BackgroundTransparency = 1
healthRowLabel.Text = "Health"
healthRowLabel.TextColor3 = Color3.fromRGB(248, 250, 252)
healthRowLabel.Font = Enum.Font.GothamBold
healthRowLabel.TextSize = 11
healthRowLabel.TextXAlignment = Enum.TextXAlignment.Left
healthRowLabel.Parent = healthRow

local healthRowTrack = Instance.new("Frame")
healthRowTrack.Name = "Track"
healthRowTrack.Position = UDim2.new(0.27, 0, 0.08, 0)
healthRowTrack.Size = UDim2.new(0.73, 0, 0.58, 0)
healthRowTrack.BackgroundColor3 = Color3.fromRGB(51, 65, 85)
healthRowTrack.BorderSizePixel = 0
healthRowTrack.Parent = healthRow

local healthRowFill = Instance.new("Frame")
healthRowFill.Name = "Fill"
healthRowFill.Size = UDim2.new(0.75, 0, 1, 0)
healthRowFill.BackgroundColor3 = Color3.fromRGB(45, 212, 191)
healthRowFill.BorderSizePixel = 0
healthRowFill.Parent = healthRowTrack

local healthRowValue = Instance.new("TextLabel")
healthRowValue.Name = "ValueLabel"
healthRowValue.Position = UDim2.new(0.27, 0, 0.68, 0)
healthRowValue.Size = UDim2.new(0.73, 0, 0.28, 0)
healthRowValue.BackgroundTransparency = 1
healthRowValue.Text = "75 / 100"
healthRowValue.TextColor3 = Color3.fromRGB(186, 198, 214)
healthRowValue.Font = Enum.Font.Gotham
healthRowValue.TextSize = 10
healthRowValue.TextXAlignment = Enum.TextXAlignment.Right
healthRowValue.Parent = healthRow

local staminaRow = Instance.new("Frame")
staminaRow.Name = "StaminaRow"
staminaRow.Size = UDim2.new(1, 0, 0, 34)
staminaRow.BackgroundTransparency = 1
staminaRow.Parent = statusPanel

local staminaRowLabel = Instance.new("TextLabel")
staminaRowLabel.Name = "StaminaLabel"
staminaRowLabel.Size = UDim2.new(0.26, 0, 0.35, 0)
staminaRowLabel.BackgroundTransparency = 1
staminaRowLabel.Text = "Stamina"
staminaRowLabel.TextColor3 = Color3.fromRGB(248, 250, 252)
staminaRowLabel.Font = Enum.Font.GothamBold
staminaRowLabel.TextSize = 11
staminaRowLabel.TextXAlignment = Enum.TextXAlignment.Left
staminaRowLabel.Parent = staminaRow

local staminaRowTrack = Instance.new("Frame")
staminaRowTrack.Name = "Track"
staminaRowTrack.Position = UDim2.new(0.27, 0, 0.08, 0)
staminaRowTrack.Size = UDim2.new(0.73, 0, 0.58, 0)
staminaRowTrack.BackgroundColor3 = Color3.fromRGB(51, 65, 85)
staminaRowTrack.BorderSizePixel = 0
staminaRowTrack.Parent = staminaRow

local staminaRowFill = Instance.new("Frame")
staminaRowFill.Name = "Fill"
staminaRowFill.Size = UDim2.new(0.42, 0, 1, 0)
staminaRowFill.BackgroundColor3 = Color3.fromRGB(250, 204, 21)
staminaRowFill.BorderSizePixel = 0
staminaRowFill.Parent = staminaRowTrack

local staminaRowValue = Instance.new("TextLabel")
staminaRowValue.Name = "ValueLabel"
staminaRowValue.Position = UDim2.new(0.27, 0, 0.68, 0)
staminaRowValue.Size = UDim2.new(0.73, 0, 0.28, 0)
staminaRowValue.BackgroundTransparency = 1
staminaRowValue.Text = "42 / 100"
staminaRowValue.TextColor3 = Color3.fromRGB(186, 198, 214)
staminaRowValue.Font = Enum.Font.Gotham
staminaRowValue.TextSize = 10
staminaRowValue.TextXAlignment = Enum.TextXAlignment.Right
staminaRowValue.Parent = staminaRow

local hotbarLabel = Instance.new("TextLabel")
hotbarLabel.Name = "HotbarLabel"
hotbarLabel.Position = UDim2.new(0.05, 0, 0.7799999999999999, 0)
hotbarLabel.Size = UDim2.new(0.9, 0, 0.03, 0)
hotbarLabel.BackgroundTransparency = 1
hotbarLabel.Text = "Hotbar"
hotbarLabel.TextColor3 = Color3.fromRGB(186, 198, 214)
hotbarLabel.Font = Enum.Font.GothamBold
hotbarLabel.TextSize = 11
hotbarLabel.TextXAlignment = Enum.TextXAlignment.Center
hotbarLabel.Parent = hudFrame

local hotbar = Instance.new("Frame")
hotbar.Name = "Hotbar"
hotbar.AnchorPoint = Vector2.new(0.5, 0)
hotbar.Position = UDim2.new(0.5, 0, 0.82, 0)
hotbar.Size = UDim2.new(0.9, 0, 0.14, 0)
hotbar.BackgroundColor3 = Color3.fromRGB(30, 41, 59)
hotbar.BorderSizePixel = 0
hotbar.Parent = hudFrame

local hotbarLayout = Instance.new("UIGridLayout")
hotbarLayout.FillDirectionMaxCells = 8
hotbarLayout.CellPadding = UDim2.fromOffset(6, 0)
hotbarLayout.CellSize = UDim2.new(1 / 8, -(6 * 7 / 8 + 2), 1, 0)
hotbarLayout.SortOrder = Enum.SortOrder.LayoutOrder
hotbarLayout.Parent = hotbar
local hotbarSlot1 = Instance.new("Frame")
hotbarSlot1.Name = "HotbarSlot1"
hotbarSlot1.BackgroundColor3 = Color3.fromRGB(51, 65, 85)
hotbarSlot1.BorderSizePixel = 0
hotbarSlot1.BorderColor3 = Color3.fromRGB(74, 222, 128)
hotbarSlot1.LayoutOrder = 1
hotbarSlot1.Parent = hotbar

local hotbarSlot1Key = Instance.new("TextLabel")
hotbarSlot1Key.Name = "HotkeyLabel"
hotbarSlot1Key.Size = UDim2.new(0.3, 0, 0.3, 0)
hotbarSlot1Key.BackgroundTransparency = 1
hotbarSlot1Key.Text = "1"
hotbarSlot1Key.TextColor3 = Color3.fromRGB(74, 222, 128)
hotbarSlot1Key.Font = Enum.Font.GothamBold
hotbarSlot1Key.TextScaled = true
hotbarSlot1Key.Parent = hotbarSlot1

local hotbarSlot1Name = Instance.new("TextLabel")
hotbarSlot1Name.Name = "SlotName"
hotbarSlot1Name.Position = UDim2.new(0.06, 0, 0.42, 0)
hotbarSlot1Name.Size = UDim2.new(0.88, 0, 0.45, 0)
hotbarSlot1Name.BackgroundTransparency = 1
hotbarSlot1Name.Text = "Sword"
hotbarSlot1Name.TextColor3 = Color3.fromRGB(248, 250, 252)
hotbarSlot1Name.Font = Enum.Font.GothamSemibold
hotbarSlot1Name.TextScaled = true
hotbarSlot1Name.TextWrapped = true
hotbarSlot1Name.Parent = hotbarSlot1

local hotbarSlot2 = Instance.new("Frame")
hotbarSlot2.Name = "HotbarSlot2"
hotbarSlot2.BackgroundColor3 = Color3.fromRGB(51, 65, 85)
hotbarSlot2.BorderSizePixel = 2
hotbarSlot2.BorderColor3 = Color3.fromRGB(74, 222, 128)
hotbarSlot2.LayoutOrder = 2
hotbarSlot2.Parent = hotbar

local hotbarSlot2Key = Instance.new("TextLabel")
hotbarSlot2Key.Name = "HotkeyLabel"
hotbarSlot2Key.Size = UDim2.new(0.3, 0, 0.3, 0)
hotbarSlot2Key.BackgroundTransparency = 1
hotbarSlot2Key.Text = "2"
hotbarSlot2Key.TextColor3 = Color3.fromRGB(74, 222, 128)
hotbarSlot2Key.Font = Enum.Font.GothamBold
hotbarSlot2Key.TextScaled = true
hotbarSlot2Key.Parent = hotbarSlot2

local hotbarSlot2Name = Instance.new("TextLabel")
hotbarSlot2Name.Name = "SlotName"
hotbarSlot2Name.Position = UDim2.new(0.06, 0, 0.42, 0)
hotbarSlot2Name.Size = UDim2.new(0.88, 0, 0.45, 0)
hotbarSlot2Name.BackgroundTransparency = 1
hotbarSlot2Name.Text = "Potion"
hotbarSlot2Name.TextColor3 = Color3.fromRGB(248, 250, 252)
hotbarSlot2Name.Font = Enum.Font.GothamSemibold
hotbarSlot2Name.TextScaled = true
hotbarSlot2Name.TextWrapped = true
hotbarSlot2Name.Parent = hotbarSlot2

local hotbarSlot3 = Instance.new("Frame")
hotbarSlot3.Name = "HotbarSlot3"
hotbarSlot3.BackgroundColor3 = Color3.fromRGB(51, 65, 85)
hotbarSlot3.BorderSizePixel = 0
hotbarSlot3.BorderColor3 = Color3.fromRGB(74, 222, 128)
hotbarSlot3.LayoutOrder = 3
hotbarSlot3.Parent = hotbar

local hotbarSlot3Key = Instance.new("TextLabel")
hotbarSlot3Key.Name = "HotkeyLabel"
hotbarSlot3Key.Size = UDim2.new(0.3, 0, 0.3, 0)
hotbarSlot3Key.BackgroundTransparency = 1
hotbarSlot3Key.Text = "3"
hotbarSlot3Key.TextColor3 = Color3.fromRGB(74, 222, 128)
hotbarSlot3Key.Font = Enum.Font.GothamBold
hotbarSlot3Key.TextScaled = true
hotbarSlot3Key.Parent = hotbarSlot3

local hotbarSlot3Name = Instance.new("TextLabel")
hotbarSlot3Name.Name = "SlotName"
hotbarSlot3Name.Position = UDim2.new(0.06, 0, 0.42, 0)
hotbarSlot3Name.Size = UDim2.new(0.88, 0, 0.45, 0)
hotbarSlot3Name.BackgroundTransparency = 1
hotbarSlot3Name.Text = "Torch"
hotbarSlot3Name.TextColor3 = Color3.fromRGB(248, 250, 252)
hotbarSlot3Name.Font = Enum.Font.GothamSemibold
hotbarSlot3Name.TextScaled = true
hotbarSlot3Name.TextWrapped = true
hotbarSlot3Name.Parent = hotbarSlot3

local hotbarSlot4 = Instance.new("Frame")
hotbarSlot4.Name = "HotbarSlot4"
hotbarSlot4.BackgroundColor3 = Color3.fromRGB(51, 65, 85)
hotbarSlot4.BorderSizePixel = 0
hotbarSlot4.BorderColor3 = Color3.fromRGB(74, 222, 128)
hotbarSlot4.LayoutOrder = 4
hotbarSlot4.Parent = hotbar

local hotbarSlot4Key = Instance.new("TextLabel")
hotbarSlot4Key.Name = "HotkeyLabel"
hotbarSlot4Key.Size = UDim2.new(0.3, 0, 0.3, 0)
hotbarSlot4Key.BackgroundTransparency = 1
hotbarSlot4Key.Text = "4"
hotbarSlot4Key.TextColor3 = Color3.fromRGB(74, 222, 128)
hotbarSlot4Key.Font = Enum.Font.GothamBold
hotbarSlot4Key.TextScaled = true
hotbarSlot4Key.Parent = hotbarSlot4

local hotbarSlot4Name = Instance.new("TextLabel")
hotbarSlot4Name.Name = "SlotName"
hotbarSlot4Name.Position = UDim2.new(0.06, 0, 0.42, 0)
hotbarSlot4Name.Size = UDim2.new(0.88, 0, 0.45, 0)
hotbarSlot4Name.BackgroundTransparency = 1
hotbarSlot4Name.Text = "Map"
hotbarSlot4Name.TextColor3 = Color3.fromRGB(248, 250, 252)
hotbarSlot4Name.Font = Enum.Font.GothamSemibold
hotbarSlot4Name.TextScaled = true
hotbarSlot4Name.TextWrapped = true
hotbarSlot4Name.Parent = hotbarSlot4

local hotbarSlot5 = Instance.new("Frame")
hotbarSlot5.Name = "HotbarSlot5"
hotbarSlot5.BackgroundColor3 = Color3.fromRGB(51, 65, 85)
hotbarSlot5.BorderSizePixel = 0
hotbarSlot5.BorderColor3 = Color3.fromRGB(74, 222, 128)
hotbarSlot5.LayoutOrder = 5
hotbarSlot5.Parent = hotbar

local hotbarSlot5Key = Instance.new("TextLabel")
hotbarSlot5Key.Name = "HotkeyLabel"
hotbarSlot5Key.Size = UDim2.new(0.3, 0, 0.3, 0)
hotbarSlot5Key.BackgroundTransparency = 1
hotbarSlot5Key.Text = "5"
hotbarSlot5Key.TextColor3 = Color3.fromRGB(74, 222, 128)
hotbarSlot5Key.Font = Enum.Font.GothamBold
hotbarSlot5Key.TextScaled = true
hotbarSlot5Key.Parent = hotbarSlot5

local hotbarSlot5Name = Instance.new("TextLabel")
hotbarSlot5Name.Name = "SlotName"
hotbarSlot5Name.Position = UDim2.new(0.06, 0, 0.42, 0)
hotbarSlot5Name.Size = UDim2.new(0.88, 0, 0.45, 0)
hotbarSlot5Name.BackgroundTransparency = 1
hotbarSlot5Name.Text = "Bow"
hotbarSlot5Name.TextColor3 = Color3.fromRGB(248, 250, 252)
hotbarSlot5Name.Font = Enum.Font.GothamSemibold
hotbarSlot5Name.TextScaled = true
hotbarSlot5Name.TextWrapped = true
hotbarSlot5Name.Parent = hotbarSlot5

local hotbarSlot6 = Instance.new("Frame")
hotbarSlot6.Name = "HotbarSlot6"
hotbarSlot6.BackgroundColor3 = Color3.fromRGB(51, 65, 85)
hotbarSlot6.BorderSizePixel = 0
hotbarSlot6.BorderColor3 = Color3.fromRGB(74, 222, 128)
hotbarSlot6.LayoutOrder = 6
hotbarSlot6.Parent = hotbar

local hotbarSlot6Key = Instance.new("TextLabel")
hotbarSlot6Key.Name = "HotkeyLabel"
hotbarSlot6Key.Size = UDim2.new(0.3, 0, 0.3, 0)
hotbarSlot6Key.BackgroundTransparency = 1
hotbarSlot6Key.Text = "6"
hotbarSlot6Key.TextColor3 = Color3.fromRGB(74, 222, 128)
hotbarSlot6Key.Font = Enum.Font.GothamBold
hotbarSlot6Key.TextScaled = true
hotbarSlot6Key.Parent = hotbarSlot6

local hotbarSlot6Name = Instance.new("TextLabel")
hotbarSlot6Name.Name = "SlotName"
hotbarSlot6Name.Position = UDim2.new(0.06, 0, 0.42, 0)
hotbarSlot6Name.Size = UDim2.new(0.88, 0, 0.45, 0)
hotbarSlot6Name.BackgroundTransparency = 1
hotbarSlot6Name.Text = "Food"
hotbarSlot6Name.TextColor3 = Color3.fromRGB(248, 250, 252)
hotbarSlot6Name.Font = Enum.Font.GothamSemibold
hotbarSlot6Name.TextScaled = true
hotbarSlot6Name.TextWrapped = true
hotbarSlot6Name.Parent = hotbarSlot6

local hotbarSlot7 = Instance.new("Frame")
hotbarSlot7.Name = "HotbarSlot7"
hotbarSlot7.BackgroundColor3 = Color3.fromRGB(51, 65, 85)
hotbarSlot7.BorderSizePixel = 0
hotbarSlot7.BorderColor3 = Color3.fromRGB(74, 222, 128)
hotbarSlot7.LayoutOrder = 7
hotbarSlot7.Parent = hotbar

local hotbarSlot7Key = Instance.new("TextLabel")
hotbarSlot7Key.Name = "HotkeyLabel"
hotbarSlot7Key.Size = UDim2.new(0.3, 0, 0.3, 0)
hotbarSlot7Key.BackgroundTransparency = 1
hotbarSlot7Key.Text = "7"
hotbarSlot7Key.TextColor3 = Color3.fromRGB(74, 222, 128)
hotbarSlot7Key.Font = Enum.Font.GothamBold
hotbarSlot7Key.TextScaled = true
hotbarSlot7Key.Parent = hotbarSlot7

local hotbarSlot7Name = Instance.new("TextLabel")
hotbarSlot7Name.Name = "SlotName"
hotbarSlot7Name.Position = UDim2.new(0.06, 0, 0.42, 0)
hotbarSlot7Name.Size = UDim2.new(0.88, 0, 0.45, 0)
hotbarSlot7Name.BackgroundTransparency = 1
hotbarSlot7Name.Text = "Key"
hotbarSlot7Name.TextColor3 = Color3.fromRGB(248, 250, 252)
hotbarSlot7Name.Font = Enum.Font.GothamSemibold
hotbarSlot7Name.TextScaled = true
hotbarSlot7Name.TextWrapped = true
hotbarSlot7Name.Parent = hotbarSlot7

local hotbarSlot8 = Instance.new("Frame")
hotbarSlot8.Name = "HotbarSlot8"
hotbarSlot8.BackgroundColor3 = Color3.fromRGB(51, 65, 85)
hotbarSlot8.BorderSizePixel = 0
hotbarSlot8.BorderColor3 = Color3.fromRGB(74, 222, 128)
hotbarSlot8.LayoutOrder = 8
hotbarSlot8.Parent = hotbar

local hotbarSlot8Key = Instance.new("TextLabel")
hotbarSlot8Key.Name = "HotkeyLabel"
hotbarSlot8Key.Size = UDim2.new(0.3, 0, 0.3, 0)
hotbarSlot8Key.BackgroundTransparency = 1
hotbarSlot8Key.Text = "8"
hotbarSlot8Key.TextColor3 = Color3.fromRGB(74, 222, 128)
hotbarSlot8Key.Font = Enum.Font.GothamBold
hotbarSlot8Key.TextScaled = true
hotbarSlot8Key.Parent = hotbarSlot8

local hotbarSlot8Name = Instance.new("TextLabel")
hotbarSlot8Name.Name = "SlotName"
hotbarSlot8Name.Position = UDim2.new(0.06, 0, 0.42, 0)
hotbarSlot8Name.Size = UDim2.new(0.88, 0, 0.45, 0)
hotbarSlot8Name.BackgroundTransparency = 1
hotbarSlot8Name.Text = "Empty slot"
hotbarSlot8Name.TextColor3 = Color3.fromRGB(248, 250, 252)
hotbarSlot8Name.Font = Enum.Font.GothamSemibold
hotbarSlot8Name.TextScaled = true
hotbarSlot8Name.TextWrapped = true
hotbarSlot8Name.Parent = hotbarSlot8


-- Selected slot is a visual placeholder. Connect it to your own input and inventory state.

Visual HUD boundary

The file creates readable status bars, a currency panel, player labels, and hotbar slots with example values. It does not read Humanoid health, save items, or implement combat, equipment, input, or live data.

Export anatomy

A readable status layer for the moment-to-moment game

The HUD maker creates a named ScreenGui with a player panel, bounded currency panel, health and optional stamina bars, and a responsive hotbar. Every visible value in the preview is copied into the matching Luau instance.

PlayerNameLabel and PlayerIdentifierLabel for identity
HealthRow with current/max text and a zero-safe fill
Optional StaminaRow that disappears from the export when hidden
CurrencyPanel kept in the upper-right corner
Hotbar with 1–8 named slots and a legal selected slot
Scale-based placement with no live game data assumptions

Explorer hierarchyeditable instances

ScreenGui
└── HudFrame
    ├── PlayerPanel
    │   ├── PlayerNameLabel
    │   └── PlayerIdentifierLabel
    ├── CurrencyPanel
    │   └── CurrencyLabel
    ├── StatusPanel
    │   ├── HealthRow
    │   └── StaminaRow (optional)
    └── Hotbar
        └── HotbarSlot × 1–8

Studio handoff

Check zero, full, and crowded states

A HUD should stay legible when a bar is empty, full, hidden, or paired with the longest slot name. Test those states before connecting live values.

Try health and stamina at 0 and at their maximum.
Hide stamina and confirm the exported StaminaRow is absent.
Use eight slots with long names at mobile width.
Change the selected slot and verify its outline moves.
Keep the currency card compact in the upper-right corner.

STEP 1
Choose the scenario
Load Adventure, Simulator, or Survival to start with a purposeful set of bars, currency, and hotbar slots.
STEP 2
Check the narrow layout
Use the mobile preview with eight slots and long translated names. The hotbar uses equal columns instead of a fixed minimum width.
STEP 3
Copy the visual Luau
Paste the export into a LocalScript under StarterPlayerScripts and inspect the named panels, rows, and slots in Studio.
STEP 4
Connect owned state
Replace example values with data from your game and validate health, stamina, currency, equipment, and input on the appropriate side of the client/server boundary.

Responsive review

Use the HUD shell beside your real game systems

Paste the visual export into a LocalScript, then replace the example values with your own validated state. Keep Humanoid health, stamina rules, currency, item ownership, and hotkey input in the systems that own them.

What the export does not do

The generated file does not read Humanoid values, save player state, award currency, equip tools, process combat, or listen for hotkeys. It is a visual HUD shell with example numbers that your own systems must drive safely.

Client-server security guidance UI size modifiers

Common questions

Roblox HUD GUI FAQ

What is a Roblox HUD?+

A HUD is the always-available interface layer that shows useful in-play status such as player identity, health, stamina, currency, and quick-access slots.

Does this connect to Humanoid health or real inventory data?+

No. The maker exports visual labels, bars, and slots with example values. You connect live health, stamina, currency, ownership, and input through your own validated game systems.

Can I hide stamina and use fewer hotbar slots?+

Yes. Stamina can be turned off and the hotbar can use 1–8 slots. The same choices update the preview and the Luau output.

How is a HUD different from an inventory or main menu?+

A HUD supports actions while the player is already in the game. An inventory is for browsing owned items, while a main menu is for the first navigation decision before play.

Is Game UI Maker affiliated with Roblox?+

No. Game UI Maker is an independent creator tool and is not affiliated with or endorsed by Roblox Corporation.

More Roblox GUI tools and guides

Roblox GUI Use Cases Roblox Shop GUI Maker Roblox Inventory GUI Maker Roblox Main Menu GUI Maker Roblox GUI Maker Guide Roblox ScreenGui export guide Roblox game UI maker Roblox UI ideas Robux to USD calculator

How it runs

No sign-up

Open the maker and start editing. Copying or downloading the Luau export does not need an account.

Works on a phone

The editor runs in a mobile browser and the preview switches to a phone layout, so you can check scaling before you export.

Free while in beta

The generator stays free during the beta. No card, no trial timer.