Method to create white chat bubbles

It’d be super useful to be able to create chat bubbles when making custom chat GUIs.

I find that chat bubbles allow for a spatial awareness so you can see very specifically who is chatting without having to match up names with characters from a distance.

You can make this yourself using a BillboardGui and a 9-slice frame. What are you asking for, in specific?

Billboard GUI— damn, ninja’d

This is a feature request for an official method to make chat bubbles- not a thread asking how. Sure you can do that- but wouldn’t you want an official way to do it and save yourself a ton of work?

@OP, you can do something like this with ChatService’s Chat method

Unfortunately, I haven’t found a way to perfectly mimic the way ROBLOX does their bubbles with billboard GUIs. They scale a bit differently based on distance.

@Usering Those chat bubbles are a bit different than the ones used by ROBLOX. There’s no option for “White” here:

Seems a bit redundant, don’t you think? It’s not a lot of work.

I know they are, but it’s a work-a-round for now.

This CoreScript might be of interest to you. I don’t know if it is in use yet but it is (or will be) the CoreScript that creates BubbleChat.

3 Likes

Somehow I completely missed that! Thank you.

For some reason this method is locked and that script uses it. Any ideas?

Try this?

I tried that myself, doesn’t work too great (by itself, that is). There’s cases where it will cut off the text too early using that method.

(Demonstrated here)


I have this here ugly function for it, that’s part of my UI library I use for Heroes’ Legacy.

local utilGui = Instance.new("ScreenGui", playerGui);
utilGui.Name = "GuiUtilHelper"; 
local textSizeHelper = Instance.new("Frame", utilGui);
textSizeHelper.BackgroundTransparency = 1;
textSizeHelper.Size = UDim2.new(1, 0, 1, 0);
textSizeHelper.Position = UDim2.new(-2, 0, 0, 0);
textSizeHelper.Name = "GetTextSize";

function module:GetTextSize(text, fontSize, fontFamily, bounds)
	bounds = bounds or Vector2.new(1000, 1000);	
	
	local test = Instance.new("TextLabel", textSizeHelper);
	test.Size = UDim2.new(0, bounds.X, 0, bounds.Y);
	test.Text = text;
	test.Font = fontFamily;
	test.FontSize = fontSize;
	test.TextWrapped = true;
	
	local bounds = test.TextBounds;
	
	test:Destroy();
	return bounds;
end

I’ve tested it out with the chat core script, simply replace
TextService:GetTextSize(bubbleText.Text, CHAT_BUBBLE_FONT_SIZE_INT, CHAT_BUBBLE_FONT, Vector2.new(BILLBOARD_MAX_WIDTH, BILLBOARD_MAX_HEIGHT))
with
theModule:GetTextSize(bubbleText.Text, CHAT_BUBBLE_FONT_SIZE, CHAT_BUBBLE_FONT, Vector2.new(BILLBOARD_MAX_WIDTH, BILLBOARD_MAX_HEIGHT));

I don’t know why GetTextSize is locked, but yeah. Unfortunately we have to use work-arounds like this.

2 Likes

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