The Big Bubble Chat Rework

BubbleChatV2
The default in-game bubble chat has seen very few updates over the years and we think it’s time to give it a facelift!

We’re bringing a completely reworked bubble chat, featuring:

  • Brand new visuals, powered by Roact
  • Animated transitions, to make it feel more alive
  • Many customization option, including:
    • Bubbles duration
    • Max amount of bubbles above a single character
    • Bubbles background color
    • Distance at which the bubbles are minimized/hidden
    • Many more, see the full list below
    • More coming soon!

Enable the API!

Enable it through new property BubbleChatEnabled in the Chat service (game.Chat):
image

Or through a (client-side) script:

local chat = game:GetService("Chat")
chat.BubbleChatEnabled = true

Customize the Looks!

BubbleChatCustomizationV2
Customize various aspects using the new function SetBubbleChatSettings in the Chat service.

It takes a dictionary of settings as the only arguments. The supported settings and their default values are as follows (more are coming):

local settings = {
 -- The amount of time, in seconds, to wait before a bubble fades out.
 BubbleDuration = 15,

 -- The amount of messages to be displayed, before old ones disappear
 -- immediately when a new message comes in.
 MaxBubbles = 3,

 -- Styling for the bubbles. These settings will change various visual aspects.
 BackgroundColor3 = Color3.fromRGB(250, 250, 250),
 TextColor3 = Color3.fromRGB(57, 59, 61),
 TextSize = 16,
 Font = Enum.Font.GothamSemibold,
 Transparency = .1,
 CornerRadius = UDim.new(0, 12),
 TailVisible = true,
 Padding = 8, -- in pixels
 MaxWidth = 300, --in pixels

 -- Extra space between the head and the billboard (useful if you want to
 -- leave some space for other character billboard UIs)
 VerticalStudsOffset = 0,

 -- Space in pixels between two bubbles
 BubblesSpacing = 6,

 -- The distance (from the camera) that bubbles turn into a single bubble
 -- with ellipses (...) to indicate chatter.
 MinimizeDistance = 40,
 -- The max distance (from the camera) that bubbles are shown at
 MaxDistance = 100,
}
pcall(function()
    game:GetService("Chat"):SetBubbleChatSettings(settings)
end)

Omitting keys from that list will result in them having default values, as seen above. For example, running this:

local chat = game:GetService("Chat")
pcall(function()
    chat:SetBubbleChatSettings({
        BubbleDuration = 20,
        MaxBubbles = 5,
    })
end)

Will result in only the BubbleDuration and MaxBubble settings being changed, every other settings will have the default value.

But what about the old Bubble Chat?

It is still available! To preserve backwards compatibility there are no plans to remove it yet.

If you have both the new and old bubble chat enabled, the old one will automatically disable itself to prevent overlaps between the two.

Warning!

Before using this, be aware that this feature has not rolled out to all users yet. Especially people playing on older mobile versions (about 20% of mobile users). Those people will not be able to see the new bubble chat even if you enable it in your game. We expect to reach 100% adoption in about two weeks.

To prevent issues with this, it is suggested to use keep the old bubble chat enabled if it already was (it will automatically disable itself if the new one is available and enabled) and to wrap calls to Chat:SetBubbleChatSettings in a pcall.

Please note that this is an early release. We wanted to put this feature into your hands as soon as possible, but should you run into any issue please let us know in this thread. We’ll be closely monitoring it for your feedback.

511 Likes

This topic was automatically opened after 14 minutes.

I appreciate the love and attention the bubble chat is being given.

Since bubble chat is being given attention, are there plans to revamp the chat UI itself and possibly give us api to easily configure it like you guys have done with the bubble chat? For consistency with the bubble chat updates, and the chat ui also needs a revamp, been the same for about 5 years lol

:+1:

90 Likes

Many customization option, including:

  • Bubbles duration
  • Max amount of bubbles above a single character
  • Bubbles background color
  • Distance at which the bubbles are minimized/hidden
  • Many more, see the full list below
  • More coming soon!

