Trying to make a progress bar with parts

Help and Feedback Scripting Support
#1

Hey

I’m trying to make a progress bar with parts instead of using the boring old Surface Gui
I’ve been playing around with 2 parts but I can’t seem to find out what math is needed to make it

What math is needed and what do I need to do? Thx

1 Like
#2

You should use tween service. You can set the goal of the tween to the size and position, and change the time the tween takes to reach the goal.

3 Likes
#3

What position and scale do I need to implement for it to look and function like a progress bar?

1 Like
#5

If you would like to make a progress bar with parts, you needs to use Tween Service.

This is what the tween goal would look like:

--
original_part_size = Vector3.new(0.5,0.5,0.5)
original_part_position = Vector3.new(-31, 272.35, -307.05)
final_part_size = Vector3.new(0.5,0.5,30)
--
local tween_goal = {
    Size = Vector3.new(0.5,0.5,final_part_size.Z + original_part_size.Z),
    Position = Vector3.new(original_part_position.X,original_part_position.Y,original_part_position.Z+(final_part_size.Z/2))
}

Note that this will move along the Z-axis.
As a builder, I am not sure if this is the best solution, but I tested it and it works.

3 Likes
#6

It looks like you have a part below the bar (the red thing). You could use that as a reference point instead to tween to certain aspects of that part. Here is an example.

local ProgressHolder = workspace.Part -- the red bar in your case
local ProgressBar = workspace.Part2 -- the green progress bar in your case
local TweenService = game:GetService("TweenService")

local tweenInfo = TweenInfo.new(5, Enum.EasingStyle.Linear, Enum.EasingDirection.In, 0, false, 0)
local Goal = {Position = Vector3.new(ProgressHolder.Position.X, ProgressBar.Position.Y, ProgressBar.Position.Z), Size = ProgressBar.Size + Vector3.new(ProgressHolder.Size.X, 0, 0)}
local T = TweenService:Create(ProgressBar, tweenInfo, Goal)

T:Play()

For the position in the goal, you’ll notice that we’re getting ProgressHolder.Position.X and keeping the other position the same, but you might want to replace that with ProgressBar.Position.X and change the other two depending on the direction of ProgressHolder.

2 Likes
#7

Since you asked for the math. Here’s what you could do without TweenService:

local progressBar = workspace.progressBar -- moving part
local fullBar = workspace.fullBar -- invis part that is the "100% size" of the bar
local function doSizePos(percent) -- percent is a value between 0 and 1 (0% and 100%)
	progressBar.Size = Vector3.new(percent*fullBar.Size.X, fullBar.Size.Y, fullBar.Size.Z)
	progressBar.CFrame = fullBar.CFrame*CFrame.new(fullBar.Size.X*0.5 - progressBar.Size.X*0.5, 0, 0)
end
-- now just set it to whatever percent you need!
doSizePos(10/100) -- 10%
wait(1)
doSizePos(20/100) -- 20%
wait(1)
for i=1,100 do
	doSizePos(i/100)
	wait(0.05)
end

[EDIT]

So the CFrame math here is actually simpler than you probably think.
When you multiply two CFrames together, it will transform the first CFrame by the second CFrame. In this case, it uses the fullBar’s CFrame as a sort of base to go off of. It moves along the base’s X axis by some amount and then on the Y by 0 and Z by 0.
If you didn’t already know, the function CFrame.Angles(xRot, yRot, zRot) is good for rotating a CFrame because it creates a CFrame that is positioned at 0,0,0 but is rotated by xRot, yRot, zRot along the X axis, Y axis, and Z axis, respectively.
Here’s the above code example when I tested it in Roblox studio (except I put the code in the command bar not in the Script).
progressBarMath.rbxm (3.5 KB)

2 Likes
#8

Also if you want to animate it without using TweenService, you should consider using RunService.

2 Likes
#9

I see
Thanks a lot, I heard that tweening with the serverscript will cause performance issues.
Although not very smooth, using the Cframe method seems like a better choice because I’m using the serverscript for the progress bar.