HealthBar Damage Visual Clumping

[knifecat35 (Cathy)]

I am making a HealthBar, with a damage visual. But I want it to where when you take quick damage in a certain amount of time.
It wont look like this:

Instead, it will clump together in 1 big bar. The code looks like this

local function UpdateHp(gui, humanoid)
	local HealthDisplay = gui.HealthFrame
	local Fill = HealthDisplay.HealthVisual :: Frame
	local life = humanoid.Health / humanoid.MaxHealth
	local color = nil
	life = math.clamp(life, 0, 1)
	
	local FillTween = TweenService:Create(
		Fill, 
		TWEEN_INFO, 
		{
			Size = UDim2.fromScale(life, 1), 
			BackgroundColor3 = Color3.fromHSV(life/3, 1, 1)
		}
	)
	
	FillTween:Play()
	
	if LastHealth > life then -- Checks if they actually look damage
		local tempframe = Fill:Clone()
		tempframe.ZIndex = -1
		tempframe.BackgroundColor3 = WHITE
		tempframe.BorderSizePixel = 0
		tempframe.Name = "DamageVisualTemporary"
		tempframe.Parent = HealthDisplay
		task.delay(0.25, function()
			local Tween = TweenService:Create(
				tempframe,
				TweenInfo.new(0.35, Enum.EasingStyle.Linear, Enum.EasingDirection.In, 0, false, 1),
				{
					Size = UDim2.fromScale(life, 1),
				}
			)
			Tween:Play()
			Tween.Completed:Once(function()
				tempframe.BackgroundTransparency = 1
				Debris:AddItem(tempframe, 0.25)
			end)

		end)

	end


	HealthDisplay.HealthNumber.Text = string.format(
		"%i / %i", 
		math.ceil(humanoid.Health), 
		math.ceil(humanoid.MaxHealth)
	)
	LastHealth = life
end


function SetHealthBar(humanoid, root)
	local player = Players:GetPlayerFromCharacter(humanoid.Parent)
	local Base = BaseGui:Clone()
	local HealthDisplay = Base.HealthFrame
	local TextName = Base.NameFrame.PlayerName
	local DisplayName = player.DisplayName
	Base.Adornee = root
	Base.Parent = root
	TextName.Name = DisplayName
	TextName.TextColor3 = player.TeamColor.Color
	TextName.Text = DisplayName

	local function updatethisone()
		UpdateHp(Base, humanoid)
	end

	local tc1 = humanoid:GetPropertyChangedSignal("Health"):Connect(updatethisone)
	local tc2 = humanoid:GetPropertyChangedSignal("MaxHealth"):Connect(updatethisone)
	local tc3 = humanoid:GetPropertyChangedSignal("DisplayName"):Connect(function()
		TextName.Text = DisplayName
	end)
	local tc4 = player:GetPropertyChangedSignal("TeamColor"):Connect(function(TeamColor)
		TextName.TextColor3 = TeamColor.Color
	end)

	humanoid.Died:Connect(function()
		if tc1 then tc1:Disconnect() end
		if tc2 then tc2:Disconnect() end
		if tc3 then tc3:Disconnect() end
		if tc4 then tc4:Disconnect() end
		updatethisone()
	end)
	humanoid.HealthDisplayType = Enum.HumanoidHealthDisplayType.AlwaysOff
	humanoid.DisplayDistanceType = Enum.HumanoidDisplayDistanceType.None
	updatethisone()
end

If I could get even a starter on how I’d begin to do this, It would be appreciative!

[tlr22 (FusionOak)]

I can’t quite understand exactly how you want this to behave. I get the general idea, but I see like 6 different potential behaviors. Can you explain exactly the intent for the health bars echo. When it should start catching up to the health bar, how fast it moves, and expected behavior for when damage is taken mid-transition? I can’t seem to come to these conclusions by analyzing your code. Or do I misunderstand entirely and the problem is with the colored health bar portion?

[knifecat35 (Cathy)]

Right now, it makes a new temp visual that will shrink to the health when the function is called. Instead I want it to turn not into alot of bars but be able to clump into 1 bar. Or just delay the damage bar until damage is finished being taken/ hasn’t taken damage after like 0.7 seconds or so

[knifecat35 (Cathy)]

Like how it looks when you take alot of damage in 1 time

[astraIboy (The Batman)]

So if im understanding correctly, you want all those mini bars in the first gif to turn into one bar?

they way you explained it is just super confusing and im not sure what you mean by clumping

[tlr22 (FusionOak)]

local DAMAGE_INTERMISSION_BEFORE_ECHO = 0.7

local lastDamageTime = 0
local function damageWasTaken(dmg)
    lastDamageTime = tick()
    local thisDamageTime = lastDamageTime
    task.delay(DAMAGE_INTERMISSION_BEFORE_ECHO, function()
        if lastDamageTime == thisDamageTime then
            finalizePlayerDamage() --this gets called after your specified delay if no further damage was recieved
        end
    end)
end

That code above will call the function finalizePlayerDamage() when it stops taking damage for enough time.

So finalizePlayerDamage() should be what creates and plays the tween which should solve your issues.

You will of course need to make sure that echo stays at the highest point of health you have got before the animation plays at which point it can be reset.

Ohh. I forgot to note that you should only ever create one echo frame. Whether that’s part of the gui itself that you’re just updating or if you clone it in, there should only ever be one.

[knifecat35 (Cathy)]

yes, I apologize for using the word clumping I did not mean to confuse.

[knifecat35 (Cathy)]

I’ll try this soon, as I am busy with other things atm. I will switchout tick() with os.clock()

[knifecat35 (Cathy)]

Now that I am taking it into consideration, the thing I am wanting to do is way to complicated and niche and isn’t very nesscary because it looks just fine on its own.