How to use ColorSequences and UIGradients?

Help and Feedback Scripting Support
#1

Hi, so ideally I’m trying to create smooth color animations for a text I have. I was going to use a formula to get it to tween the actual color property of the text, but it appears there’s an easier way using gradients and ColorSequences; which I’ve never dug into before.

Any help is appreciated, thanks! :slight_smile:

2 Likes
#2

ColorSequence is best explained by its datatype page.
https://developer.roblox.com/en-us/api-reference/datatype/ColorSequence

The ColorSequence class has a single constructor which can be overrided three ways: a single colour across the whole sequence, two colours for the sequence (start and end) and a table of points for the ColorSequence (see ColorSequenceKeypoint). The third option requires two points at times 0 and 1.

If you’ve ever worked with ParticleEmitters before, chances are that you have worked with ColorSequences as well when modifying their colours. The panel you get when modifying a ParticleEmitter’s colour is effectively an ease-of-access way of writing and applying ColorSequences. The various keypoints you plot across the grid represent a time in the sequence from 0-1 and of course, the colour you set is the colour for that keypoint.

Look at this editor for example:

image
image786×198 14.2 KB

In code, this is represented as:

local seq = ColorSequence.new(Color3.new(1, 1, 1), Color3.new(0, 0, 0))

And now this one:

image
image786×198 17.9 KB

In code, this is represented as:

local seq = ColorSequence.new({
    ColorSequenceKeypoint.new(Color3.new(1, 1, 1), 0), -- REQUIRED PT @ 0
    ColorSequenceKeypoint.new(Color3.new(1, 0, 0), 0.5),
    ColorSequenceKeypoint.new(Color3.new(0, 0, 0), 1), -- REQUIRED PT @ 1
})

Unless you need to update a property for a PVInstance that accepts a ColorSequence or you’re instancing them, chances are that you aren’t actually going to need to know how to write them out and you can just use the panel. The colour editor panel is the best way to visualise a ColorSequence though. Through it, you can see how the ColorSequence API “works”.

I’ve never worked with UIGradient before, but there is an abundance of information on both its documentation page and its release announcement, the latter of which also shows examples of UIGradient at work. Your question here, how to use them, doesn’t exactly have a concrete answer: that’s for you to be determining.

Rather than the how, focus on the why do you want them and what of them do you intend to use. From what I gleaned in your thread, it’s for a smooth colour animation across a gradient. You will then, as recommended by the Developer Hub, be infinitely tweening the offset or doing it in such a way that you can fake an infinite effect (looping it right as the offset makes the gradient look the same between a zero and non-zero number).

7 Likes