Need help with a stats UI

Hello! I’ve always struggled with UI’s and I need help trying to figure this one out. I don’t know what’s wrong with it, if you could help it would be great. Here’s my code.

local Player = game.Players.LocalPlayer

local UI = script.Parent.magic
local Character = Player.Character or Player.CharacterAdded:Wait()
local currentMagic = Character:WaitForChild("Humanoid"):WaitForChild("CharacterValues"):WaitForChild("Energy")

local function mapToRange(t, a, b, c, d)
	return c + ((d-c)/(b-a)) * (t-a)
end

local TW = game:GetService("TweenService")--Get Tween Service

local Player = game:GetService("Players").LocalPlayer --Get The Player
local Humanoid = Character:WaitForChild("Humanoid") --Get The Player Humanoid

local healthbar = script.Parent.health -- Get The Health Bar

local function tween(Obj, Property)
	game:GetService("TweenService"):Create(Obj, TweenInfo.new(.2), Property):Play()
end

task.spawn(function()
	while true do
		wait()
		pcall(function()
			--HealthText.Text = Character.Humanoid.Health
			tween(healthbar,{Size = UDim2.new(Character.Humanoid.Health/Character.Humanoid.MaxHealth, 0, 0.516, 0)})
			if Humanoid.Health == Humanoid.MaxHealth then
				tween(healthbar,{Size = UDim2.new(0.436, 0, 0.516, 0)})
			end
		end)
		pcall(function()
		--	EnergyText.Text = Character.Humanoid.CharacterValues.Energy.Value
			game:GetService("TweenService"):Create(UI,TweenInfo.new(.2),{Size = UDim2.new(currentMagic.Value/currentMagic.Parent:FindFirstChild("MaxEnergy").Value,0,0.482,0)}):Play()
			if currentMagic.Value == currentMagic.Parent:FindFirstChild("MaxEnergy").Value then
				game:GetService("TweenService"):Create(UI,TweenInfo.new(.2),{Size = UDim2.new(0.436,0,0.482,0)}):Play()
			end
		end)
	end
end)

What are you struggling with?

Yeah you didn’t actually say what’s wrong with the ui

The ui goes out of proportion…

I think it’s an anchor point problem. Try changing to anchor point (1, 0.5) or something

From what I can tell, it seems like you are trying to tween the health bars to ‘go down’ as your health decreases and your problem is you can still see the entire bar (correct me if I am wrong), to fix this just turn on, I believe it is called ‘clipping’, in your health bar’s parent’s properties.

It’s called ClipsDescendants, but I don’t think that’s the correct solution here. If you look at the video carefully, you can see that the bar not only changes size, but also shifts position for some reason.

Unfortunately, you cannot do -1 anchor point on a frame

Oh crap I’m so dumb… sorry I meant 1 not -1. I forgot the left side is 0…

After you have divided health and maxhealth, you need to multiply by the length of the bar.