Can you create wavy rainbow chat tag on Roblox's default chat?

This is what the effect looks like.

I am trying to achieve this and I did mess with ChatService module and learned how to change the name tags, chat text color, and etc. However, changing the color only changes it for the next set message so it does not actively change previous chat message colors like the video did.

I would like to ask if this effect is possible on Roblox’s default chat module? If not, I would guess that its a modified version of the module altogether.

7 Likes

I found the model created by the video creator here: Rainbow Tag - Roblox

I inserted it into my game, but it did not appear to work:

Unless you can find another way to do this, I don’t think the model I sent you will be much help.

Just a thought, maybe you could do a beam overlay with/without ViewportFrames (I’m not sure) and change the color gradient spectrum over time and create a similar effect? Sorry I couldn’t be much of help. If you want me to ATTEMPT to make this using beams, ask me to, and maybe I’ll take a stab at it. Thanks for reading!

Using a UIGradient could work for this.

1 Like

I didn’t know about that feature. Sounds useful now that I know it exists. Thanks for informing me about it!

1 Like

It was a relatively recently added feature so it’s fair you didn’t know about it

1 Like

Well, I do know what UIGradient is but I am asking if you can integrate the color effect in the default chat system via the module. Otherwise, I will conclude that it isn’t possible and must use an edited module to achieve the effect.

As far as I’m aware it isn’t possible without modifying parts of the chat system to support it.

@Arbeiters, it’d be good to know how you achieved it.

1 Like

So I found a “rusty” way of doing it so I’m not sure if it’s the most efficient, but it works good enough. This would only go through the entire rgb scale since maths isn’t my strong area and I didn’t bother with making a rainbow wave. In order to change that, play around with color1 and color2 variables. You could as well add more key points to the color sequence by just doing what I did for the two premade ones.

local players = game:GetService("Players")

local player = players.LocalPlayer
local playerGui = player:WaitForChild("PlayerGui")
local chat = playerGui:WaitForChild("Chat")
local frame = chat:WaitForChild("Frame")
local chatChannelParentFrame = frame:WaitForChild("ChatChannelParentFrame")
local frameMessageLogDisplay = chatChannelParentFrame:WaitForChild("Frame_MessageLogDisplay")
local scroller = frameMessageLogDisplay:WaitForChild("Scroller")

scroller.ChildAdded:Connect(function()
	for i, v in pairs(scroller:GetChildren()) do
		if (v:IsA("Frame")) then
			local textLabel = v.TextLabel
			local tag = textLabel:FindFirstChild("TextLabel")
			if tag then
				local uiGradient = tag:FindFirstChild("UIGradient") or Instance.new("UIGradient", tag)
				while (v.Parent ~= nil) do
					for j = 1, 255 do
						local color1 = Color3.fromHSV(j / 255, 1, 1)
						local color2 = Color3.fromHSV(j / 255, 1, 1)
						uiGradient.Color = ColorSequence.new({
							ColorSequenceKeypoint.new(0, color1);
							ColorSequenceKeypoint.new(1, color2);
						})
						wait()
					end
					wait()
				end
			end
		end
	end
end)
11 Likes

Thanks for the help but I just realized this that attempting to UIGradient a text label doesn’t really work since it affects the background so I was wondering how you made it possible?

EDIT: Found out that the text color greatly affects the UIGradient from working and is recommended to be white before using gradient.

Also, your local script code changes the same tag label only and would run it on the same gradient with each message sent. With every message that is sent by the player, it bugs the gradient even more by changing it multiple times.

With the release of the RichText feature, this can be done now with RichText, string patterns, and a table. I actually wrote a script for this just recently.

local players = game:GetService("Players")
local player = players.LocalPlayer
local playerGui = player:WaitForChild("PlayerGui")
local chat = playerGui:WaitForChild("Chat")
local frame = chat:WaitForChild("Frame")
local chatChannelParentFrame = frame:WaitForChild("ChatChannelParentFrame")
local frameMessageLogDisplay = chatChannelParentFrame:WaitForChild("Frame_MessageLogDisplay")
local scroller = frameMessageLogDisplay:WaitForChild("Scroller")

