Roblox HUD GUI Tutorial: Health, Coins, and Minimap (2026)

HUD layout: corners, Scale, and low clutter

A HUD goes in the corners so it does not block the action. Health bottom-left, coins top-right, minimap top-left is the standard layout. Each element uses Scale-based sizing anchored to its corner with AnchorPoint, so it stays in place on any screen size. Keep each HUD cluster small (under 200x80 logical pixels) so the viewport stays clear. The worst HUD mistake is filling the screen with UI - the player cannot see the game anymore.

Health bar with Tween and HealthChanged

The health bar is the heart of the HUD. Bind it to the player's Humanoid with Humanoid.HealthChanged, so it updates automatically when the player takes damage or heals. Animate the fill with TweenService so the bar drains smoothly instead of snapping. Below 25% health, pulse the bar red to warn the player. The fill is a Frame inside the bar container, sized by health ratio (health / maxHealth) along the X axis.

1-- Roblox HUD - Client Script
2-- Place in: StarterGui (LocalScript)
3
4local Players = game:GetService("Players")
5local TweenService = game:GetService("TweenService")
6
7local player = Players.LocalPlayer
8local gui = script.Parent
9local healthBar = gui:WaitForChild("HealthBar")
10local fill = healthBar:WaitForChild("Fill")
11local coinLabel = gui:WaitForChild("CoinLabel")
12
13local humanoid = player.Character and player.Character:WaitForChild("Humanoid")
14
15local function updateHealth(current, max)
16	local ratio = math.clamp(current / max, 0, 1)
17	TweenService:Create(
18		fill,
19		TweenInfo.new(0.2, Enum.EasingStyle.Quad, Enum.EasingDirection.Out),
20		{ Size = UDim2.new(ratio, 0, 1, 0) }
21	):Play()
22	-- Low-health warning
23	if ratio < 0.25 then
24		fill.BackgroundColor3 = Color3.fromRGB(255, 60, 60)
25	else
26		fill.BackgroundColor3 = Color3.fromRGB(80, 200, 120)
27	end
28end
29
30if humanoid then
31	updateHealth(humanoid.Health, humanoid.MaxHealth)
32	humanoid.HealthChanged:Connect(function(newHealth)
33		updateHealth(newHealth, humanoid.MaxHealth)
34	end)
35end

Coin counter with live updates

The coin counter shows the player's currency. Bind it to your currency value (usually in leaderstats) with a Changed connection so it updates instantly when the player earns or spends. Format the number with commas for readability (1,234 not 1234), and use a monospace or semi-condensed font so wide numbers do not shift the layout. When the count changes, a quick scale-up Tween on the label confirms the gain without blocking the game.

Minimap placeholder

A minimap shows the game world from above. A full minimap with camera projection is advanced, but you can start with a placeholder: a Frame in the top-left corner with a UICorner and a dot for the player's position. As you build out the game, replace the placeholder with a ViewportFrame that renders the world from a top-down camera. The placeholder keeps the HUD layout complete while you develop the real minimap.

Mobile-safe HUD

Over half your players are on phones, so the HUD must fit a 375px screen. Use Scale-based sizing for every element, keep clusters small, and avoid the top notch and bottom home bar areas. Test on the editor's mobile preview: if the health bar overlaps the thumb zone or the coin label runs off-screen, shrink the Scale values. A HUD that blocks the touch input on mobile makes the game unplayable.

Frequently asked questions