Help on creating a stage/progress bar for Race Clicker game

I’m currently making one of those “clicker race” type games, if you are familiar with these games you may know theres this “stage/progress bar” on the bottom of the client’s screen (check the image down below). There is often three of these bars and once the player’s icon is at the end of the bar, it shall move up to the next bar and after passing the end of the 3rd bar, it shall go down to bar1 again if that makes sense.

The player’s image moves based on from where the player’s humanoidrootpart is positioned on the Z axis between two parts.

However I struggle to find a method on how I update the players progress for the whole server and not only for the client.

I’ve tried to find solutions to topics similar to this but ended up not finding any…

Any advice on how I can begin?

Here is what I have so far:

The player’s image only goes to the end of “Bar1”, once it’s positioned at the end on the X axis, Nothing happens and as I mention before, I want to move up the player’s image without moving everyones image yet updating this information to the whole server.

local plr = game.Players.LocalPlayer
local bar1 = script.Parent.Bar1
local bar2 = script.Parent.Bar2
local bar3 = script.Parent.Bar3

game:GetService("RunService").RenderStepped:Connect(function()
	for _, ServerPlayer in pairs(game:GetService("Players"):GetPlayers()) do
		if ServerPlayer then
			if ServerPlayer:FindFirstChild("PlayerGui") then
				for _, x in pairs(ServerPlayer.PlayerGui:WaitForChild("PlayerPosMeter"):GetDescendants()) do
					if x:IsA("ImageLabel") and x.Name == "PlayerImage" then
						x:Destroy()
					end
				end
			end
		end
	end

	for _, ServerPlayer in pairs(game:GetService("Players"):GetPlayers()) do
		if ServerPlayer  then

			local char = ServerPlayer.Character or ServerPlayer.CharacterAdded:Wait()
	
			if char and char:FindFirstChild("HumanoidRootPart") then
				local img = game.ReplicatedStorage.PlayerImage:Clone()
				img.Parent = bar1
				local plrImage = game.Players:GetUserThumbnailAsync(ServerPlayer.UserId, Enum.ThumbnailType.HeadShot, Enum.ThumbnailSize.Size420x420)
				img.Image = plrImage

				local hrp = char:WaitForChild("HumanoidRootPart")

				local totalDistance = (ServerPlayer:FindFirstChild("endval").Value - ServerPlayer:FindFirstChild("StartVal").Value).Magnitude
				local playerDistance = (hrp.Position - ServerPlayer:FindFirstChild("StartVal").Value).Magnitude
				local progressPercent = (playerDistance / totalDistance)  
				img.Position = UDim2.new(progressPercent, 0, img.Position.Y.Scale, 0)
			end
		end
	end
end)

Sorry if my explaination might seem unclear, English is not my main language.

2 Likes

Hey Ik its been a long time but have u figured out how to do this?

Im currently facing the same problem. I found a solution but I would like to know how u made it so I can improve my way of doing it.

Btw mine is an Obby. Thx in advance.