Health Bar Roblox GUI Template with Tweened Damage Feedback

1--[[
2    Health Bar - Client Side
3    A compact health bar with tweened fill, damage flash, and low-health pulse
4    Features: Smooth health transitions, damage feedback, low-health warning, cartoon style
5]]
6
7-- Services
8local Players = game:GetService("Players")
9local TweenService = game:GetService("TweenService")
10local RunService = game:GetService("RunService")
11
12local player = Players.LocalPlayer
13local playerGui = player:WaitForChild("PlayerGui")
14
15-- Constants
16local HEALTH_BAR_WIDTH = 280
17local HEALTH_BAR_HEIGHT = 28
18local HEALTH_CONTAINER_SIZE = UDim2.new(0, 340, 0, 60)
19local HEALTH_CONTAINER_POSITION = UDim2.new(0, 20, 1, -80) -- Bottom-left for mobile
20local LOW_HEALTH_THRESHOLD = 0.25 -- 25% health
21local CRITICAL_HEALTH_THRESHOLD = 0.10 -- 10% health
22local DAMAGE_FLASH_DURATION = 0.3
23local HEAL_FLASH_DURATION = 0.4
24local HEALTH_TWEEN_DURATION = 0.2
25
26-- Colors
27local COLOR_BG = Color3.fromRGB(30, 30, 40)
28local COLOR_BAR_BG = Color3.fromRGB(60, 60, 70)
29local COLOR_HEALTH_HIGH = Color3.fromRGB(50, 220, 80) -- Green
30local COLOR_HEALTH_MID = Color3.fromRGB(255, 200, 30) -- Yellow
31local COLOR_HEALTH_LOW = Color3.fromRGB(255, 60, 50) -- Red
32local COLOR_HEALTH_CRITICAL = Color3.fromRGB(200, 0, 0) -- Dark Red
33local COLOR_TEXT_PRIMARY = Color3.fromRGB(255, 255, 255)
34local COLOR_TEXT_SHADOW = Color3.fromRGB(0, 0, 0)
35local COLOR_DAMAGE = Color3.fromRGB(255, 0, 0)
36local COLOR_HEAL = Color3.fromRGB(50, 255, 100)
37local COLOR_SHIELD = Color3.fromRGB(80, 150, 255)
38
39-- Tween presets
40local tweenInfoHealth = TweenInfo.new(HEALTH_TWEEN_DURATION, Enum.EasingStyle.Quad, Enum.EasingDirection.Out)
41local tweenInfoDamage = TweenInfo.new(DAMAGE_FLASH_DURATION, Enum.EasingStyle.Quad, Enum.EasingDirection.Out)
42local tweenInfoHeal = TweenInfo.new(HEAL_FLASH_DURATION, Enum.EasingStyle.Quad, Enum.EasingDirection.Out)
43local tweenInfoPulse = TweenInfo.new(0.4, Enum.EasingStyle.Sine, Enum.EasingDirection.InOut, -1, true)
44local tweenInfoFloat = TweenInfo.new(1.0, Enum.EasingStyle.Quad, Enum.EasingDirection.Out)
45local tweenInfoScale = TweenInfo.new(0.15, Enum.EasingStyle.Back, Enum.EasingDirection.Out)
46
47-- State
48local currentHealth = 100
49local maxHealth = 100
50local isLowHealth = false
51local isCriticalHealth = false
52local healthConnection = nil
53local shieldAmount = 0
54local maxShield = 0
55
56-- GUI References
57local healthGui, healthContainer, healthBarBg, healthBarFill
58local healthBarOverlay, healthText, heartIcon, damageFlash
59local lowHealthVignette, healEffect, healthChangeBar, damageNumberContainer
60
61-----------------------------------------------------------
62-- Helper Functions
63-----------------------------------------------------------
64
65local function Create(className, props)
66    local instance = Instance.new(className)
67    for key, value in pairs(props or {}) do
68        instance[key] = value
69    end
70    return instance
71end
72
73local function Tween(instance, properties, tweenInfoOverride)
74    local info = tweenInfoOverride or tweenInfoHealth
75    local tween = TweenService:Create(instance, info, properties)
76    tween:Play()
77    return tween
78end
79
80local function GetHealthColor(healthPercent)
81    if healthPercent <= CRITICAL_HEALTH_THRESHOLD then
82        return COLOR_HEALTH_CRITICAL
83    elseif healthPercent <= LOW_HEALTH_THRESHOLD then
84        return COLOR_HEALTH_LOW
85    elseif healthPercent <= 0.6 then
86        -- Interpolate between yellow and red
87        local t = (healthPercent - LOW_HEALTH_THRESHOLD) / (0.6 - LOW_HEALTH_THRESHOLD)
88        return COLOR_HEALTH_LOW:Lerp(COLOR_HEALTH_MID, math.max(0, t))
89    elseif healthPercent <= 0.9 then
90        -- Interpolate between green and yellow
91        local t = (healthPercent - 0.6) / (0.9 - 0.6)
92        return COLOR_HEALTH_MID:Lerp(COLOR_HEALTH_HIGH, math.max(0, t))
93    end
94    return COLOR_HEALTH_HIGH
95end
96
97-----------------------------------------------------------
98-- UI Construction
99-----------------------------------------------------------
100
101local function BuildUI()
102    -- ScreenGui
103    healthGui = Create("ScreenGui", {
104        Name = "HealthBarGui",
105        ResetOnSpawn = false,
106        ZIndexBehavior = Enum.ZIndexBehavior.Sibling,
107        Parent = playerGui,
108    })
109
110    -- Health Container (main holder)
111    healthContainer = Create("Frame", {
112        Name = "HealthContainer",
113        Size = HEALTH_CONTAINER_SIZE,
114        Position = HEALTH_CONTAINER_POSITION,
115        AnchorPoint = Vector2.new(0, 1),
116        BackgroundColor3 = COLOR_BG,
117        BackgroundTransparency = 0.3,
118        BorderSizePixel = 0,
119        ZIndex = 10,
120        Parent = healthGui,
121    })
122
123    Create("UICorner", {
124        CornerRadius = UDim.new(0, 16),
125        Parent = healthContainer,
126    })
127
128    -- Heart Icon
129    heartIcon = Create("ImageLabel", {
130        Name = "HeartIcon",
131        Size = UDim2.new(0, 40, 0, 40),
132        Position = UDim2.new(0, 10, 0.5, 0),
133        AnchorPoint = Vector2.new(0, 0.5),
134        BackgroundColor3 = Color3.fromRGB(255, 80, 80),
135        BackgroundTransparency = 0,
136        BorderSizePixel = 0,
137        Image = "rbxassetid://7072718363", -- Heart icon
138        ImageColor3 = Color3.fromRGB(255, 100, 100),
139        ZIndex = 14,
140        Parent = healthContainer,
141    })
142
143    Create("UICorner", {
144        CornerRadius = UDim.new(1, 0),
145        Parent = heartIcon,
146    })
147
148    -- Health Bar Background
149    healthBarBg = Create("Frame", {
150        Name = "HealthBarBackground",
151        Size = UDim2.new(0, HEALTH_BAR_WIDTH, 0, HEALTH_BAR_HEIGHT),
152        Position = UDim2.new(0, 60, 0.5, -HEALTH_BAR_HEIGHT/2),
153        BackgroundColor3 = COLOR_BAR_BG,
154        BorderSizePixel = 0,
155        ZIndex = 11,
156        Parent = healthContainer,
157    })
158
159    Create("UICorner", {
160        CornerRadius = UDim.new(0, 14),
161        Parent = healthBarBg,
162    })
163
164    -- Health Change Bar (shows delayed damage - "ghost" bar)
165    healthChangeBar = Create("Frame", {
166        Name = "HealthChangeBar",
167        Size = UDim2.new(1, 0, 1, 0),
168        BackgroundColor3 = COLOR_HEALTH_HIGH,
169        BackgroundTransparency = 0.4,
170        BorderSizePixel = 0,
171        ZIndex = 11,
172        Parent = healthBarBg,
173    })
174
175    Create("UICorner", {
176        CornerRadius = UDim.new(0, 14),
177        Parent = healthChangeBar,
178    })
179
180    -- Health Bar Fill
181    healthBarFill = Create("Frame", {
182        Name = "HealthBarFill",
183        Size = UDim2.new(1, 0, 1, 0),
184        BackgroundColor3 = COLOR_HEALTH_HIGH,
185        BorderSizePixel = 0,
186        ZIndex = 12,
187        Parent = healthBarBg,
188    })
189
190    Create("UICorner", {
191        CornerRadius = UDim.new(0, 14),
192        Parent = healthBarFill,
193    })
194
195    -- Gradient for health fill
196    local healthGradient = Create("UIGradient", {
197        Color = ColorSequence.new({
198            ColorSequenceKeypoint.new(0, Color3.fromRGB(255, 255, 255)),
199            ColorSequenceKeypoint.new(0.3, Color3.fromRGB(200, 255, 200)),
200            ColorSequenceKeypoint.new(1, COLOR_HEALTH_HIGH),
201        }),
202        Rotation = 90,
203        Transparency = NumberSequence.new({
204            NumberSequenceKeypoint.new(0, 0.7),
205            NumberSequenceKeypoint.new(0.5, 0.9),
206            NumberSequenceKeypoint.new(1, 0.6),
207        }),
208        Parent = healthBarFill,
209    })
210
211    -- Health Bar Overlay (shine effect)
212    healthBarOverlay = Create("Frame", {
213        Name = "HealthBarOverlay",
214        Size = UDim2.new(1, 0, 0.5, 0),
215        Position = UDim2.new(0, 0, 0, 0),
216        BackgroundColor3 = Color3.fromRGB(255, 255, 255),
217        BackgroundTransparency = 0.8,
218        BorderSizePixel = 0,
219        ZIndex = 13,
220        Parent = healthBarFill,
221    })
222
223    Create("UICorner", {
224        CornerRadius = UDim.new(0, 14),
225        Parent = healthBarOverlay,
226    })
227
228    local overlayGradient = Create("UIGradient", {
229        Color = ColorSequence.new({
230            ColorSequenceKeypoint.new(0, Color3.fromRGB(255, 255, 255)),
231            ColorSequenceKeypoint.new(1, Color3.fromRGB(255, 255, 255)),
232        }),
233        Transparency = NumberSequence.new({
234            NumberSequenceKeypoint.new(0, 0.3),
235            NumberSequenceKeypoint.new(0.5, 0.6),
236            NumberSequenceKeypoint.new(1, 1),
237        }),
238        Parent = healthBarOverlay,
239    })
240
241    -- Health Text
242    healthText = Create("TextLabel", {
243        Name = "HealthText",
244        Size = UDim2.new(0, HEALTH_BAR_WIDTH, 0, HEALTH_BAR_HEIGHT),
245        Position = UDim2.new(0, 60, 0.5, -HEALTH_BAR_HEIGHT/2),
246        BackgroundTransparency = 1,
247        Text = "100 / 100",
248        TextColor3 = COLOR_TEXT_PRIMARY,
249        TextSize = 14,
250        Font = Enum.Font.GothamBold,
251        TextXAlignment = Enum.TextXAlignment.Center,
252        TextYAlignment = Enum.TextYAlignment.Center,
253        TextStrokeColor3 = COLOR_TEXT_SHADOW,
254        TextStrokeTransparency = 0.5,
255        ZIndex = 15,
256        Parent = healthContainer,
257    })
258
259    -- Damage Number Container
260    damageNumberContainer = Create("Frame", {
261        Name = "DamageNumberContainer",
262        Size = UDim2.new(1, 0, 1, 0),
263        Position = UDim2.new(0, 0, 0, 0),
264        BackgroundTransparency = 1,
265        ZIndex = 20,
266        Parent = healthContainer,
267    })
268
269    -- Damage Flash (full screen overlay)
270    damageFlash = Create("Frame", {
271        Name = "DamageFlash",
272        Size = UDim2.new(1, 0, 1, 0),
273        Position = UDim2.new(0, 0, 0, 0),
274        BackgroundColor3 = COLOR_DAMAGE,
275        BackgroundTransparency = 1,
276        BorderSizePixel = 0,
277        Visible = false,
278        ZIndex = 100,
279        Parent = healthGui,
280    })
281
282    -- Low Health Vignette
283    lowHealthVignette = Create("ImageLabel", {
284        Name = "LowHealthVignette",
285        Size = UDim2.new(1, 0, 1, 0),
286        Position = UDim2.new(0, 0, 0, 0),
287        BackgroundTransparency = 1,
288        Image = "rbxassetid://4996891970", -- Vignette texture
289        ImageColor3 = COLOR_DAMAGE,
290        ImageTransparency = 1,
291        ScaleType = Enum.ScaleType.Stretch,
292        Visible = false,
293        ZIndex = 90,
294        Parent = healthGui,
295    })
296
297    -- Heal Effect (green flash)
298    healEffect = Create("Frame", {
299        Name = "HealEffect",
300        Size = UDim2.new(0, HEALTH_BAR_WIDTH + 10, 0, HEALTH_BAR_HEIGHT + 10),
301        Position = UDim2.new(0, 55, 0.5, -(HEALTH_BAR_HEIGHT+10)/2),
302        BackgroundColor3 = COLOR_HEAL,
303        BackgroundTransparency = 1,
304        BorderSizePixel = 0,
305        Visible = false,
306        ZIndex = 16,
307        Parent = healthContainer,
308    })
309
310    Create("UICorner", {
311        CornerRadius = UDim.new(0, 18),
312        Parent = healEffect,
313    })
314end
315
316-----------------------------------------------------------
317-- Floating Damage Numbers
318-----------------------------------------------------------
319
320local function ShowFloatingNumber(amount, isHeal, isCrit)
321    local label = Create("TextLabel", {
322        Name = "DamageNumber",
323        Size = UDim2.new(0, 100, 0, 30),
324        Position = UDim2.new(0, math.random(60, HEALTH_BAR_WIDTH - 40), 0.5, -15),
325        BackgroundTransparency = 1,
326        Text = isHeal and "+" .. amount or "-" .. amount,
327        TextColor3 = isHeal and COLOR_HEAL or (isCrit and COLOR_HEALTH_CRITICAL or COLOR_DAMAGE),
328        TextSize = isCrit and 28 or 20,
329        Font = isCrit and Enum.Font.GothamBlack or Enum.Font.GothamBold,
330        TextXAlignment = Enum.TextXAlignment.Center,
331        TextYAlignment = Enum.TextYAlignment.Center,
332        TextStrokeColor3 = COLOR_TEXT_SHADOW,
333        TextStrokeTransparency = 0.3,
334        ZIndex = 21,
335        Parent = damageNumberContainer,
336    })
337
338    -- Add "CRIT!" text for critical hits
339    if isCrit and not isHeal then
340        label.Text = "-" .. amount .. " CRIT!"
341    end
342
343    -- Float up and fade out animation
344    Tween(label, {
345        Position = label.Position - UDim2.new(0, 0, 0, 60),
346        TextTransparency = 1,
347    }, tweenInfoFloat)
348
349    -- Scale bounce for crits
350    if isCrit then
351        label.Size = UDim2.new(0, 80, 0, 24)
352        Tween(label, {Size = UDim2.new(0, 120, 0, 36)}, tweenInfoScale)
353    end
354
355    -- Cleanup
356    task.delay(1.0, function()
357        if label and label.Parent then
358            label:Destroy()
359        end
360    end)
361end
362
363-----------------------------------------------------------
364-- Health Update Logic
365-----------------------------------------------------------
366
367local lowHealthTween = nil
368local pulseConnection = nil
369
370local function SetLowHealthEffects(enabled)
371    if enabled then
372        -- Show vignette
373        lowHealthVignette.Visible = true
374        Tween(lowHealthVignette, {ImageTransparency = 0.3}, tweenInfoDamage)
375
376        -- Start pulse animation on heart icon
377        heartIcon.BackgroundColor3 = COLOR_HEALTH_LOW
378        lowHealthTween = Tween(heartIcon, {Size = UDim2.new(0, 48, 0, 48)}, tweenInfoPulse)
379
380        -- Start heartbeat effect
381        if pulseConnection then
382            pulseConnection:Disconnect()
383        end
384        local beatCount = 0
385        pulseConnection = RunService.Heartbeat:Connect(function(dt)
386            beatCount = beatCount + dt
387            if beatCount >= 0.8 then
388                beatCount = 0
389                -- Flash vignette
390                Tween(lowHealthVignette, {ImageTransparency = 0.15},
391                    TweenInfo.new(0.15, Enum.EasingStyle.Quad, Enum.EasingDirection.Out))
392                task.delay(0.15, function()
393                    Tween(lowHealthVignette, {ImageTransparency = 0.3},
394                        TweenInfo.new(0.3, Enum.EasingStyle.Quad, Enum.EasingDirection.Out))
395                end)
396
397                -- Shake container slightly
398                local shakeOffset = math.random(-3, 3)
399                Tween(healthContainer, {
400                    Position = HEALTH_CONTAINER_POSITION + UDim2.new(0, shakeOffset, 0, 0)
401                }, TweenInfo.new(0.05, Enum.EasingStyle.Quad))
402                task.delay(0.05, function()
403                    if healthContainer and healthContainer.Parent then
404                        healthContainer.Position = HEALTH_CONTAINER_POSITION
405                    end
406                end)
407            end
408        end)
409    else
410        -- Hide vignette
411        Tween(lowHealthVignette, {ImageTransparency = 1}, tweenInfoDamage)
412        task.delay(DAMAGE_FLASH_DURATION, function()
413            lowHealthVignette.Visible = false
414        end)
415
416        -- Stop pulse
417        if lowHealthTween then
418            lowHealthTween:Cancel()
419            lowHealthTween = nil
420        end
421        Tween(heartIcon, {Size = UDim2.new(0, 40, 0, 40)}, tweenInfoHealth)
422        heartIcon.BackgroundColor3 = Color3.fromRGB(255, 80, 80)
423
424        if pulseConnection then
425            pulseConnection:Disconnect()
426            pulseConnection = nil
427        end
428
429        healthContainer.Position = HEALTH_CONTAINER_POSITION
430    end
431end
432
433local function UpdateHealthDisplay(health, maxHealthValue)
434    maxHealthValue = maxHealthValue or maxHealth
435    local healthPercent = math.clamp(health / maxHealthValue, 0, 1)
436    local previousHealthPercent = currentHealth / maxHealth
437
438    currentHealth = health
439    maxHealth = maxHealthValue
440
441    -- Calculate health change
442    local healthDelta = healthPercent - previousHealthPercent
443    local isTakingDamage = healthDelta < 0
444    local isHealing = healthDelta > 0
445
446    -- Update health text
447    healthText.Text = math.floor(health) .. " / " .. maxHealthValue
448
449    -- Tween health bar fill
450    Tween(healthBarFill, {
451        Size = UDim2.new(healthPercent, 0, 1, 0)
452    }, tweenInfoHealth)
453
454    -- Update health bar color
455    local targetColor = GetHealthColor(healthPercent)
456    Tween(healthBarFill, {
457        BackgroundColor3 = targetColor
458    }, tweenInfoHealth)
459
460    -- Update health change bar (delayed follow)
461    task.delay(0.3, function()
462        Tween(healthChangeBar, {
463            Size = UDim2.new(healthPercent, 0, 1, 0)
464        }, TweenInfo.new(0.5, Enum.EasingStyle.Quad, Enum.EasingDirection.Out))
465    end)
466
467    -- Damage feedback effects
468    if isTakingDamage then
469        local damageAmount = math.abs(math.floor((healthDelta) * maxHealthValue))
470        local isCrit = math.abs(healthDelta) > 0.2 -- 20%+ damage is "critical"
471
472        -- Show floating damage number
473        ShowFloatingNumber(damageAmount, false, isCrit)
474
475        -- Flash the screen red
476        damageFlash.Visible = true
477        damageFlash.BackgroundTransparency = 0
478        Tween(damageFlash, {BackgroundTransparency = 1}, tweenInfoDamage)
479        task.delay(DAMAGE_FLASH_DURATION, function()
480            damageFlash.Visible = false
481        end)
482
483        -- Shake the health bar
484        local shakeIntensity = isCrit and 8 or 4
485        Tween(healthContainer, {
486            Position = HEALTH_CONTAINER_POSITION + UDim2.new(0, shakeIntensity, 0, 0)
487        }, TweenInfo.new(0.05))
488        task.delay(0.05, function()
489            Tween(healthContainer, {
490                Position = HEALTH_CONTAINER_POSITION + UDim2.new(0, -shakeIntensity, 0, 0)
491            }, TweenInfo.new(0.05))
492            task.delay(0.05, function()
493                Tween(healthContainer, {
494                    Position = HEALTH_CONTAINER_POSITION
495                }, TweenInfo.new(0.1))
496            end)
497        end)
498
499        -- Brief white flash on the fill bar
500        healthBarFill.BackgroundColor3 = COLOR_DAMAGE
501        Tween(healthBarFill, {BackgroundColor3 = targetColor}, tweenInfoDamage)
502
503    elseif isHealing then
504        local healAmount = math.floor(healthDelta * maxHealthValue)
505        ShowFloatingNumber(healAmount, true, false)
506
507        -- Green flash effect
508        healEffect.Visible = true
509        healEffect.BackgroundTransparency = 0.3
510        Tween(healEffect, {BackgroundTransparency = 1}, tweenInfoHeal)
511        task.delay(HEAL_FLASH_DURATION, function()
512            healEffect.Visible = false
513        end)
514
515        -- Pulse the heart icon
516        Tween(heartIcon, {Size = UDim2.new(0, 48, 0, 48)}, tweenInfoScale)
517        task.delay(0.15, function()
518            Tween(heartIcon, {Size = UDim2.new(0, 40, 0, 40)}, tweenInfoHealth)
519        end)
520    end
521
522    -- Low health effects
523    local shouldBeLow = healthPercent <= LOW_HEALTH_THRESHOLD
524    local shouldBeCritical = healthPercent <= CRITICAL_HEALTH_THRESHOLD
525
526    if shouldBeLow and not isLowHealth then
527        isLowHealth = true
528        SetLowHealthEffects(true)
529    elseif not shouldBeLow and isLowHealth then
530        isLowHealth = false
531        SetLowHealthEffects(false)
532    end
533
534    isCriticalHealth = shouldBeCritical
535
536    -- Critical health - more intense effects
537    if isCriticalHealth then
538        -- Make vignette pulse faster
539        heartIcon.BackgroundColor3 = COLOR_HEALTH_CRITICAL
540    end
541
542    -- Scale container based on health percentage (subtle size change)
543    local scalePercent = 0.95 + (healthPercent * 0.1) -- 95% to 105%
544    local targetWidth = HEALTH_CONTAINER_SIZE.X.Offset * scalePercent
545    Tween(healthContainer, {
546        Size = UDim2.new(0, targetWidth, 0, HEALTH_CONTAINER_SIZE.Y.Offset)
547    }, TweenInfo.new(0.3, Enum.EasingStyle.Quad, Enum.EasingDirection.Out))
548end
549
550-----------------------------------------------------------
551-- Humanoid Connection
552-----------------------------------------------------------
553
554local currentHumanoid = nil
555
556local function ConnectHumanoid(humanoid)
557    if currentHumanoid == humanoid then return end
558
559    -- Disconnect previous
560    if healthConnection then
561        healthConnection:Disconnect()
562        healthConnection = nil
563    end
564
565    currentHumanoid = humanoid
566    maxHealth = humanoid.MaxHealth
567    currentHealth = humanoid.Health
568
569    -- Initialize display
570    UpdateHealthDisplay(currentHealth, maxHealth)
571
572    -- Connect to health changes
573    healthConnection = humanoid.HealthChanged:Connect(function(newHealth)
574        UpdateHealthDisplay(newHealth, humanoid.MaxHealth)
575    end)
576
577    -- Also listen for max health changes
578    humanoid:GetPropertyChangedSignal("MaxHealth"):Connect(function()
579        UpdateHealthDisplay(humanoid.Health, humanoid.MaxHealth)
580    end)
581end
582
583local function OnCharacterAdded(character)
584    local humanoid = character:WaitForChild("Humanoid", 10)
585    if humanoid then
586        ConnectHumanoid(humanoid)
587    end
588end
589
590local function OnCharacterRemoving()
591    if healthConnection then
592        healthConnection:Disconnect()
593        healthConnection = nil
594    end
595    currentHumanoid = nil
596end
597
598-----------------------------------------------------------
599-- Initialization
600-----------------------------------------------------------
601
602local function Initialize()
603    BuildUI()
604
605    -- Connect to character events
606    player.CharacterAdded:Connect(OnCharacterAdded)
607    player.CharacterRemoving:Connect(OnCharacterRemoving)
608
609    -- If character already exists
610    if player.Character then
611        OnCharacterAdded(player.Character)
612    end
613
614    print("[HealthBar] Health Bar initialized.")
615end
616
617Initialize()