Bubble Chat

The built-in bubble chat system enables the display of customizable chat bubbles above avatars and NPCs. Key features include:

  • Animated transitions for improved engagement.
  • Numerous customization options including bubble duration, text/background color, distance at which bubbles are minimized or hidden, and much more.
  • Ability to define unique bubble styles per-user or NPC.

Enabling Bubble Chat

The bubble chat feature is opt-in and can be enabled in one of two ways:

  • Directly in the Properties window by enabling BubbleChatEnabled for the Chat service.

  • Through scripting, from a LocalScript within StarterPlayerScripts.

    LocalScript - Enable Bubble Chat

    1local ChatService = game:GetService("Chat")
    2ChatService.BubbleChatEnabled = true
    3

Customization Options

The appearance and behavior of bubbles can be customized by calling Chat:SetBubbleChatSettings() and passing in a table of key-value pairs.

LocalScript - Customize Bubble Appearance/Behavior

1local ChatService = game:GetService("Chat")
2ChatService.BubbleChatEnabled = true
3local bubbleChatSettings = {
4 BackgroundColor3 = Color3.fromRGB(180, 210, 220),
5 TextSize = 20,
6 Font = Enum.Font.FredokaOne,
7 BubbleDuration = 10
8}
9-- Apply the settings
10ChatService:SetBubbleChatSettings(bubbleChatSettings)
11

Appearance

Basic bubble appearance and style can be controlled through the following:

Key Description Default
BackgroundColor3 Background color of bubbles (Color3). [250, 250, 250]
TextColor3 Color of bubble text (Color3). [57, 59, 61]
TextSize Size of bubble text. 16
Font Font of bubble text. Font.GothamSemibold
Transparency Transparency of bubbles (0–1). 0.1
CornerEnabled Whether bubbles have rounded corners. true
CornerRadius Radius of bubble corners (UDim). (0, 12)
TailVisible Whether the pointed "tail" of the most recent bubble is visible. true
Padding Space between the text and the edges of a bubble, in pixels. 8
MaxWidth Maximum width of a bubble, in pixels. 300

Behavior

The behavior of bubbles on screen, such as duration and maximum visible distance from the camera, can be configured with the following:

Key Description Default
AdorneeName String name of the body part or Attachment that bubbles will attach to; if multiple instances of the same name exist, only the first instance found will be used. "HumanoidRootPart"
BubbleDuration Time before a bubble fades out, in seconds. 15
BubblesSpacing Vertical space between stacked bubbles, in pixels. 6
MaxBubbles Maximum number of bubbles displayed before older bubbles immediately disappear. 3
VerticalStudsOffset Extra space between bubbles and their adornee, in studs. 0
LocalPlayerStudsOffset If adorned to the local player, the offset of bubbles in studs from their adornee, relative to the camera orientation (Vector3). (0, 0, 2)
MinimizeDistance Distance from the camera when bubbles turn into a single bubble with an ellipsis () to indicate chatter. 40
MaxDistance Maximum distance from the camera that bubbles are shown. 100

Background Image

The background image of bubbles can be customized by including a BackgroundImage sub-table within the main settings table.

LocalScript - Bubble Background Image

1local ChatService = game:GetService("Chat")
2ChatService.BubbleChatEnabled = true
3local bubbleChatSettings = {
4 CornerEnabled = false,
5 TailVisible = false,
6 TextSize = 24,
7 TextColor3 = Color3.fromRGB(220, 50, 50),
8 Font = Enum.Font.LuckiestGuy,
9 Padding = 30,
10 BackgroundImage = {
11 Image = "rbxassetid://6733332557",
12 ScaleType = Enum.ScaleType.Slice,
13 SliceCenter = Rect.new(40, 40, 360, 160),
14 SliceScale = 0.5
15 }
16}
17-- Apply the settings
18ChatService:SetBubbleChatSettings(bubbleChatSettings)
19
Source image
Example bubbles
Key Description Default
Image Asset ID of the background image.
ImageColor3 ImageColor3 property for the image. [255, 255, 255]
ImageRectOffset ImageRectOffset property for the image. (0, 0)
ImageRectSize ImageRectSize property for the image. (0, 0)
ScaleType ScaleType property for the image. ScaleType.Stretch
SliceCenter SliceCenter property for the image; only applies if ScaleType is set to ScaleType.Slice. (0, 0, 0, 0)
SliceScale SliceScale property for the image; only applies if ScaleType is set to ScaleType.Slice. 1
TileSize TileSize property for the image; only applies if ScaleType is set to ScaleType.Tile. (1, 0, 1, 0)

Background Gradient

A gradient background can be applied to bubbles by including a BackgroundGradient sub-table within the main settings table.

LocalScript - Bubble Background Gradient

