Bubbient - Gradient for Bubble Chat

Resources Community Resources
#1

Bubbient

Heya Developers!
Ever thought of adding Gradient in your bubble chat? Or did you think it’s not possible? It’s possible! And it’s really easy. Introducing Bubbient! I made a simple module which allows you to add Gradient effect in your bubble, really easily. I’m using UIGradient to add gradient into bubblechat. Means, you can easily configure it! And you can also add rainbow effect! Let’s set it up.

About Bubbient

Bubbient is a simple script, a modified version of Roblox’ original BubbleChat script. Ths allows you to add gradient in your bubble chat, change text font, and color. It also includes animated rainbow effect! And it’s really super easy to set up!

Model Info

This model includes these items so far:
image
You won’t need “instruction” and “ThumbnailCamera”. Simply delete them.

BubbleChat: This is the main modified script. This allows you to get gradient chat!
ChatEnabler: Enables the bubble chat for you. If you have it enabled already, you won’t need it.
normalGradient: The gradient effect that you’ll add in your bubble chat. You can customize it yourself
rainbowGradient: This gradient is used when you have turned rainbow settings on. I don’t recommend customizing it since the AnimationScript does it itself.
AnimateScript: This script generally animates the rainbow. This was originally made by @TheCarbyneUniverse, you can find the post here.

Setting Up

In order to make Bubbient work, you need to set it up - by putting it in their place.

  • Open Explorer
  • Put ‘BubbleChat’ script inside ‘Chat’
  • Put ‘ChatEnabler’ script inside ‘ReplicatedFirst’

Doing this, will automatically set the default settings of Bubbient.

View Default Settings

Default Settings

Gradient: image
Text Font: Cartoon
Text Color: White
Rainbow Animation: Disabled

Changing Gradient

You can change the default gradient, into any you want. I actually recommend using two colors in the gradient. If you are willing to use rainbow animation, you don’t need to do this step.

  • Inside BubbleChat, find normalGradient
  • Go to normalGradient properties, click on <ColorSequence>
  • Click on the three dot that appears on the right side of <ColorSequence>
  • Click on the triangle allows, click on colour and change it’s color. Then click close.

Changing Text Font & Color

You can easily change text font and color.

  • Open BubbleChat script
  • In line 7, change the number into the color you want. Make sure to turn your color into a rgb.
  • In line 8, at Enum.Font.Cartoon - replace Cartoon with the font you want. Make sure to type the exact name of the font, and it must be available in ROBLOX. No custom font would work,

Enabling Rainbow

If you want to enable animated rainbow effect, simply do this

  • Open BubbleChat script
  • In line 9, replace isRainbow = false into isRainbow = true and you are done!

Example

Normal Gradient

image

Animated Rainbow Gradient

Sorry for bad quality, it’s because of the recorder.

Or play this game, to see the animated rainbow chat yourself!

Credits

Written by: jeditkacheff, TheGamer101 (Roblox staff)
Configured to customize easily by Techyfied, original idea by realmile
TheCarbyneUniverse for the rainbow animation script.

34 Likes
[Plugin] Bubble Chat Customizer - Easily customize your game's bubble chat with live preview!
#2

Is it possible to make it so it has a loading thingy when a player is typing?
Similar to this

1 Like
#3

I don’t know to make that so far. I’m still trying. And yes, that resource has a lots of bugs, like, it shows “/e” and “/w” meaning you can’t privately message as well. I’m trying to make a better one, and will release it once done!

Also, happy anniversary! :tada:

#5

It is, but it could screw your performance because the server and client would have to send many more remote events then what roblox can handle.

#6

You might want to condense your other tutorials into one large one, all about customizing the chat and it’s chat bubbles.

That way you have a lower chance of your posts getting closed for not being substantial enough for this category, and it’s more accessible for people that way.

1 Like
#7

This is awesome.
I don’t know if anyone remembers an old Script Builder script called Gate keeper.
This reminds me of a modern version of Gate Keeper’s chat.

Could you include a test place?

1 Like
#8

I don’t know about Gate Keeper’s chat. And, in my other tutorial, almost none joined the place to test the bubble chat. So I thought it’s not necessary. I’ll add it anyways. Thank you!

2 Likes
#9

After seeing this it got me thinking, why don’t we tween it? So I started messing around with the script to make is animated. This is the outcome: Baseplate - Roblox Studio 2020-07-09 09-55-51

I didn’t add any major changes, I just updated the local chat script

local animator = bubbleGradient:FindFirstChild("Animation"):Clone()
	bubbleGradientC.Parent = chatBubbleMain
	animator.Parent = bubbleGradientC

And then created my own tween animation

local Noice = script.Parent
local TS = game:GetService("TweenService")
while true do
	if Noice then
		Noice.Offset = Vector2.new(.5, 0)
		TS:Create(Noice, TweenInfo.new(5), {Offset = Vector2.new(-.5, 0)}):Play()
		wait(4)
		TS:Create(Noice, TweenInfo.new(5), {Offset = Vector2.new(.5, 0)}):Play()
		wait(4)
	end
end

Its not the smoothest of Offset changes, so feel free to make it better.

1 Like
#10

I like it. Very nice :+1:
Is there any way you could make it have a loading animation thingy like this one

#11

I didn’t think about that idea! I’ll edit my post soon (my laptop is dead right now, will when its fixed) and add an rainbow or shine effect which I learnt from this post. Tysm! Appreciate it :heart:

1 Like
#12

Why don’t you try using player:GetFocusedTextbox()?

#13

As a new scripter, I don’t know about that yet. However, I’ll learn it and try to update the model.

#14

I have updated the script. Added rainbow animation feature, easy tutorial about changing text font and color and many more! Thanks for the support :heart: