How can I make a player length bar?

In the first place, you should use “for _, v in pairs(Players:GetChildren())” to get all players on the current server, also adding which stage they are at. Then, use TweenService to move players by studs/stage.

can you help me how to do it, i couldn’t show the 2nd player somehow

I did something like this in my game:

& Works across more then one user as expected:

I had a set up like this:

Screenshot (2327)

Where each Part had a number value, With the value Starting at 1, and ending at how many I liked (Each part had a unique whole number value)

Below is the more complex explaining:

Gui Set up

Screenshot (2329)
This was My Gui Set up, where the Local script existed. I have a frame called example player, where the image of the player would go, and the current Checkpoint it was at. This value was used to preform math, where I did CurrentCheckPoint / MaxCheckPoint to move it left and right.

Server Side Set up
  1. I used a .Touched Event on the server.

  2. When Fired, I tracked on the server which Check point number it was. If it was lower or the same, It did nothing. IF it was higher, I changed the server value to the higher one, (A table with everyones name, with a number value of which the number of checkpoint they had reached).

  3. Then I used a remote Event and did :FireAllClients And gave the clients the player’s name, their current checkpoint number, and the max check point number

Local Side Set up
  1. I listened until the remote event from the server has been fired

  2. I check if a frame for the players Name exists already. If not, I make one. If so, I change the number Value inside the fame to track the check point number the client is in, to the new one.

  3. Then preformed some math, where I took Current Check point / Max check point , Over the X. Then tweened this new position to give it that visual effect, and then was all done!

Feel free to ask any questions and Hoped this helps!

1 Like

I’m working on the 1st si Height bar
2. He needs to see other players in the height bar
3. It should be like in Height bar tower off hell game.
4. I only know how to show myself but I couldn’t show it to the players

  1. In the system I showed you I used a remote event to share everyone’s data that way. When someone touched a part on the server, it shared that persons name, and what part they touched. Because this was on the server, it works with multiplayer; because I don’t care who touched it, because it still sends the data.

  2. If you wish you wanted a height bar (like in Tower of Hell) you would want to change the Y axis instead of the X, just a simple fix, but that is what would happen instead of the X.

  3. Are you using Remote events? Care to share your script? Is it all in a local script?

1 Like

Hey, there is a much easier method!

So what you can actually do is just normalize the value that the player is currently at between the two points you want, and then used that normalized value to position the players headshot thumbnail on the bar using scale

If you dont know what normilization is it’s when you transform a numerial value into a certain range for example [0-1]

For your use-case I’m guessing you have two points, a starting point and an ending point, and of course where your player is currently positioned. I’m going to use dummy values but you get the idea

function normalizePosition(currentPos, startPos, endPos)
   local direction = (endPos - startPos).unit
   local displacement = currentPos - startPos
   local distanceStartToEnd = (endPos - startPos).magnitude
   local normalizedValue = displacement:Dot(direction) / distanceStartToEnd
   return math.clamp(normalizedValue, 0, 1)
end

local currentPlayerPosition = Vector3.new(0, 50, 0)
local startingPoint = Vector3.new(0, 1, 0)
local endingPoint = Vector3.new(0, 100, 0)

In the first function we are getting the direction of the end position to the start position and then normalizing that value and then we get the displacent of our players current position minus the start position, then we calculate the distanceStartToEnd by getting the magnitude of the end position and start position, then finally we get our normalized value by taking the dot product of the displacement using the direction and then dividing that by our distanceStartToEnd and we return a clamped value so it doesnt go out of bounds when we set the thumbnails position later

After that I define some dummy values for the currentPlayerPosition, starting point and the endpoint

Now we can just get our normalized position by calling the normalizePosition function and setting it to a variable

local normalizedPosition = normalizePosition(currentPlayerPosition, startingPoint, endingPoint)
print(normalizedPosition) -- .494949

It would print pretty much .5 because if you look at the three Vectors have, just to make it easy I only put values in the Y for each vector so it would be more noticably clear that if you take 50 / 100 you will get .5 which is our currentPosition and endingPosition respectively

