How can I make a name tag with a device icon beside it?

hey, as u already read from the title, how would I achieve a name tag with a device icon beside it? I’ve took some inspo from 3008, the scp roblox game

this is how it would look ingame

although I’ve tried using TextService:GetTextBoundsAsync() to get the length of the text and offset it by that, I don’t know how I would translate it to this

if anyone has any solutions, please help me out! thanks :slight_smile:

3 Likes

You need to create your own BillboardGui and device icons first.

You then need to detect the player’s device. You can use a RemoteFunction or RemoteEvent. I’ll use a RemoteFunction for this.

--CLIENT:
local uis = game:GetService("UserInputService")

local device = "Mobile"
if uis.TouchEnabled and not uis.KeyboardEnabled then
    device = "Mobile"
elseif uis.GamepadEnabled and not uis.TouchEnabled and not uis.KeyboardEnabled then
    device = "Console"
else
    device = "PC"
end

RemoteFunction.OnClientInvoke = function()
    return device
end
--SERVER:
local players = game:GetService("Players")

local devices = {
    ["PC"] = "image id here",
    ["Mobile"] = "image id here",
    ["Console"] = "image id here"
}

local function addHeadGui(player:Player)
    local char = player.Character or player.CharacterAdded:Wait()
    local head = char:WaitForChild("Head")
    local hum = char:WaitForChild("Humanoid")

    --set display distance type
    hum.DisplayDistanceType = Enum.HumanoidDisplayDistanceType.None

    --clone the GUI
    local clonedGui = GUI:Clone() --GUI is your custom-made head display
    clonedGui.NameLabel.Text = player.DisplayName --set name (example)
    local device = RemoteFunction:InvokeClient(player)
    
    clonedGui.DeviceImage.Image = devices[device] --set the device icon (example)
    clonedGui.Parent = head
end

players.PlayerAdded:Connect(addHeadGui)
3 Likes

actually I should have made my goal more clear, but I didn’t know I needed this lol

my original goal was to have the device icon be offset depending on how long your name was, that was the issue I was having the most trouble with :angst:

There might be some property scaling you could do with the label and image.

The only other thing I can think of is using Unicode characters in the text, but idk if there are symbols for platforms. Emojis might work, too.

To get the client’s device you can just use the devicetype Enum in some sort of way to see the client’s device.

Players overhead gui should be in client side only you know x)
Also, your method is only detecting which type of control the player is using, the player can be a on a PC and play with a controller of with a tactile screen… which is not that bad but you need to add a change detection in case the player is changing its control type during the game.

honestly I might consider adding that, but what are the chances they are gonna change input mid game? it’s somewhat irrelavent rn, but thanks for the idea!

Yeah, it was just a basic device checking system. What do you mean “Players overhead gui should be in client side”?

If you mean the player should not be able to see their own GUI, you could just set the PlayerToHideFrom property.

  1. Do your BillboardGui using a UiGridLayout to keep the main frame at the center.
  2. Put the text and the image into the frame and add a UiAspectRatioConstraint into the image so it keep its shape.
  3. When setting up the gui, check the text lengh of the TextLabel, and resize the CellSize of the grid layout depending of it.

Nah, i mean you should setup and update all players character gui from your local script ^^ as it is only a visual thing… at least it is what we are supposed to do in normal time but i didn’t though about how to detect other player input, so nevermind your method is fine.

that seems pretty straightforward, but won’t the cellsize for the grid layout change for the image’s cell as well?

I don’t think setting it up in a LocalScript is a good idea, only you would be able to see it (I tried it with mine).

Maybe updating it, though, but as long as you’ve got methods to prevent things like memory leaks server-side (from connections) you should be good.

Yep, that’s why you should add a AspectRatioConstrain ^^

ohhh alright I’ll try that for now, i’ll keep you updated if it works :))

I think you didn’t understood what i meant, i’m talking about handling all players character from your local script… you see all character gui from your point of view and other players see all character gui from their point of view too, it is the same result as doing it server side but it doesn’t use the server for a non-important thing.

Yeah, but I was thinking more along the line of the client’s memory. Updating it would probably take quite a lot of memory on the client (the iterations, connections, etc.) and it’s a bit of a pain if you are trying to minimise memory usage. I guess either one would work, though.

Oh okay i see, but i don’t think having one CharacterAdded connection for each player would be that much heavy for the client memory, at least i guess ^^

1 Like

Sorry, for some reason I was thinking some kind of stats would be displayed on the thing (idk why, it might be more efficient that way or might not)… my bad :sweat_smile:

2 Likes

You can also set the image to offset size and the text to scale size, so the image isn’t affected when the frame size change by the GridLayout

I’ve made it on a baseplate if you want to test and use it ^^
Billboard Scaling.rbxl (52.5 KB)