Health bar tweening not working (UICorner specific)

[GreenTreeGamingYT (SubscribeToGreenTree)]

Hello everyone!

This may be a common problem for many people. Let me explain.

I have a health bar that has a hierarchy like this:

I have set the UICorners to (0.5, 0) for both frames. To make the health bar work, I have used this code:

local tweenService = game:GetService("TweenService")

local invisBar = script.Parent.InvisBar
local backgroundBar = invisBar.BackgroundBar
local healthBar = backgroundBar.HealthBar

local player = game.Players.LocalPlayer

repeat
	wait()
until player.Character.Humanoid

local function updateUI()
	local currentHealth = player.Character.Humanoid.Health
	local maxHealth = player.Character.Humanoid.MaxHealth
	
	local tween = tweenService:Create(healthBar, TweenInfo.new(0.35, Enum.EasingStyle.Sine, Enum.EasingDirection.Out, 0, false, 0), { Size = UDim2.new(currentHealth / maxHealth, 0, 1, 0) })
	tween:Play()
end

player.Character.Humanoid:GetPropertyChangedSignal("Health"):Connect(updateUI)
player.Character.Humanoid:GetPropertyChangedSignal("MaxHealth"):Connect(updateUI)

This is all good, but watch what happens when we set the player’s health to 1 (or another small number):

We get a very weird clipping effect! I know we can solve this with ClipDescendants, but I don’t know how to use it!

I have seen many reports on this issue on the dev forum, but many are problem-specific (only concerning their code and work style), not a general fix!

Do you guys know how to solve this issue? If so, please get back to me!

Thanks!

• GreenTree Gaming

[Synarx (syn)]

Yeah, I had this issue. I fixed it by changing the parent of the inner health bar to a CanvasFrame.

[realmile (mile)]

You can avoid that by using UIGradient to make a health bar. The way I usually do it is by creating another frame:

The hp frame has its transparency set to 1 and has ClipsDescendants turned on. Instead of changing its size you would move hp frame backwards and fill frame forwards like this:

hp is set to {-0.95,0,0,0} and fill is set to {0.95,0,0,0}. You would just need to make another tween and have them tween the position instead of size.

[GreenTreeGamingYT (SubscribeToGreenTree)]

Thank you everyone for your responses!

I followed @Synarx’s response as it was quick and simple to follow.
@realmile Your way can work but I didn’t want to do it as it is a very weak exploit

Thank you again!