Custom chat bubble color

I have been looking for years on how to make a certain player’s chat bubble text be a different color.
This, for me, is hard since I’m kind of a beginner dev.

I have looked on youtube how to make it but there seems to be no video on what I was looking for.

I am puzzled and confused, can someone please help?

7 Likes

This has been asked many times before, most posts will direct you to this:

Please use the search bar before posting in the future.

I think you mistaken me, I want it to be for a certain player, not for everyone.

Ahah, sorry. I assumed you meant globally from the title of the thread. That thread still helps a lot, but you’ll just have to change the colors in a different place.

Here’s some steps to achieve this:

  1. Fork the chat system by play testing and copying all descendants of game.Chat, stop the play test and paste them into game.Chat to override the chat system.
  2. Open the BubbleChat script. At the top of the script, create your dictionaries to map UserIds against their custom chat color like so:
local bgColors = {
	[157510912] = Color3.fromRGB(192, 48, 32); -- UsernameMissingOrNil
	[692837183] = Color3.fromRGB(255, 215, 0); -- NormalBaconHair13
}

local textColors = {
	[157510912] = Color3.fromRGB(255, 255, 255); -- UsernameMissingOrNil
	[692837183] = Color3.fromRGB(16, 16, 16); -- NormalBaconHair13
}
  1. Add 2 parameters to the this:CreateChatLineRender function, one called bgColor, the other called textColor.
  2. Inside the same function, under the line that creates the chat bubble render (local chatBubbleRender = ...), add this code:
if bgColor then
	chatBubbleRender.ImageColor3 = bgColor
	chatBubbleRender.ChatBubbleTail.ImageColor3 = bgColor
end
  1. Inside the same function, under the line that creates the bubble text (local bubbleText = ...), add this code:
if textColor then
	bubbleText.TextColor3 = textColor
end
  1. Moving to the this:OnPlayerChatMessage function, pass the arguments bgColors[sourcePlayer.UserId], and textColors[sourcePlayer.UserId] to where this:CreateChatLineRender is called from inside this function.

After you’ve followed these steps, bubble chat messages should now be rendered in the specified colours you have chosen!

If you’d like to skip the steps and go straight to pasting the edited version of the chat, you can take this file and insert it into game.Chat: CustomChatBubbles.rbxm (114.4 KB)

NOTE FOR FUTURE VIEWERS: This chat script was forked on 11th of February 2019. I cannot guarantee that this will always work as the chat gets updated, but following the steps will give you a better chance at getting the latest chat features.

13 Likes

Thanks so much, I have been looking for years! This is what I needed. And again, thanks alot!

2 Likes

@UsernameMissingOrNil

Do you think that this would be possible to do this without having to clone the Chat, but only by a single ServerScript?

1 Like

It’s possible that you could get away with just cloning the BubbleChat script with little risk of any updates in the near-future breaking it. However, if and when they decide to update the chat entirely, I highly doubt they will have backwards compatibility for the spaghetti code chat we currently have. I highly suspect at some point in the future, that a chat update may break or cause problems for the forked BubbleChat script. This is why it’s common practise to fork the entire chat system when you make changes, as no modifications are guaranteed to be supported by future updates of the chat system.

2 Likes

I myself was looking for this, glad I found the same type of support & got the feedback!

2 Likes

That shows how to change the background of the bubble though, not the actual text colour. https://prnt.sc/rnaamj

2 Likes

It does change the text colour, the default text colour for bubble chats are black. The one shown in the screenshot is white.

How would I make a toggle system to toggle on and off the colours?

You’d have to make use of a RemoteFunction to return the bubble and text color for the player passed with the invocation. This would be instead of having a fixed dictionary of certain colors inside the BubbleChat script. There’s no built in way (afaik) to access ExtraData of a speaker from the client unfortunately - It would’ve been nice if there was instead of putting together your own code for it.

I’ve ran into a issue where, the chat bubble color changes just for the client that owns the gamepass, but it doesn’t replicate on other client’s screens. How would you go about fixing this to make it so it ONLY changes the color of the local player’s bubble but at the same time is visible to other players?

1 Like

Same issue here, this could be because the chat is outdated. I do use old chat modules and scripts for my game, so there shouldn’t be any issues though?

Would you mind sharing how you’ve implemented it, preferably by rbxm or Lua file?

Or just explain how you implemented it, and I’ll try to help.

Any update on this?

Sorry for the necro post, but I just found this and was curious.