Simulated UIGradient Rich Text for Chat Tags

Resources Community Resources
, ,
1

Recently, I’ve been making a custom chat system using Chat Tags for my upcoming project. One of the features it utilizes is multiple chat tags.

One of the key features of my project is that it will use Titles that players can earn and equip, and some of them are UIGradient.

However, if you want to apply a UIGradient to a chat tag, you need to put a UIGradient Instance on the message, which will make the entire message a UIGradient.

Since I am using RichText for my chat tags, I can’t put UIGraidents in RichText because UIGraidents are an instance.

Here’s an example of my chat tag system without gradients that I’ve created.

image
image483×278 39.4 KB

It uses multiple chat tags, and each one uses RichText to give each chat tag a color.

The traditional method for making the chat tag a gradient color is by putting a UIGradient Instance inside of a message, but the issue with that is the entire message becomes a UIGradient.

Here’s an example of what Roblox offers for putting gradients in a chat window message.

image
image639×503 45.1 KB

It applies the gradient to the entire PrefixText, but I am using multiple strings in my PrefixText, so if I apply a gradient, here’s what happens to my PrefixText string.

image
image488×296 32.9 KB

The entire PrefixText is a gradient when I am trying to ‘[Deejay]’ have a gradient only.

I programmed a simulated UIGradient text using Color3.lerp between the beginning ColorSequence KeyPoint and the ending ColorSequence. It calculates and automatically removes any existing Rich Text and replaces it with Rich Text colors that simulate a UIGradient.

image
image429×241 27.1 KB

Output showing each RichText RGB color applied to the character in the string.

image
image299×268 45.7 KB

The limitations of this Simulated UIGradient function are that it only works with gradients that use two keypoints from 0 to 1. Which means you can’t do rainbow gradients or much more complicated gradients. Unless someone wants to take this script and modify it to do that. You can also use this for any text label outside of Chat Tags.

Here’s the script

function CalucateRange(ChatGradient : UIGradient, ChatTitle : string)
	local Range = ChatGradient.Color.Keypoints		
	
	local Keypoint0
	local Keypoint1
	
	if Range[1] then -- first keypoint in gradient
		Keypoint0 = {R = math.floor(Range[1].Value.R * 255), G = math.floor(Range[1].Value.G * 255), B = math.floor(Range[1].Value.B * 255)}
	end
	
	if Range[#Range] then -- last keypoint in gradient
		Keypoint1 = {R = math.floor(Range[#Range].Value.R * 255), G = math.floor(Range[#Range].Value.G * 255), B = math.floor(Range[#Range].Value.B * 255)}
	end
		
	local FilteredTitle = string.gsub(ChatTitle, "(\\?)<[^<>]->", "")

	if FilteredTitle then
		local GeneratedGradientTitle = {}
		
		for Num = 1, #FilteredTitle do			
			local GeneratedColor = Color3.fromRGB(Keypoint0.R, Keypoint0.G, Keypoint0.B):Lerp(Color3.fromRGB(Keypoint1.R, Keypoint1.G, Keypoint1.B), Num / #FilteredTitle)
						
			table.insert(GeneratedGradientTitle, "<font color='rgb(".. math.floor(GeneratedColor.R * 255)..","..math.floor(GeneratedColor.G * 255)..","..math.floor(GeneratedColor.B * 255) ..")'>"..string.sub(FilteredTitle, Num, Num).."</font>")
		end
		
		return table.concat(GeneratedGradientTitle)
	else
		return ChatTitle
	end
end

CalucateRange(UIGradient, String)

Make sure to put a UIGradient Instance in the function so it can grab the ColorSequence Keypoints.

Feel free to use it how you like. No need to give me credit, I figured I should share it here.

13 Likes