BillboardGui Health Bars for NPCs and Players
Overhead health bars that float above characters use BillboardGui. Create a BillboardGui and parent it to the character's Head. Set StudsOffset to Vector3.new(0, 2.5, 0) to position it above the head. Set Size to UDim2.new(4, 0, 0.4, 0) for a bar that is 4 studs wide and 0.4 studs tall. Set AlwaysOnTop to false so the bar hides behind walls, or true if you want it always visible. Inside the BillboardGui, add a background Frame (dark gray or black), a fill Frame inside it (green, yellow, or red depending on health percentage), and optionally a TextLabel showing the numeric health value. Set the fill Frame's Size.X.Scale to currentHealth / maxHealth to represent the current percentage. Use UICorner on both frames for rounded ends. Set MaxDistance on the BillboardGui to 50-80 studs so the bar disappears at long range and does not clutter the screen.
- BillboardGui parented to character Head with StudsOffset (0, 2.5, 0)
- Background Frame: dark color, full width
- Fill Frame: colored, width = currentHealth / maxHealth
- UICorner on both frames for rounded bar style
- MaxDistance of 50-80 studs to hide at long range
ScreenGui Health Bar for the Player HUD
The player's own health bar belongs in a ScreenGui as part of the HUD, not as a BillboardGui above their head. Position it in the bottom-left or top-left corner of the screen. Use a Frame container with AnchorPoint set to (0, 1) and Position at UDim2.new(0.02, 0, 0.97, 0) for a bottom-left placement. Inside, nest the background and fill frames just like the BillboardGui version. Add a TextLabel showing "HP: 85/100" or just the numeric values. For style, add a UIGradient to the fill bar with a subtle color transition (bright to slightly darker) for depth. Add a UIStroke to the background frame for a clean border. Use UISizeConstraint to set a minimum and maximum pixel width so the bar stays readable on small screens and does not become absurdly large on ultrawide monitors.
Animating Health Changes with TweenService
Snapping the health bar instantly to the new value feels jarring and makes it hard to read how much damage was taken. Use TweenService to animate the fill bar's width over 0.3 seconds with EasingStyle.Quad and EasingDirection.Out. For extra polish, add a "damage trail" bar — a second fill frame in a lighter or redder color that sits behind the main fill. When damage is taken, the main fill tweens to the new value immediately (0.3 seconds), while the trail bar waits 0.4 seconds and then tweens to match over 0.5 seconds. This creates the effect seen in games like Dark Souls and Elden Ring where you can see exactly how much damage was just dealt. For healing, reverse the visual — the main fill tweens up, and you can add a brief green flash on the bar.
- Main fill: TweenService with 0.3s Quad EasingOut to new health percentage
- Damage trail: delayed 0.4s, then tweens to match over 0.5s in a lighter/red color
- Healing: tween fill up with a brief green flash overlay
- Cancel any active tweens before starting new ones to prevent visual conflicts
Boss Health Bars
Boss health bars deserve special treatment. Place them at the top or bottom center of the screen, spanning 60-80% of the screen width. Use a ScreenGui with a high DisplayOrder so it renders above other UI. Include the boss name in a TextLabel centered above the bar. Add phase markers as thin white lines on the bar at the phase transition thresholds (e.g., at 60% and 30%). When a phase transition occurs, flash the health bar briefly and update the bar's color or gradient to signal the new phase. Some games add a segmented style where the health bar has visible notches every 10% to help players gauge remaining health. For multi-phase bosses, consider showing a small icon or number below the bar indicating the current phase. Hide the boss bar when the player is out of combat or the boss enters a cinematic transition state.
Floating Damage Numbers
Damage numbers provide instant feedback on every hit. When damage is dealt, create a BillboardGui at the victim's position with a TextLabel showing the damage value. Tween the BillboardGui's StudsOffset upward by 3-4 studs over 0.8 seconds while fading the TextLabel's TextTransparency from 0 to 1. Destroy the BillboardGui after the tween completes. Color-code the numbers: white for normal damage, yellow for critical hits (larger font size too), green for healing, gray for blocked/reduced damage. For critical hits, add a brief scale-up animation (start at 150% size and tween down to 100%) for visual emphasis. Pool and reuse BillboardGui objects if you have many enemies taking rapid damage to avoid creating hundreds of instances per second. Keep the font bold and the text outline thick for readability against any background.
Responsive Design for All Devices
Roblox runs on phones, tablets, desktops, and consoles — your health bars must work on all of them. Use Scale values (not Offset) for positioning and sizing so the UI scales with screen resolution. Set UISizeConstraint with MinSize to ensure the bar never shrinks below a readable size on small phone screens. Use UIAspectRatioConstraint on the bar container to maintain proportions across aspect ratios. Test on mobile by using Studio's Device Emulator (View tab > Device). The HUD health bar should never overlap with Roblox's core UI (chat, leaderboard, backpack) — account for the safe zone insets on mobile where system UI overlaps. Keep overhead BillboardGui bars simple (no text, just the fill bar) at a size that is visible but not overwhelming when multiple enemies are on screen.