Ui that follows the clients character

Hello,

So, I’m trying to create a Ui element that follows the player and I’m really not sure how I should start this our or how this would work on Roblox, here are some examples that show what I’m talking about in these videos:

Source: https://twitter.com/emoflowerr

Source: https://www.youtube.com/channel/UCQcZYEOmUZ06NFIcRhbvN6w
Max Stamina! • The Legend of Zelda: Breath of the Wild (Master Mode) • Part 74 • BotW - YouTube

Source: https://www.youtube.com/channel/UCyAfZFsT8_zmljUiro9bQcQ
How long can you run for with a SINGLE FULL STAMINA BAR? Genshin Impact Max Stamina - YouTube

Thank you,
frames

6 Likes

You can use billboards, they are basically 3d gui, so you put one in the humanoidrootpart or where you want it to appear, add in a health bar, and code it.

If you want it to be a health bar, then do this in a localscript.

script.Parent.HumanoidRootPart.BillboardGui.Enabled = true

while wait() do
    local h = script.Parent.Humanoid
    script.Parent.HumanoidRootPart.BillboardGui.Bar.Health.Size = UDim2.new(1, 0, h.Health / h.MaxHealth, 0)
end
2 Likes

Through the video, I see that they probably used Camera: WorldToScreenPoint to get the 2D position, then create a gui using that position. But it was what i thought, maybe they used a billboard gui.

local camera = workspace.CurrentCamera
local worldPoint = Vector3.new(0, 10, 0)
local vector, onScreen = camera:WorldToScreenPoint(worldPoint)
 
local screenPoint = Vector2.new(vector.X, vector.Y)
1 Like
local camera = workspace.Camera
local player = game.Players.LocalPlayer
local frame = script.Parent
local character = player.Character or player.CharacterAdded:Wait()
local hrp = character:WaitForChild("HumanoidRootPart")
local rs = game:GetService("RunService")
local ts = game:GetService("TweenService")

rs.RenderStepped:Connect(function()
	local hrp2D, onScreen = camera:WorldToScreenPoint(hrp.Position)
	local tween = ts:Create(frame, TweenInfo.new(0.25), {Position = UDim2.new(-frame.Size.X.Scale/2, hrp2D.X - frame.Size.X.Offset/2, -frame.Size.Y.Scale/2, hrp2D.Y - frame.Size.Y.Offset/2)})
	tween:Play()
end)

You can do it like this with a ScreenGui, or you can parent a BillboardGui to the player’s head/avatar and it’ll automatically follow. The script I provided just makes a frame follow the player’s character.

1 Like

I used Attachments + Billboard GUIs!

1 Like