How to make overhead UI with HP rank group name and device

Hello Im kozak and in this tutorial I will show you how to make overhead UI with rank, group player name HP and device

:warning:Disclaimer :warning:
This is my first scripting tutorial

Creating UI

1.Make BilboardUI
https://gyazo.com/470052ec375fd86df5fcd6027a950bca
Im not good ui designer sorry.
2. Inser Local script. It will control player HP

local plr = game.Players.LocalPlayer
local humanoid = plr.Character.Humanoid
local label = script.Parent
local healthcontrol = script.Parent.Parent.Frame
humanoid.HealthChanged:Connect(function(health)
	label.Text = health/humanoid.MaxHealth.." HP"
	local healthChange = humanoid.Health/humanoid.MaxHealth
	healthcontrol:TweenSize(UDim2.new(healthChange,0,1,0),"In","Linear",1)
end)
  1. Create script in ServerScriptService and put BilboardUi there
LocalScript
  1. Create Remote event in Rep storage and name it “Device” and remove event “Manygroups”

  2. Create LocalScript in StarterGui or StarterPlayerScripts or StarterCharacterScripts

local ismobile = game:GetService('UserInputService').TouchEnabled
local isconsole = game:GetService('UserInputService').GamepadEnabled
local isdesktop = game:GetService('UserInputService').KeyboardEnabled
local plr = game.Players.LocalPlayer
if ismobile == true then
	game.ReplicatedStorage.Device:FireServer("mobile")
elseif isconsole == true then
	game.ReplicatedStorage.Device:FireServer("console")
elseif isdesktop == true then
	game.ReplicatedStorage.Device:FireServer("PC")
end
local char = plr.Character
char.Humanoid.NameDisplayDistance = 0
char.Humanoid.HealthDisplayType = "AlwaysOff"

It will detect device and send to server

ServerScript
  1. Open script you created before. Make groups table
local groups = {
	"9829784";
	"9829761"
}
  1. When Client send info about player device scripts first check is player in group. if yes change text or rank and group
game.ReplicatedStorage.Device.OnServerEvent:Connect(function(plr,device)
	local clone = script.BillboardGui:Clone()
         local x = 0 
        local newTable = {}
	for i,v in pairs(groups) do
		if plr:IsInGroup(v) then
			local group = game:GetService("GroupService"):GetGroupInfoAsync(v)
			clone.Group.Text = group.Name
                        table.insert(newTable,group.Name)
			clone.Rank.Text = plr:GetRoleInGroup(v)
		end
	end
  1. Next step is changing playername text
	clone.Player.Text = plr.Name

4 Then we need to change device Image. We will use info from client but you need to force player use touch or keyboard or controller

	if device == "mobile" then
		clone.Device.Image = "http://www.roblox.com/asset/?id=10279564582"-- custom image
	elseif device == "console" then
		clone.Device.Image = "http://www.roblox.com/asset/?id=10279565406"-- custom image
	elseif device == "PC" then
		clone.Device.Image = "http://www.roblox.com/asset/?id=10279561717" -- custom image 
	end
	clone.Parent = plr.Character
end)
  1. If Player is in multiple groups fire event
if x > 1 then
		game.ReplicatedStorage.Manygroups:FireClient(plr,newTable)
	end
Many Groups UI
  1. Create UI
  2. Create local script(child of ScreenGui)
local plr = game.Players.LocalPlayer
game.ReplicatedStorage.Manygroups.OnClientEvent:Connect(function(tabl)
	script.Parent.Enabled = true
	print("table")
	for i,v in pairs(tabl) do
		local clone = script.TextButton:Clone()
		clone.Name = v
		clone.Text = v
		clone.Parent = script.Parent.Frame
		
	end
end)

when server fire event client will create buttons
3. Create local script inside of Texbutton

script.Parent.MouseButton1Click:Connect(function()
	local plr = game.Players.LocalPlayer	
	plr.Character.BillboardGui.Group.Text = script.Parent.Text
	script.Parent.Parent.Parent:Destroy()
end)

Finished UI video
Gyazo
Thats all here is also model of GUI

I hope it will help you

10 Likes

mashallah very gud tutarial. Me like very much yes yes

1 Like

Good work bro, keep up the good work!

1 Like

thanks
(30message limit)dsadasdasdas

good ui i like it, nice
will try to use this

1 Like

Some people just want to see the finished product before they use it

So I propose a video or pictures to see it in action

I like your tutorial btw

1 Like

thanks for feedback
(300000letterss
das
dasdas)

1 Like