How do I really make a progress bar?

Hello, I want to make a progress bar that represents ‘oxygen’ for a player, and I have tried some tutorials but none of them really make sense to me. Does anybody know how I could create a progress bar?

2 Likes

Simple, you just do the following:

  1. Create a number that is Current Oxygen divided by Max Oxygen
  2. Tween a UIs X Scale or Y Scale to be the number you just made

The script would look something like this:

local Progress = CurrentOxy / MaxOxy
TweenService:Create(UI_Instance, tweeninfo.new(0.2), {Size = UDim2.new(Progress, 0, 1, 0)}):Play()

If you want to have text that displays the current percent of oxygen left, you just multiply the Progress by 100

local Percent = math.floor(Progress*100) -- math.floor ensures we have a rounded number
1 Like

I don’t really understand tweens yet. Couldn’t I just set the size and position?

You could, however, say you add something that removes a large chunk of oxygen, it would be nicer to have it tween instead of it snapping to its new size.
I will explain the tween in my script though, as you only have to change one thing in it for that script to work.

The UI_Instance will be your progress bar, in the tweeninfo, the 0.2 is the time it takes for it to tween, and the table that has Size in it, is well, the size the UI will tween to.

1 Like

Although, this is a health bar, you can customize it as much as you want :slight_smile:

HP.rbxl (41.0 KB)

Since you are doing a Oxygen tank display, you can just take away health from a DIFFERENT humanoid and then display that humanoid’s health as “Oxygen”.

4 Likes

I don’t feel like you should copy the code of somebody mindlessly which he would probably do. When starting I did the same and I had 0 experience and couldn’t do the very easy things. I feel like he should get some experience with tweens and stuff.

2 Likes