Health bar and stamina bar scale really weirdly

[notsad2 (nots7d)]

i don’t think this requires any explanation

video of the issue:

code:

local tService = game:GetService("TweenService")
local tweenParameters = TweenInfo.new(0.7, Enum.EasingStyle.Sine, Enum.EasingDirection.Out)

local plr = game:GetService("Players").LocalPlayer
local char = plr.Character or plr.CharacterAdded:Wait()
local humanoid = char:WaitForChild("Humanoid")

-- // HUD ELEMENTS
local plrGui = plr.PlayerGui
local screenGui = plrGui:WaitForChild("PlayerHUD")
local main = screenGui:WaitForChild("Main")
local mainHud = main:WaitForChild("HUD")

-- // HEALTH
local healthBar = mainHud:WaitForChild("HealthBar")
local healthAmount = healthBar:WaitForChild("HealthAmount")
local previousHealth = humanoid.Health

-- // STAMINA
local stamina = plr:WaitForChild("Stamina")
local staminaBar = mainHud:WaitForChild("StaminaBar")
local staminaAmount = staminaBar:WaitForChild("StaminaAmount")

-- // CLASS
local classFrame = mainHud:WaitForChild("ClassAbilityFrame")
local classIcon = classFrame:WaitForChild("ClassIcon")
local abilityPercentage = classFrame:WaitForChild("AbilityPercentage")

-- // SOUNDS
local hurtSound = script:WaitForChild("DamageSound")
local lowHealthSound = script:WaitForChild("LowHP")

-- // DAMAGE AND LOW HEALTH FRAMES
local damageTaken = screenGui:WaitForChild("DamageTaken")
local lowHealth = screenGui:WaitForChild("LowHealth")


-- // HEALTH FUNCTION
local function UpdateHealth()
	local text = math.floor(humanoid.Health) .. "/" .. humanoid.MaxHealth -- it's something to do with these 3 variables, but idk
	local healthPercentage = humanoid.Health / humanoid.MaxHealth
	local size = UDim2.new(healthPercentage,0,1,0)
		
	healthAmount.Text = text
	
	local healthBarTween = tService:Create(healthBar, tweenParameters, {Size = size})	
	healthBarTween:Play()
	
	local damageTakenTween = tService:Create(damageTaken, tweenParameters, {BackgroundTransparency = 1})
	local lowHealthTween = tService:Create(lowHealth, tweenParameters, {BackgroundTransparency = 1})
	
	-- // Is health lower than before?
	if humanoid.Health < previousHealth then
		hurtSound:Play()
		
		damageTaken.BackgroundTransparency = 0.7
		damageTakenTween:Play()
	end
	
	-- // Is humanoid health critical?
	if humanoid.Health <= 30 and humanoid.Health > 0 then
		lowHealthSound:Play()
		lowHealth.BackgroundTransparency = 0.7
	else
		lowHealthTween:Play()
	end
	
	previousHealth = humanoid.Health
end

-- // STAMINA FUNCTION
local function UpdateStamina()
	local text = stamina.Value -- also something to do with these 3, idk!!!
	local staminaPercentage = stamina.Value / 100
	local size = UDim2.new(staminaPercentage,0,1,0)
	
	staminaAmount.Text = text
	
	local staminaBarTween = tService:Create(staminaBar, tweenParameters, {Size = size})	
	staminaBarTween:Play()
end

-- // CLASS FUNCTION (TBD)

humanoid:GetPropertyChangedSignal("Health"):Connect(UpdateHealth)
stamina.Changed:Connect(UpdateStamina)

UpdateHealth()
UpdateStamina()

---

Size of the health bar (in explorer): {0, 315},{0, 25}
Size of the stamina bar (also in explorer): {0, 163},{0, 14}

[SolidTurret]

this happens because you’re upscaling your UI to the maximum size of its parent.

local size = UDim2.new(healthPercentage,0,1,0)

this part of the code essentially throws out all the offsets in your UI’s size and instead uses the Scaling system
visually, from:

to:

I recommend you to switching to the scaling system instead of offsets, as offsets are screen size unfriendly. For your solution though:

--outside the functions
local HealthSizeMax = healthBar.Size
local StaminaSizeMax = staminaBar.Size

--in UpdateHealth function
local size = UDim2.new(0,math.clamp(healthPercentage*HealthSizeMax.Y.Offset, 0, HealthSizeMax.Y.Offset),0,HealthSizeMax.X.Offset)

--in UpdateStamina function
local size = UDim2.new(0,math.clamp(staminaPercentage*StaminaSizeMax.Y.Offset, 0, StaminaSizeMax.Y.Offset),0,StaminaSizeMax.X.Offset)

[notsad2 (nots7d)]

this doesn’t seem to do the trick

the bars now scale into tall slender figures:

[SolidTurret]

maybe swap their places?

--in UpdateHealth function
local size = UDim2.new(0,HealthSizeMax.Y.Offset,0,math.clamp(healthPercentage*HealthSizeMax.X.Offset, 0, HealthSizeMax.X.Offset))

--in UpdateStamina function
local size = UDim2.new(0,StaminaSizeMax.Y.Offset,0,math.clamp(staminaPercentage*StaminaSizeMax.X.Offset, 0, StaminaSizeMax.X.Offset))

[notsad2 (nots7d)]

i have good news and bad news

the good news is there are no good news

the bad news is the result didn’t change

[SolidTurret]

oh, sorry I forgot how Udim2 scaling works for a bit, this should do the trick:

--in UpdateHealth function
local size = UDim2.new(0,math.clamp(healthPercentage*HealthSizeMax.X.Offset, 0, HealthSizeMax.X.Offset),0,HealthSizeMax.Y.Offset)

--in UpdateStamina function
local size = UDim2.new(0,math.clamp(staminaPercentage*StaminaSizeMax.X.Offset, 0, StaminaSizeMax.X.Offset),0,StaminaSizeMax.Y.Offset)

[notsad2 (nots7d)]

ooh, does the trick

thanks!!!

(character)