How to Resize Vertical Bar Correctly?

Hi, I am currently doing a Vertical Stamina Bar But i’ve ran into a problem , the Stamina bar resizes out of the limits, And it’s not intended to do this

The script that resizes the bar :

local function update()
	if humanoid.MoveDirection.Magnitude > 0 and running and not crouching and stamina > 0 then
		humanoid.WalkSpeed = 25

		playAnimation("run")

		regenTime = time()
		stamina -= 0.5
	else
		if not crouching then
			humanoid.WalkSpeed = game.StarterPlayer.CharacterWalkSpeed
			stopAnimation("run")

		else
			stopAnimation("run")

			humanoid.WalkSpeed = 12
		end
		if stamina < maxStamina then
			if (time() - regenTime) > 5 then
				stamina += 0.25
			end
		end
	end
	_G.STAMINA = stamina
end

task.spawn(function()
	while task.wait() do
		update()
	end
end)

runService.RenderStepped:Connect(function()
	--healthBar.Size = healthBar.Size:Lerp(UDim2.fromScale(humanoid.Health / humanoid.MaxHealth,1),0.25)
	--energyBar.Size = energyBar.Size:Lerp(UDim2.fromScale(stamina / maxStamina,1),0.25)
	energyBar.Size =  energyBar.Size:Lerp(UDim2.fromScale(0.89 , stamina / maxStamina),0.25) -- this is it
end)

userInput.InputBegan:Connect(inputBegan)
userInput.InputEnded:Connect(inputEnded)

image

is there any way to resize the bar To not go out of limits?, but also displaying the correct amount of Stamina?, that would be 0 of 100

1 Like

you can use math.clamp(x, minvalue, maxvalue) this way it wont exceed what maxvalue is, or go under minvalue
edit: I did not notice your remoteevent doing this.

1 Like
math.clamp(stamina / maxStamina, 0, 100)

I tried that, but the results still are the same , Also, the RemoteEvent has nothing to do with it, So Yeah

clamp it by 0,1 and not 0,100

1 Like

I tried this, but the bar still it’s very tall

	local currentValue = stamina
	local Formula = math.clamp(currentValue/maxStamina, 0, 1)

	energyBar.Size =  energyBar.Size:Lerp(UDim2.new(1, 0, Formula),0.25)

I tried :

	energyBar.Size =  energyBar.Size:Lerp(UDim2.fromScale(0.89, math.clamp(stamina/maxStamina, 0, 1)),0.25)

Too, but it still doesn’t works (in both happens the same)

In the Explorer, is the moving part of the Stamina bar placed directly into the Frame / ImageLabel that makes up the background image of the Stamina bar? If so, do the boundaries of that background object match up with its visuals (meaning that when you select the background, the outline that appears are at the actual edges of the image / frame) or does the outline extend further than where the visible part of the image / frame stops?

If the outline does not match up with the visual boundaries of the image / frame that the moving part of the Stamina bar was placed into, that is likely to be causing the issue, since a Y Axis Scale value of 1 would be resizing it based on where the outline is rather than where the frame / image visually appears to stop.

As a quick side note, UDim2.fromScale() only requires you to input two numbers; the new X Axis and Y Axis scale, which means that the 0.25 at the end would not be necessary. After running some quick tests in Roblox Studio, I don’t think that extra number would be causing it to be resized to an unintended value, but I wanted to highlight it just in case.

Disregard this; I misread the code! Thanks to @nennocyte for correcting me:

1 Like

The explorer is set up like this :

image

The bars that i am resizing are “Bar” and “BarStam”

1 Like

it seems to be an ui issue then, try manually setting the Y scale to 1 in playtest and see if it goes above the outline

2 Likes

the 0.25 is for the lerp, not the udim…

1 Like

Ohhh, I didn’t realize that; thank you for the correction. I’ll update my post :smile:

1 Like

There you go, the issue is it being set up incorrectly. resize the StaminaBar to match up the height of the health one.

2 Likes

Do you mean in the script '?, like this

	energyBar.Size =  energyBar.Size:Lerp(UDim2.fromScale(0.89, math.clamp(stamina/maxStamina, 0, 0.824)),0.25)

no, resize the StaminaBar in studio.

1 Like

Ah, this is what I had suspected. If you select the StaminaBar image, it is likely that its boundaries extend much further up or down than what it looks like.

In order to account for that difference if you cannot or don’t want to crop the StaminaBar, the Script will need to treat it as if the maximum scale of the Y Axis is 0.819 instead of 1.


In order to do that, you can have the Script multiply Stamina / MaxStamina by 0.819 so it’ll set it to a scale that is proportional to that.

As a result, here is what that line of code from the original post could be revised to:

energyBar.Size = energyBar.Size:Lerp(UDim2.fromScale(0.89 , stamina / maxStamina * 0.819), 0.25)

1 Like

Yeah, Thank you guys, In the end, I putted

	energyBar.Size =  energyBar.Size:Lerp(UDim2.fromScale(0.89, math.clamp(stamina/maxStamina, 0, 0.824)),0.25)

And it finally worked as intended, I really appreciate both of your help, I will mark @nennocyte post As the solution, Because i wouldn’t have noticed if it wasn’t for it, But don’t worry, As i said, thank you both for you help

1 Like

that code will make the stamina display 80 stamina as 100, i recommend either resizing the UI in studio itself (by hand, and not in playtest) to match up the hp bar or trying @StrongBigeMan9 s solution, though it’s kinda tacky and not really the best practice. (would still work obv)

2 Likes

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.