function rainbowText(textLabel)
	if textLabel.ClassName == "TextLabel" then
		textLabel.RichText = true
		
		local s = textLabel.Text
		local frequency = 1 -- determines how quickly it repeats
		local totalCharacters = 0
		local strings = {}
		
		for character in string.gmatch(s, ".") do
			if string.match(character, "%s") then
				table.insert(strings, character)
			else
				totalCharacters += 1
				table.insert(strings, '<font color="rgb(0, 0, 0)">')
				table.insert(strings, character..'</font>')
			end
		end
		
		while task.wait() do
			local str = ""
			local counter = totalCharacters
			for _, sub in ipairs(strings) do
				if string.match(sub, "%a+%b()") then
					counter -= 1
					local color = Color3.fromHSV(-math.atan(math.tan((os.clock() + counter/math.pi)/frequency))/math.pi + 0.5, 1, 1)
					sub = string.gsub(sub, "%a+%b()", "rgb("..math.floor(color.R * 255)..", "..math.floor(color.G * 255)..", "..math.floor(color.B * 255)..")")
				end	
				str ..= sub
			end
			textLabel.Text = str
		end
	end
end

for _, textLabel in pairs(scroller:GetDescendants()) do
	rainbowText(textLabel)
end

scroller.DescendantAdded:Connect(function(textLabel)
	rainbowText(textLabel)
end)

This should be the results:


I hope this helps!

WARNING: Using RichText for a chat system will prevent the chat from being filtered. I recommend using this method for in-game text only.

30 Likes

Mind explaining the trigonometric math used for color HSV calculation? (just explain basically the hard parts of your code)

Also, never knew someone would necrobump this old post, thanks.

I chose to use HSV since all you really need to do to is change the hue value continuously to make a rainbow effect so it makes coming up with an equation much easier for me. I had to come up with an equation that would preferably create multiple descending lines with the endpoints of (x, 1) and (x, 0). My best idea for doing this was using sine, cosine, and tangent since they create waves when graphed which is perfect since waves visually repeat themselves. So I was messing around with those until I learned that my idea is possible using math.atan(math.tan(x)). The equation I created through my tests was this:

4 Likes

Sorry for the long waited reply but that looks very complicated in math for me but basically, it does not work. It will just spit out the richtext you tried to place in the text with <font color="rgb(0, 0, 0)"> everywhere, as if ignoring it and treating it as part of the text normally.

Is the RichText property of the textLabel true? Also, its currently a Beta feature, you need to enable it from Beta features if you haven’t already.

1 Like

No, I have to use this ingame so a Richtext solution won’t be worth it right now however I found tinkering with a UIGradient in code with white text does the trick for me anyways.

2 Likes

I know this is an old post, but if you want a wavy Rainbow Text instead of just going through the colors I came up with this code(I based some of it off of @rokec123 and modified it). I don’t know how to get this through to the chat text but it will work the same way because it uses the same basic logic :slight_smile:

local uiGradient = Instance.new("UIGradient");
uiGradient.Parent = script.Parent;

while true do
	
	local number1 = 100;
	local number2 = 145;
	local number3 = 185;
	local number4 = 225;
	
	for color = 1, 255 do
		
		local color1 = Color3.fromHSV(color / 255, 1, 1);
		local color2 = Color3.fromHSV(color / number4, 1, 1);
		local color3 = Color3.fromHSV(color / number3, 1, 1);
		local color4 = Color3.fromHSV(color / number2, 1, 1);
		local color5 = Color3.fromHSV(color / number1, 1, 1);
		
		if color >= number1 then
			
			number1 += 1;
			color5 = Color3.fromHSV(color / number1, 1, 1)
		end
		
		if color >= number2 then

			number2 += 1;
			color4 = Color3.fromHSV(color / number2, 1, 1)
		end
		
		if color >= number3 then

			number3 += 1;
			color3 = Color3.fromHSV(color / number3, 1, 1)
		end
		
		if color >= number4 then

			number4 += 1;
			color2 = Color3.fromHSV(color / number4, 1, 1)
		end
		
		local success, errorMsg = pcall(function()
			
			uiGradient.Color = ColorSequence.new({
				ColorSequenceKeypoint.new(0, color5),
				ColorSequenceKeypoint.new(0.25, color4),
				ColorSequenceKeypoint.new(0.5, color3),
				ColorSequenceKeypoint.new(0.75, color2),
				ColorSequenceKeypoint.new(1, color1),
			})
		end)
		
		if not success then
			
			print(errorMsg)
		end
		
		wait(0.050)
	end
	
	wait();
end