How to make gradient for multiple lines of text?

Help and Feedback Scripting Support
#1

All my UI has a gradient on text. Here is how it looks:
image

While this is fine for TextScaled = true, I have some text labels with a fixed font size, that can be multiple lines. The gradient no longer looks nice on it:
image

Here is what I want it to look like:
image

I already made a script to fix this:

local label = script.Parent
local gradient = script.Parent.UIGradient

local lines = label.TextBounds.Y / label.TextSize

local keypoints = {}

for i = 1, lines do
	local start = (i - 1) / lines

	local startPoint = ColorSequenceKeypoint.new(start, Color3.new(1, 1, 1))

	table.insert(keypoints, startPoint)

	local mid = start + (1 / lines) * 0.4

	local midPoint = ColorSequenceKeypoint.new(mid, Color3.new(1, 1, 1))

	table.insert(keypoints, midPoint)

	local finish = i / lines - 0.001

	if i == lines then -- this is slightly janky but oh well
		finish = 1
	end

	local finishPoint = ColorSequenceKeypoint.new(finish, Color3.fromRGB(65, 65, 65))

	table.insert(keypoints, finishPoint)
end

gradient.Color = ColorSequence.new(keypoints)

However, exceeding 6 lines of text causes this error: ColorSequence.new(): table is too long.

What can I do about this? Ideally I dont want to make multiple text labels and split up the text, but it might be required.

#2

Since the ColorSequence object can only hold up to 100 20 ColorSequenceKeypoint objects, the only solutions are to use different ui properties or create fewer ColorSequenceKeypoint objects (using fewer colors or adjusting the color transition points so that fewer keypoints are needed)

#3

Unfortunately it seems to be closer to 20 keypoints max instead of 100, which kinda sucks.

I will try to figure something out

#4

For some reason I thought it was 100, but yea 20 is even more limited

#5

I sort of figured it out?

I made a module that splits the text into multiple text labels, 6 lines maximum:

image
image391×536 106 KB

Its a bit hacky, every single text label has the WHOLE string set as the text, since there is no way to know how many words are on each line (that I know of) It also uses UI Gradient transparency to hide the text thats not visible (instead of using clip descendants) So this is probably not very performant

Module:

local textGradients = {}

local tempLabels = {}


function fixGradient(label, gradient, lines, offset)
	local keypoints = {}

	local cutOff = ColorSequenceKeypoint.new(0, Color3.fromRGB(65, 65, 65))

	table.insert(keypoints, cutOff)

	for i = 1, 6 do
		local start = (i - 1) / lines + 0.001

		local startPoint = ColorSequenceKeypoint.new(start, Color3.new(1, 1, 1))

		table.insert(keypoints, startPoint)

		local mid = start + (1 / lines) * 0.4

		local midPoint = ColorSequenceKeypoint.new(mid, Color3.new(1, 1, 1))

		table.insert(keypoints, midPoint)

		local finish = i / lines

		local finishPoint = ColorSequenceKeypoint.new(finish, Color3.fromRGB(65, 65, 65))

		table.insert(keypoints, finishPoint)
	end

	local endPoint = ColorSequenceKeypoint.new(1, Color3.fromRGB(65, 65, 65))

	table.insert(keypoints, endPoint)

	gradient.Offset = Vector2.new(0, offset + .002)
	gradient.Color = ColorSequence.new(keypoints)
end


function textGradients.DisplayText(text)
	local size = math.floor(script.Parent.AbsoluteSize.X / 12.5)
	local width = script.Parent.Frame.AbsoluteSize.X

	local bounds = game.TextService:GetTextSize(text, size, Enum.Font.Highway, Vector2.new(width, math.huge))

	local lines = bounds.Y / size

	for _, temp in pairs(tempLabels) do
		temp:Destroy()
	end

	local prev = nil

	for i = 1, math.ceil(lines / 6) do
		local line = script.TextLine:Clone()

		local remaining = math.clamp(lines - ((i - 1) * 6), 1, 6)

		line.Size = UDim2.new(0, width, 0, remaining * size)

		line.TextLabel.Text = "<font size = '"..size.."'>"..text.."</font>"
		line.TextLabel.TextSize = size
		line.TextLabel.Size = UDim2.new(1, 0, 0, bounds.Y)

		if prev then
			line.TextLabel.Position = UDim2.new(.5, 0, 0, -prev.Size.Y.Offset * (i - 1))

			fixGradient(line.TextLabel, line.TextLabel.UIGradient, lines, prev.Size.Y.Offset * (i - 1) / bounds.Y)
		else
			line.TextLabel.Position = UDim2.new(.5, 0, 0, 0)

			fixGradient(line.TextLabel, line.TextLabel.UIGradient, lines, 0)
		end

		line.LayoutOrder = i
		line.Name = "TextLine"..i
		line.Parent = script.Parent.Frame

		prev = line

		table.insert(tempLabels, line)
	end
end


return textGradients

Better solutions are welcome