From the grandma that brought you template-based Proximity Prompt customization…
And a cool UI Previewer to help with template based UI configuration…
…introducing, template-based Bubble Chat Customization
With just a few clicks (no programming required ) you can customize the way that all, or just some, bubble chats look!
Just follow the following steps
-
Clone the model into your workspace
-
Move
BubbleChatScript
intoStarterPlayerScripts
-
Ensure
BubbleChatEnabled
is checked on theChat
instance
-
Modify the default UI provided as a child of
BubbleChatScript
to your liking. Here, I changed the background color ofChatFrame
to a light green.
And voila! You should see the changes you’ve made immediately reflected in game
Not all aspects of bubble chat customization can be reflected in UI (like animations) - you’ll notice a BubbleChatConfiguration
ModuleScript
as a child of the container Frame
with the following structure.
MaxWidth = 300,
AdorneeName = 'HumanoidRootPart',
BubbleDuration = 15,
BubblesSpacing = 6,
MaxBubbles = 3,
VerticalStudsOffset = 0,
LocalPlayerStudsOffset = Vector3.new(0, 0, 2),
MinimizeDistance = 40,
MaxDistance = 100,
SizeAnimation = {
Enabled = true,
SpringDampingRatio = 1,
SpringFrequency = 2
},
TransparencyAnimation = {
Enabled = true,
SpringDampingRatio = 1,
SpringFrequency = 2
}
These are the default values for these settings in bubble chat. You can adjust these values and have them reflected immediately in your experience. Here I’ve set the BubbleDuration
to 1.
Themes are also supported!
-
Clone the default frame and rename it to the name of your theme
-
On whatever part or character you are calling Chat on, insert a
Configuration
instance namedBubbleChatConfiguration
, with aString
attribute namedTheme
, and set the value to the theme’s name.
And the chats sent from those instances will be properly themified!
If you want to add these programmatically, the Configuration
objects defining the themes will be recognized and cleaned up when added and deleted. With this you can do things like set bubble chat themes for people based on their team
Here is a copy of the readme provided with the model - it repeats what is said above but with a bit more information and an FAQs section!
Welcome to the Bubble Chat Customizer
This is a free model that make it easier to customize Bubble Chat within any experience.
The code leverages the available properties in Bubble Chat, but takes a template-based approach:
Bubble Chat
– Intro –
To get started with this model, follow the following steps:
Place BubbleChatScript in StarterPlayerScripts.
Ensure that BubbleChatEnabled is set to True on the Chat object in Explorer.¹
Expand the Default UI that is a child of BubbleChatScript.
This is the default bubble chat UI. Feel free to look around.
Don’t remove or remove any elements though - this risks breaking the script.
If you want to hide something, disable it or make the element fully transparent.
As a test, modify the background color of the ChatFrame.
Press Play You should now see bubble chat have a different background color.
And there you go! Customize away.² Once again do NOT remove or rename ChatFrame or ChatText -
those are necessary elements. And since the exposed customizable variables is limited, adding elements
won’t do you any good.
– Additional Configuration –
Some of these configurable attributes aren’t things you can represent in UI, like the number of bubbles
allowed at one time, or the offset from the chatter, or the style of animation. To customize these,
edit the BubbleChatConfiguration ModuleScript that is a child of the Default UI.
– Theming –
BubbleChat supports user-specific bubble chat settings! Isn’t that great?
To customize how you want someone’s (or somethings) chat to look, follow the following steps:
Clone the Default UI and name it to something unique, e.g. Enemy
Add a Configuration³ instance as a child of whatever instance you will be calling Chat() on
Name this Configuration instance BubbleChatConfiguration
Give the Configuration instance a Theme attribute of type String that matches
this theme’s name, e.g. Enemy
Press Play and trigger the Chat event. You should now see that specific instances bubble
chat bubbles have a custom theme!
– FAQs –
Q: How do I get the default bubble chat UI back
A: If you need to grab the default again for whatever reason, I have it uploaded here
(it contains the default configuraiton object too) for easy cloning:
Default Bubble Chat - Roblox
Q: Why is this better than a configuration object?
A: It’s not better for everyone! But I find it much easier to make my UI
and translate that into configuration object, rather than the other way around.
Q: What are these warnings in the console? Why aren’t certain UI changes I make reflected?
A: We are limited by what’s available in the API - certain things like different background
and text transparencies aren’t supported. If you would like to see more things supported
in bubble chat configuration, please file a feature request on the DevForum with your use case.
Chat away!
~ Bitwise (@BitwiseAndrea)
¹ This enables the “new” BubbleChat UI. This is necessary to support bubble chat configuration.
² Hate having to move UI elements into PlayerGui to see preview them? Check out my UI Previewer plugin.
UI Previewer - Roblox
³ Configuration instances were chosen due to their support in CollectionService:ItemAdded. Tags are
wonderful but require some programming knowledge or familiarity with plugins.
Check it out here
I highly recommend also using the UI Previewer plugin to help preview UI thats not in an active ScreenGui!
If you have any feature requests or feedback for this model, please share in the comments
… next up… template based Dialog customization??? Stay tuned
Note: Not all UI customization is supported by the BubbleChat API. Warnings will be printed in some cases, and fail silently in others (if you try coloring the background and tail differently, you’ll see a warning in the logs, but if you try and add a border it will just not be reflected in your experience).
If you want to see more customization for BubbleChat, please make a feature request outside of this thread, or show your support for other similar feature requests