Bubble Chat Customizer

From the grandma that brought you template-based Proximity Prompt customization

And a cool UI Previewer to help with template based UI configuration…

:sparkles: :art: …introducing, template-based Bubble Chat Customization :tada: :art: :sparkles:

With just a few clicks (no programming required :tada:) you can customize the way that all, or just some, bubble chats look! :sparkles: :star: :dizzy:

Just follow the following steps :eyes: :walking_woman:

  1. Clone the model into your workspace
    image

  2. Move BubbleChatScript into StarterPlayerScripts
    image

  3. Ensure BubbleChatEnabled is checked on the Chat instance

  4. Modify the default UI provided as a child of BubbleChatScript to your liking. Here, I changed the background color of ChatFrame to a light green.
    image image

And voila! You should see the changes you’ve made immediately reflected in game :tada:
good morning

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.
image

	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.
whoosh

Themes are also supported!

  1. Clone the default frame and rename it to the name of your theme
    image

  2. On whatever part or character you are calling Chat on, insert a Configuration instance named BubbleChatConfiguration, with a String attribute named Theme, and set the value to the theme’s name.

And the chats sent from those instances will be properly themified! :tangerine: :apple: :lemon:

ouch

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 :medal_military:

something (1)

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!

:cactus: Welcome to the Bubble Chat Customizer :cactus:
This is a free model that make it easier to :sparkles: customize :sparkles: Bubble Chat within any experience.

The code leverages the available properties in Bubble Chat, but takes a template-based approach:
Bubble Chat :nail_care:

– Intro –
To get started with this model, follow the following steps:
:one: Place BubbleChatScript in StarterPlayerScripts.
:two: Ensure that BubbleChatEnabled is set to True on the Chat object in Explorer.¹
:three: 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.
:four: As a test, modify the background color of the ChatFrame.
:five: Press Play :arrow_forward: 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. :dancing_women:

– 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:
:one: Clone the Default UI and name it to something unique, e.g. Enemy
:two: Add a Configuration³ instance as a child of whatever instance you will be calling Chat() on
:three: Name this Configuration instance BubbleChatConfiguration
:four: Give the Configuration instance a Theme attribute of type String that matches
this theme’s name, e.g. Enemy
:five: Press Play :arrow_forward: 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 :sob:
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? :face_with_monocle:
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! :speech_balloon::blush:
~ Bitwise (@BitwiseAndrea) :older_woman:t4:

¹ 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 :smiling_face_with_three_hearts:

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 :slight_smile: :cactus:

… next up… template based Dialog customization??? Stay tuned :newspaper: :mega: :woman_cartwheeling:

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 :clap:

74 Likes

This is great! Perfect for horror games and team chat games!

2 Likes

Wow! That feature is perfect for so many games! Thank you! Been waiting for something alike for long time!

3 Likes

This is awesome and makes it so much easier to create custom bubble chats - the themes are an especially useful feature. Thank you!!

2 Likes

Though this looks amazing. I loved your Proximity Prompt Customizer, and I think this looks amazing too.

2 Likes

Are you also able to edit the textcolor in the bubblechat?

Oooooo I love this! May try to implement it into our accelerator game to give our game a little more customization!

4 Likes

THANK YOU! A lot of built in guis are a pain to edit, and this makes that less true.

1 Like

Yes. Simply change the TextColor3 property in the Text inside the frame of the default.

Wow, this is one of the coolest updates.

How would you set bubble chat themes for people based on their team? I’m having a bit of trouble trying to figure it out, but it could also just be because I’m exhausted.