This is epic! I was always disheartened by how rigid the old chat system was, particularly for Bubble Chat. Glad to have some clarity about how exactly the new bubble chat works.

Enable it through new property BubbleChatEnabled in the Chat service (game.Chat):
image

Thank you so much for adding a visual toggle! It has been a while since this was available, with developers manually having to script Bubble Chat into their game before.

Before using this, be aware that this feature has not rolled out to all users yet. Especially people playing on older mobile versions (about 20% of mobile users). Those people will not be able to see the new bubble chat even if you enable it in your game. We expect to reach 100% adoption in about two weeks.

So does this mean that people will see the old chat instead or no chat at all? I can’t wait to enable this, but I don’t want to end up making chat invisible for part of my player base!

Also, glad to see that the grey line has been removed! I assume that this release means that the beta went well! Perhaps this topic should be locked now?

24 Likes

It would be nice to have a way to give a certain user the bubble chat settings (for example one person will have a gold chat bubble but everyone else will have a default one). Other then that the customize settings are okay.

30 Likes

Another update once again, and this time it’s the bubble chat that I’ve been waiting for! I’ve been waiting to try this out since the new announcement a couple of months ago and possibly fork some colors and text fonts.

Somehow when enabling this through a Client-side script or turning it on through the properties, it somehow didn’t work well out inside studio and doesn’t show the text nor the frame for it as it just shows the arrow:

Video:

Question: Will the bubble chat (Mostly a BillboardGui) be hanging over the head of a humanoid as with certain R15 packages, it seems off and weird like an example here:

37 Likes

I like the improvement, but here’s several thing(s):

  1. Can you add a (…) animation for when a user’s typing in chat? This is found in Hangouts, Discord, and all other chat-related websites. Adding this would mean, users can wait until another person can reply, so there’s less breakage in a conversation.

  2. Is this issue fixed where the bubble chat cuts off a section of the message? Although this is more on the functionality side of things, it goes along with the reworking of it.

But still, the fluid animations there are so good!
Love this, thanks y’all!

46 Likes

Not even an hour or even minutes after the launch and it’s already broken inside Studio, how did this issue slide thru?
RobloxStudioBeta_P6UGjhoXid

Aside from the issue, I like the fact that there’s backwards compatibility with the old bubble chat! Althought I’d love to see the same thing happen with the playerlist aswell.

26 Likes

Looks like it uses the HumanoidRootPart, should definitely use the head though.

11 Likes

I had never seen this before, then I saw it one day and was confused about if it was for the new bubble chat. Thanks for clarifying this.

Can we have an option to make bubble sizes smaller? The default seems kinda large tbh.
And also like maybe you could enable richtext with your bubbles, unless it’s already a thing.

Next all we need is a chat UI rework, :face_vomiting:

13 Likes

I was going to say this too — i think the issue is the text is too thin/small. Nonetheless we should get an option to make it less wide too.

7 Likes

Why does the example code contain pcall? This seems unnecessary to do & dirty just to enable/change settings.

16 Likes

Finally, especially with the dumb “unfixable” gap glitch! I really like the new style, although in some games I may keep it the default…

5 Likes

It’s even found already in games, so having a feature where developers wouldn’t have to program it would simplify any external chat scripts.

4 Likes

Do you still notice the slight popping up; will that be fixed?

Yay! Just what I asked for in the previous topic.

9 Likes

This is amazing.

Can you please make sure that this page has the proper information and is updated?

Thanks for all your hard work.

7 Likes

One thing I would have liked to have seen was bubble order based on message order. It means you would see the most recent messages in front of older messages even if they are physically behind another older message. Still good work.

4 Likes

This looks very nice, any chance we could get the option to have different settings on multiple chat bubbles? Like an angry NPC with a red chat bubble and a happy one with a green bubble.

10 Likes

If you have the old bubble chat in your game and enable the new one as well, these 20% of mobile users who are running a client older than the 451 release will see the old bubble chat, and the rest will see the new one

12 Likes

Because it’s not enabled on every device, so it’s prone to error. They stated this in the thread.

7 Likes