HUD

Roblox Health Bar GUI

Health, mana and XP bars with a coin counter

🪙 12,450

A player HUD with a green health bar, a blue mana bar, and a thinner XP bar — each a pill background with a fill you drive from game state — plus a coin counter. Drop it into a ScreenGui and update the fills from your Roblox Studio scripts.

This template is built entirely from native Roblox instances and is fully editable. Open it in the editor to change colors, text, sizes and layout, then export the result as clean Luau — paste it into a LocalScript inside a ScreenGui and it works as-is.

How to build this

Static GUIs feel flat. TweenService interpolates properties like Position, Size and transparency over time, so a menu can slide in, a button can pop, and a notification can fade. This guide covers the three patterns behind almost every animated Roblox UI.

1. Slide a panel into place

Start the panel off-screen, then tween its Position to the final spot. TweenInfo controls duration and easing.

2. Fade and pop with Size

Tween Size from small to full and BackgroundTransparency from 1 to 0 for a pop-in effect. Multiple properties can go in one tween.

Read the full How to Animate Roblox GUIs with TweenService guide →

How to Make a Responsive Roblox GUI

Make a Roblox GUI that looks right on phone, tablet and desktop: size with Scale not Offset, center with AnchorPoint, cap text with UITextSizeConstraint, and shrink whole sections with UIScale.

More templates

Main Menu

Shop

Settings