HUD

How to Make a Roblox Quest Tracker HUD

A quest tracker is a small panel pinned to a corner of the screen that shows the active objective and a progress bar that fills as the player makes progress. It stays visible during gameplay, so it has to be compact. This guide builds the HUD, a smooth progress bar, and a toggle to expand and collapse the details.

Open the Quest Tracker template →

1. A compact corner panel

Anchor the panel to a corner with AnchorPoint and a scale Position so it sits tight against the edge on every screen size. A TextLabel holds the objective, a nested Frame pair (background + fill) is the progress bar.

local panel = Instance.new("Frame")
panel.AnchorPoint = Vector2.new(1, 0)
panel.Position = UDim2.fromScale(0.97, 0.06)
panel.Size = UDim2.fromScale(0.3, 0.16)
panel.Parent = gui

2. A progress bar that tweens

The bar is a background Frame with a child fill Frame. To update progress, tween the fill's Size on the X scale from its current value to the new ratio — TweenService makes it glide instead of jumping.

local TweenService = game:GetService("TweenService")

local function setProgress(fill, current, goal)
	local ratio = math.clamp(current / goal, 0, 1)
	local info = TweenInfo.new(0.3, Enum.EasingStyle.Quad)
	TweenService:Create(fill, info, { Size = UDim2.fromScale(ratio, 1) }):Play()
end

Tip: Keep the HUD small and out of the gameplay area. Anchor to a corner and use scale sizing so it lands the same on phone and desktop.

3. Update from game events and collapse details

Drive setProgress from your game's events (item collected, enemy defeated) so the bar moves live. Add a toggle button that shows and hides a details panel using a show/hide action — the editor generates that Luau for you, and you can animate it with a scale transition.

FAQ

How do I make the progress bar fill smoothly?

Use TweenService:Create on the fill Frame's Size, from its current X scale to the new ratio. A 0.3-second Quad ease looks responsive without being jittery.

How do I know when a quest is complete?

When progress reaches the goal, fire a BindableEvent (server-side) or check client-side, then grant the reward, mark the quest done, and hide or recolor the tracker.