1local ChatService = game:GetService("Chat")
2ChatService.BubbleChatEnabled = true
3local bubbleChatSettings = {
4 CornerRadius = UDim.new(1, 0),
5 TailVisible = false,
6 TextSize = 28,
7 TextColor3 = Color3.fromRGB(0, 0, 0),
8 Font = Enum.Font.DenkOne,
9 Padding = 12,
10 BackgroundGradient = {
11 Enabled = true,
12 Rotation = 90,
13 Color = ColorSequence.new(Color3.fromRGB(150, 225, 255), Color3.fromRGB(50, 115, 255)),
14 Transparency = NumberSequence.new({
15 NumberSequenceKeypoint.new(0, 0.2),
16 NumberSequenceKeypoint.new(1, 0.5)
17 })
18 }
19}
20-- Apply the settings
21ChatService:SetBubbleChatSettings(bubbleChatSettings)
22
Base appearance
Gradient enabled
Key Description Default
Enabled Whether the defined gradient is enabled. false
Color Color property of the background gradient. [150, 150, 150] → [250, 250, 250]
Offset Offset property of the background gradient. (0, 0)
Rotation Rotation property of the background gradient. 0
Transparency Transparency property of the background gradient. (0, 0) → (1, 0)

Animation

Animation of bubbles can be customized by including a SizeAnimation and/or TransparencyAnimation sub-table within the main settings table.

LocalScript - Bubble Animation

1local ChatService = game:GetService("Chat")
2ChatService.BubbleChatEnabled = true
3local bubbleChatSettings = {
4 BackgroundColor3 = Color3.fromRGB(210, 210, 255),
5 TextSize = 22,
6 Padding = 10,
7 Font = Enum.Font.Cartoon,
8 CornerRadius = UDim.new(1, 0),
9 SizeAnimation = {
10 SpringDampingRatio = 0.25
11 },
12 TransparencyAnimation = {
13 SpringFrequency = 3
14 }
15}
16-- Apply the settings
17ChatService:SetBubbleChatSettings(bubbleChatSettings)
18

SizeAnimation

Key Description Default
Enabled Whether the defined size animation is enabled. true
SpringDampingRatio Damping ratio of the size animation; a value above 1 will result in a slower, more rigid animation while a value between 0 and 1 will result in a bouncing effect. 1
SpringFrequency Frequency of the size animation; higher values will make the animation play faster. 2

TransparencyAnimation

Key Description Default
Enabled Whether the defined transparency animation is enabled. true
SpringDampingRatio Damping ratio of the transparency animation; a value above 1 will result in a slower, more rigid animation while a value between 0 and 1 will result in a bouncing effect. 1
SpringFrequency Frequency of the transparency animation; higher values will make the animation play faster. 2

Per-User Customization

The appearance and behavior of bubbles can be customized per-user by including a UserSpecificSettings sub-table within the main settings table. Each key within the table should be a user's UserId and its value should be a table containing override settings for that user.

LocalScript - Larger Bubbles for Local User

1local Players = game:GetService("Players")
2local ChatService = game:GetService("Chat")
3ChatService.BubbleChatEnabled = true
4local bubbleChatSettings = {
5 UserSpecificSettings = {
6 [Players.LocalPlayer.UserId] = {
7 TextSize = 24,
8 Padding = 12,
9 BubblesSpacing = 8
10 }
11 }
12}
13-- Apply the settings
14ChatService:SetBubbleChatSettings(bubbleChatSettings)
15

NPC Bubbles

Chat bubbles can be shown above NPCs by calling the Chat:Chat() method. You can also customize such bubbles by including a UserSpecificSettings table as outlined in per-user customization, but instead of a UserId, use the full name of the part/attachment (Instance:GetFullName()).

LocalScript - NPC Bubbles

1local ChatService = game:GetService("Chat")
2ChatService.BubbleChatEnabled = true
3local npc = workspace:FindFirstChild("SpiderGirl")
4local adornee = npc:FindFirstChild("HumanoidRootPart")
5local bubbleChatSettings = {
6 UserSpecificSettings = {
7 [adornee:GetFullName()] = {
8 CornerRadius = UDim.new(0, 6),
9 TailVisible = false,
10 TextSize = 25,
11 TextColor3 = Color3.new(1, 1, 1),
12 Font = Enum.Font.SpecialElite,
13 Padding = 12,
14 BubbleDuration = 8,
15 BubblesSpacing = 4,
16 BackgroundGradient = {
17 Enabled = true,
18 Rotation = 90,
19 Color = ColorSequence.new(Color3.fromRGB(175, 0, 0), Color3.fromRGB(175, 0, 0)),
20 Transparency = NumberSequence.new({
21 NumberSequenceKeypoint.new(0, 0),
22 NumberSequenceKeypoint.new(1, 0.25)
23 })
24 }
25 }
26 }
27}
28-- Apply the settings
29ChatService:SetBubbleChatSettings(bubbleChatSettings)
30-- Display chat bubbles above the NPC adornee
31ChatService:Chat(adornee, "Welcome to our island, traveler!")
32wait(3.5)
33ChatService:Chat(adornee, "I have potions and other magical items for sale")
34wait(4.75)
35ChatService:Chat(adornee, "I also have some fresh gibblyboks in the chest...")
36wait(5.25)
37ChatService:Chat(adornee, "Would you like to buy some?")
38