AutomaticSize for BillboardGUIs

Help and Feedback Scripting Support
, ,
#1

Hello! I’m currently making a Nametag BillboardGUI that would show a player’s username and their TeamColor as a circle right next to it. I placed a UIListLayout to ensure that they occupied the innermost part of the GUI, but the extra spacing on the TextLabel is making it off-centered and strange.

I’ve searched around for multiple solutions: including an offset-to-scale conversion, the use of AutomaticSize and using TextBounds to look for the perfect size for the text. However, none of them have worked; they all stuck to offset and extended the TextLabel instead of sizing it down.

Any help would be appreciated. Thanks!

image
image
(Images represent what’s happening vs. how I want it to look like)

#2

Some things I’ve done were use AutomaticSize, which doesn’t work especially with TextScaled. It caused the text to size up to something like this, which I don’t want.
image

Then, I tried out using a Script to scale the TextLabel using TextBounds, but then again, I’m using TextScaled, so the TextBounds wasn’t working either.

If anyone can help ASAP, it would be greatly appreciated.

#3

In the TextLabel, you can probably use the TextXAlignment (TextLabel | Documentation - Roblox Creator Hub) property to align the text to the left side instead of the center.

#4

I am aware, but I would use it when I figured out how to remove the extra space on the right side.

image

#5

Is there any extra space on the right of the team color dot?

#6

Yes, the Frame that both the TextLabel and the ImageLabel are in have a UIListLayout with a scaled padding.
image

#7

That might be the issue. I don’t think you need the UIListLayout to make this effect, because it’s equalizing the length of the TextLabel and the Color Dot.

And, since the size of the dot never changes, this might be a better solution.

#8

I just tried to remake your effect without using the UIListLayout, and i turned out with this.
image
This uses the same hierarchy as what you are using.
image
I set the BillBoardGui Size to 4, 0, 1, 0
The Size of the ImageLabel is 0.25, 0, 1, 0 (1/4th the size of the total frame)
The size of the TextLabel is 0.7, 0, 1, 0 and the position is 0.3, 0, 0, 0. (I chose these values because it gives a little bit of space between the ImageLabel and the TextLabel.)

#9

This works, but what I’m looking for is something that could also accommodate longer usernames while still being able to look centered with smaller usernames. That is why I’m looking for methods to change the TextLabel size.

Longer usernames get scaled down if the TextLabel size is too short.
image

Shorter usernames would seem off-centered if the TextLabel size is too long.
image

#10

I made it work! …Just with a new problem.

So, I had just read that TextScaled literally just uses the AbsoluteSize.Y to update its size, which worked wonders for figuring out how to scale the text! I was then able to figure out how to use TextService:GetTextBoundsAsync() to get the TextLabel's X scale size using some math, and it’s working!

However, it only works on the server side, and it won’t work on the client side for some reason. I placed the same script into a LocalScript and it seems that it doesn’t want to work at all:

local TextService = game:GetService("TextService")

while true do
	local GetTextBoundsParams = Instance.new("GetTextBoundsParams")
	GetTextBoundsParams.Text = "Ieowyyn"
	GetTextBoundsParams.Font = Font.new("rbxasset://fonts/families/Montserrat.json", Enum.FontWeight.Bold)
	GetTextBoundsParams.Size = script.Parent.TextLabel.AbsoluteSize.Y
	local newSize = TextService:GetTextBoundsAsync(GetTextBoundsParams)

	script.Parent.TextLabel.TextSize = script.Parent.TextLabel.AbsoluteSize.Y
	script.Parent.TextLabel.Size = UDim2.fromScale(newSize.X/script.Parent.AbsoluteSize.X, 1)
	wait(.5)
end

Does anyone know why it isn’t working on the client side? Thanks for the help!

#11

Solved! LocalScripts do not work in the workspace unless in a Character, which I can’t believe I only learned just now.

I fixed this by actually putting it in a player’s head using a ServerScript and thus the LocalScript was able to function:

ServerScript

game.Players.PlayerAdded:Connect(function(player)
	player.CharacterAdded:Connect(function(character)
		local Nametag = script.Nametag:Clone()
		Nametag.Parent = character.Head
		Nametag.Adornee = character.Head
		local TextLabel = Nametag.Frame.TextLabel
	end)
end)

LocalScript

local TextService = game:GetService("TextService")
local Nametag = script.Parent.Parent
local TextLabel = script.Parent.TextLabel

while true do
	local GetTextBoundsParams = Instance.new("GetTextBoundsParams")		
	GetTextBoundsParams.Text = "" -- USERNAME HERE
	GetTextBoundsParams.Font = Font.new("rbxasset://fonts/families/Montserrat.json", Enum.FontWeight.Bold)
	GetTextBoundsParams.Size = TextLabel.AbsoluteSize.Y
	local newSize = TextService:GetTextBoundsAsync(GetTextBoundsParams)		
	TextLabel.TextSize = TextLabel.AbsoluteSize.Y
	TextLabel.Size = UDim2.fromScale(newSize.X/Nametag.Frame.AbsoluteSize.X, 1)
	wait(.5)
end

Will be making edits to ensure that it actually works (this was just a draft) but hooray!

#12

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.