I’ve been wanting to make a dash system similar to ULTRAKILL (I have animations done) however I’ve been stuck on the gui for it.
What I have got stuck on is where I should store the stamina and how should I display it on a gui.
For my stamina gui, I want my stamina to be split into 3 seperate bars. But because it’s across 3 seperate bars, I can’t use a single bar to represent all my stamina so how would I split it?
Well, it looks like the bars amount can mean one dash, or one move ig.
So, each bar can be one frame, you have 3 in total.
You can make a script that depending on the amount subtracted, subtract that amount from the total.
So if 1.5 is subtracted, you completely remove one of the bars, and subtract half of the second one.
If you have 0.5 left, you remove 2, and half the last bar.
Let me know if you dont understand.
Another option might be images, but im really not sure how I can recreate that with ClipsDescendants or canvas groups.
Wait so you mean if I had like 2.7 stamina, for bar 1 and 2 it would be full because it’s over 2 and for the third one, its size percent would be 0.7 because of the decimals number?
Yep,
If you had 2.7 stamina, 2 bars would be full, and the last out be 0.7 of its original size.
To split the bars you can use a UIListLayout, and set the HorizontalFlex to fill. You can also adjust the padding to add spacing between.
If you need help with visually filling the bar, you can use UIGradients with a set transparency to make it essentially cut a frame in half, and then adjust the offset to empty / fill the bar.
local Container = script.Parent local Bar1 = Container.Bar1 local Bar2 = Container.Bar2 local Bar3 = Container.Bar3 local Stamina = 3 local function UpdateUI() --UIGradients start at the center, so you have to remove an initial 0.5 from its offset. --You also subtract 1 from each additional bar so they start filling at different points. Bar1.TransparencyGradient.Offset = Vector2.new(Stamina - 0.5, 0) Bar2.TransparencyGradient.Offset = Vector2.new(Stamina - 1.5, 0) Bar3.TransparencyGradient.Offset = Vector2.new(Stamina - 2.5, 0) end game["Run Service"].RenderStepped:Connect(function() --Animate Stamina value for testing local Sine = (math.sin(tick()) + 1) / 2 Stamina = Sine * 3 UpdateUI() end) Could I get the settings for the bars? Like the Anchor points?
Because it uses a UIListLayout and it’s set to Fill, there isn’t any need for anchor points because the ListLayout automatically positions and scales each frame. The only thing you have to worry about is the container size and position. This is what I have set for Bar 1 - 3.
also, for some reason my bars look like this
You need to set the color of the UIGradient to be solid white (or whatever you want), and set the transparency NumberSequence to what I have in my first reply. The sequence has four points.
Time = 0, Value = 0
Time = 0.499, Value = 0
Time = 0.5, Value = 1
Time = 1, Value = 1
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.
