I am trying to create a horizontal progress bar along the z axis, how would I go about this?
3 Likes
In 2D space there’s only X and Y coordinates.
Any progress bar can be accomplished by finding your minimum and maximum variables, dividing the minimum by the maximum to get a decimal representing the percentage completion (should fall in the range [0-1] to be proper) and then changing the scale (first number) on the X or Y axis for a Gui element’s size or position properties.
5 Likes
Kind of confused by this, could you give me an example line of code?
1 Like
Sure thing. Just to go over the principles:
- You need a decimal for completion progress. You get it by dividing the current by the maximum.
- Decimals are best applied to Scale, the first value in each bracket of a UDim2.
local currentLevel = 5
local totalLevels = 30
local progress = currentLevel/totalLevels
-- Fill progress bar across the X axis (horizontally)
someFrame.Size = UDim2.fromScale(progress, 1)
7 Likes
It doesn’t seem to be working.
Script:
local currentLevel = nil
local totalLevels = workspace.EndBar.Position.Z
game.Players.LocalPlayer.Character:WaitForChild("HumanoidRootPart").Changed:Connect(function()
currentLevel = game.Players.LocalPlayer.Character.HumanoidRootPart.Position.Z
local progress = currentLevel/totalLevels
script.Parent.PlayerPosition.Position = UDim2.fromScale(progress, 1)
end)
Explorer:
2 Likes
That was only meant to be an example of what you should be expecting to do when creating progress bars. Please be sure to debug, check your console and try different values to see what fits best. You also need to know what your variables are (what defines the maximum, current progress, so on). Be mindful of axis alignments as well.
2 Likes
I think it is not working since the percentage is not a value between 0 and 1, just divide the percentage by 100, and use the result for the bar size.
1 Like
smallerNumber / biggerNumber will give you a value from 0 - 1.
If you make a UI of any size using scale (scale, offset, scale, offset) and then put a frame inside it.
Set the frame’s position to 0,0,0,0 and the size to 1,0,1,0, you’ll see that the frame is now the exact same size as it’s parent.
Now make the Size 0.5,0,1,0, it’ll be half on the X axis.
So you get the (smallerNumber / biggerNumber) and apply the result (0 - 1) to the X axis of the scale in the UI.
2 Likes
Here’s a place that makes the progress bar grow until the end, click play to see it.
ProgressBar.rbxl (24.2 KB)
4 Likes