Now with our normalized value we can set the position of our avatar headshot thumbnail to that value and it will show us the accurate distance from our positions in the 3D space, but make sure to use scale on the bar and also the thumbnail!

1 Like

I didn’t use remote events, they are all in local script, do I need to write scripts for server script service or just use local script event, I would appreciate if you could show me an example script, in the pictures below there is the end position in the player gui and workspace

1

You don’t have to, it just makes it more safe; such as exploits as it has to be fired from the server to client. But again is not necessary.

The issues live in the local script, can I see what you currently have?

My script is spread over many scripts which is why I can’t really share an example from that, but I can make up something from what you already have and use that, as an example. Because it looks like you currently have a system in place, unless that is meant for something else.

1 Like

If you did everything correctly, it should look someting like this, you could also easily make this vertical aswell

For vertically I pretty much change reverse the starting and end positions so that when your at the starting position your at the lowest point and at the end position would be the highest point

1 Like

When there are 2 people in the game, will 2 sides appear in the bar?

Well I only showed you the base of how the system would work which is arguably the hard part, it shouldnt be too hard too add more player though

Id imagine you would just generate a certain amount of ImageLabels depending on the number of players and then have there positions be default 0 and then use some sort of remove event to update it on all clients using something like FireAllClients() and youd pass like the players position

This is the script I made, but 2 . It does not see a player, what do I need to add or change.

player image
it looks dull when i copy it all the time.

It doesn’t work when there are 2 people in the game.

local players = game:GetService("Players")
local player = players.LocalPlayer
local playerGui = player:FindFirstChild("PlayerGui")
---------------------------------------------------
--local startpos = game.Workspace.StartPos
--local endpos = game.Workspace.EndPos

---------------------------------------------------
local thumbType = Enum.ThumbnailType.HeadShot
local thumbSize = Enum.ThumbnailSize.Size48x48
-------------------------------------------
local playerimg = script.plrimg
local image = playerimg:Clone()
image.Parent = script.Parent
image.Image = players:GetUserThumbnailAsync(player.userId, thumbType, thumbSize)
-------------------------------

if player:FindFirstChild("PlayerGui") then
	while wait() do
		
		local char = game:GetService("Workspace")[player.Name]
		local hrp = char:FindFirstChild("HumanoidRootPart")
		local height = math.ceil(hrp.Position.Y)
		image.Position = UDim2.new(-1.6, 0,0.868 - height/60,0)
	end
end

The second person doesn’t show up in the Height bar so I changed the script.
being able to see the 2nd person in question in the Height bar

local players = game:GetService("Players")
local player = players.LocalPlayer
local playerGui = player:FindFirstChild("PlayerGui")
---------------------------------------------------
local thumbType = Enum.ThumbnailType.HeadShot
local thumbSize = Enum.ThumbnailSize.Size48x48
-------------------------------------------
local playerimg = script.plrimg
-------------------------------

game:GetService("RunService").RenderStepped:Connect(function()
	for _i,v in pairs(player:GetChildren()) do
		local image = playerimg:Clone()
		image.Parent = script.Parent
		image.Image = players:GetUserThumbnailAsync(v.userId, thumbType, thumbSize)

		local char = game:GetService("Workspace")[v.Name]
		local hrp = char:FindFirstChild("HumanoidRootPart")
		local height = math.ceil(hrp.Position.Y)
	end
end)

I DO NOT recommend assigning a name to index if you’re not using it; this can cause memory leaks, therefore, a bad practice.

This is a mistake that many programmers commit. Instead, leave it just an underscore, in other words, a dash (_).

Also, if you’re trying to get all players, do players:GetPlayers() inside of pairs().

  1. I’ve updated my script like this now, I’d appreciate it if you check it out.

  2. My script doesn’t work when I go up, what is your suggestion?

  3. I guess right now it’s only taking certain names, I’ll test it.

4.I tested and the player image of player 1 and 2 does not appear?

local players = game:GetService("Players")
local player = players.LocalPlayer
local playerGui = player:FindFirstChild("PlayerGui")
---------------------------------------------------
local thumbType = Enum.ThumbnailType.HeadShot
local thumbSize = Enum.ThumbnailSize.Size48x48
-------------------------------------------
local playerimg = script.plrimg
-------------------------------

