How to make a Verticular Breathing Bar

  • What I Want To Achieve
    So I am Trying to make a breathing bar.
    But its Verticular. So what i want to achieve is, when
    I click G the frame tween size and its “y axis” size changes.

See the video for a better understanding of what i want to achieve

  • What i Have tried so far
    Well I am not very aquainted with TweenSize() so um yah, I tried watching tutorials but they have a
    Horizontal Breathing Bar
    so I achieved like when I click g a function gets connected.

  • What are the issues
    i just need help with the breathing regen and the TweenSize()
    and connecting the breathing bar with the breathing value

Breathing Bar Video Representation

Thanks,
The Spikey Man

1 Like

pls help someone bro ()charrrr

Normalize the breathing value from 0 - 1, so when its 1 itlll be fully covered, when its 0 the bar will be empty

UI elements use UDim2 values for their size, which look something like this:
(x scale, x pixels, y scale, y pixels)
This means that the size value, UDim2.new(1, 0, 1, 0) would make the bar completely fill its frame.

To make the bar actually represent your “breath value”, you would need to set its size to something like this:
UDim2.new(1, 0, breath / maxBreath, 0)
This would make the Y scale the ratio of the current breath stored compared to the maximum possible amount: the bar will be full if you have max breaths and empty if you have 0.

Also I saw you were setting the scale as a negative value, set the anchor point of the bar to (0, 1) so it scales from the bottom of the frame.

1 Like

just one last thing though how would i use the tween size?

I personally wouldn’t use tweensize() because from what I recall it does not allow you to overwrite a previous tween that isn’t finished. This could lead to issues if the bar is updated too quickly.

I’d use tweenservice.
Your code would look loosely like this:

local ts = game:GetService("TweenService")
local maxBreath = 10
local currentBreath = maxBreath

local bar = script.Parent.Bar

function UpdateBar()
	local tween = ts:Create(bar, TweenInfo.new(tweenlength, Enum.EasingStyle.Cubic, Enum.EasingDirection.Out), {Size = UDim2.new(1, 0, currentBreath / maxBreath, 0)})
	tween:Play()
end

-- call UpdateBar when G is pressed

I just woke up, imma try using ur code in the game, thanks in advance (if it works that is)

hello, so i added it into my code and this is how it looks

i didnt run it, because as u can see the tween length is an unknown global.

Pls help

Add local before the function UpdateBar() , then run the game.

um okay? but what about tween length?

That is the amount of time it takes for the tween to finish in seconds, replace it with a value like 0.5, or 1

hmm so i did as u said
heres the code

while UIS:IsKeyDown(MyKey) do wait()
		
			local player = game.Players.LocalPlayer
			local char = player.Character
			local bar = char:FindFirstChild("BreathUi").Frame.Bar

			local ts = game:GetService("TweenService")
			local maxBreath = char:FindFirstChild("Humanoid").MaxBreathing.Value
			local currentBreath = char:FindFirstChild("Humanoid").Breathing
			local regenValue = 10

			local function UpdateBar()
					
				local tween = ts:Create(bar, TweenInfo.new(0.5, Enum.EasingStyle.Cubic, Enum.EasingDirection.Out), {Size = UDim2.new(1, 0, currentBreath.Value / maxBreath, 0)})
				tween:Play()
				
				currentBreath.Value = currentBreath.Value + regenValue
				
			end

			UpdateBar()
			
		end

so basically when i click the button down and when i stop clicking button down the bar still goes up until the specified amount of time which is the tweenlength ends, also the bar goes up very fast

pls help me bro (charrrrrrrrrr)

Are you trying to make the breath increase when G is pressed?

yes i am trying to make the breath increase when the g button is pressed

so um basically i did it, it was very hard and i went through a lot of error solving, so basically the other guy’s code should have technically worked if i had added wait, i think. but heres the code that worked for me.

while UIS:IsKeyDown(MyKey) do wait()
			
			if Isthere == true then
				local plr = game.Players.LocalPlayer
				local char = plr.Character
				local curbreath = char:FindFirstChild("Humanoid").GameValues.Breathing
				local maxbreath = char:FindFirstChild("Humanoid").GameValues.MaxBreathing
				if curbreath.Value < maxbreath.Value then
					local bar = char:FindFirstChild("BreathUi").Frame.Bar
					local hum = char:WaitForChild("Humanoid")
					local Fer = char:FindFirstChild("BreathUi").Frame.Bar

					local regenValue = 10
					if curbreath == 95 then -- This gets rid of breathing value surpasing the max breathing
						regenValue = 5
					end

					curbreath.Value = curbreath.Value + regenValue

					local change = curbreath.Value/(maxbreath.Value)
					Fer:TweenSize(UDim2.new(1,0,change,0), "In", "Linear", 0.35)

					regenValue = 10
					wait(1)
				end
			end

but thanks to everyone who helped me :slight_smile:

Please mark the reply which helped you the most, or your reply as the solution so other members can see it as solved problem.

ok i marked the reply which helped me the most

1 Like

though i just took the code from another tutorial so um yah.

1 Like

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