game:GetService("RunService").RenderStepped:Connect(function()
	for _,v in pairs(players:GetPlayers()) do
		local image = playerimg:Clone()
		if not playerGui.Height.Frame:FindFirstChild(v.Name) then
			
			image.Parent = script.Parent
			image.Name = v.Name
			print("Oyuncu isimleri",v.Name)
			image.Image = players:GetUserThumbnailAsync(v.userId, thumbType, thumbSize)
			local hrp = v.Character:FindFirstChild("HumanoidRootPart")
			local height = math.ceil(hrp.Position.Y)
			
		elseif playerGui.Height.Frame:FindFirstChild(v.Name) then
			
			image.Image = players:GetUserThumbnailAsync(v.userId, thumbType, thumbSize)
			local hrp = v.Character:FindFirstChild("HumanoidRootPart")
			local height = math.ceil(hrp.Position.Y)
			
		else
			
			image.Parent = script.Parent
			image.Name = v.Name
			print("Oyuncu isimleri",v.Name)
			image.Image = players:GetUserThumbnailAsync(v.userId, thumbType, thumbSize)
			local hrp = v.Character:FindFirstChild("HumanoidRootPart")
			local height = math.ceil(hrp.Position.Y)
		end
	end
end)
---------------------------------------------------------------

3

Dude so take it step by step

#1. Create all the ImageLabels for the players
#2. Position them at 0
#3. In a loop get their Y positions and do math to get a normalized value
#4. Set the Position Y Scale to that value

how can i do it? can you give an example or fix the scriptp?

Hold on, I am going to get the one I made previously working with multiple players just give me a moment, ill send you the code and also how the explorer looks so you can copy it over

Alright, I have finished this accounts for pretty much everything except players leaving

Youd have to change the startPart and endParts to your parts in your game

Tested this on my phone and computer, here is the video

local player = game.Players.LocalPlayer
local Bar = player.PlayerGui:WaitForChild("UI").Bar

local startPart = game.Workspace.S
local endPart = game.Workspace.E

function normalizePosition(currentPos, startPos, endPos)
   local direction = (endPos - startPos).unit
   local displacement = currentPos - startPos
   local distanceStartToEnd = (endPos - startPos).magnitude
   local normalizedValue = displacement:Dot(direction) / distanceStartToEnd
   return math.clamp(normalizedValue, 0, 1)
end

local thumbType = Enum.ThumbnailType.HeadShot
local thumbSize = Enum.ThumbnailSize.Size420x420

local function CreateTemplate(p)
   local templates = Bar.Template
   local template : ImageLabel = templates.Image:Clone()
   local content, isReady = game.Players:GetUserThumbnailAsync(p.UserId, thumbType, thumbSize)
   template.Image = content
   template.Visible = true
   template.Name = tostring(p.UserId)
   template.Parent = Bar
end

for _, player in ipairs(game.Players:GetChildren()) do
   CreateTemplate(player)
end

game.Players.PlayerAdded:Connect(function(player)
   local templates = Bar.Template
   local template : ImageLabel = templates.Image:Clone()
   local content, isReady = game.Players:GetUserThumbnailAsync(player.UserId, thumbType, thumbSize)
   template.Image = content
   template.Visible = true
   template.Name = tostring(player.UserId)
   template.Parent = Bar
end)

game:GetService("RunService").Heartbeat:Connect(function(deltaTime)
   for _, player in ipairs(game.Players:GetChildren()) do
      local character = player.Character
      local humrp = character:FindFirstChild("HumanoidRootPart")

      local currentPosition = humrp.Position
      local startPosition = startPart.Position
      local endPosition = endPart.Position

      local normalizedValue = normalizePosition(currentPosition, endPosition, startPosition)

      Bar[tostring(player.UserId)].Position = UDim2.new(.488,0,normalizedValue,0)
   end
end)
2 Likes

If the player thumbnail appears in single-player inside studio, but not when testing with multiple players locally in studio, then the reason it’s not working is probably that player thumbnails don’t appear when you’re testing locally in studio. Try publishing the test place and getting a friend to test it with you.