Rainbow Overhead Tag Help

Help and Feedback Scripting Support
#1

I’m trying to make a rainbow overhead text thing but it’s not working the way I want it to, I’ve attached what it looks like now and I want it to look like the rainbow overhead texts you usually see in games and whatnot; how can I do that?

Here’s the code:

local TweenService = game:GetService("TweenService")
local Players = game:GetService("Players")

local tag = script.Parent.Parent

local gradient = script.Parent

gradient.Color = ColorSequence.new({
    ColorSequenceKeypoint.new(0, Color3.fromRGB(255, 0, 0)),
    ColorSequenceKeypoint.new(0.25, Color3.fromRGB(255, 255, 0)),
    ColorSequenceKeypoint.new(0.5, Color3.fromRGB(0, 255, 0)),
    ColorSequenceKeypoint.new(0.75, Color3.fromRGB(0, 255, 255)),
    ColorSequenceKeypoint.new(1, Color3.fromRGB(0, 0, 255))
})

local tweenInfo = TweenInfo.new(1, Enum.EasingStyle.Linear, Enum.EasingDirection.In, -1, false)
local tween = TweenService:Create(gradient, tweenInfo, { Offset = Vector2.new(1, 0) })

tween:Play()
1 Like
#2

Maybe try setting the offset to a negative number like -1,0 before you start tweeting?

#3

You would probably need to double the size of the gradient and reverse the ColorSequence on one side so there’s a seamless transition when the tween finishes

#4

I tried this, but still wasn’t able to get the effect I’m looking for

#5

When you say double the size of the gradient, what do you mean by that?

#6

Sorry, didn’t have time to test this any I don’t think it will work now that I am, but what you could try to do is tween the actual keypoints on the ColorSequence individually. Not sure if this is the most efficient solution, but it might work.

Edit: apparently this is hard to do as well, you might try using RunService like in this post here - How to make Moving Gradient - #10 by EmeraldSlash, otherwise i’m not sure how to help

#7

There are a couple of hurdles we have to overcome in order to achieve the desired effect.

The very first is that while we can offset our gradient, we cannot scale it. This means we must ensure the size of our TextLabel is of a sufficient size to space out our gradient. The way I like to do this is by inserting a UIPadding instance into our TextLabel, setting the PaddingLeft and PaddingRight properties to 0.25,0, and turning on TextWrapped for my TextLabel, this makes it easy to tell when our text exceed the bounds set by the padding. With this, we have ensured that we can “hide” 50% of our gradient. This is crucial for the effect we want to make.

The next step is to ensure our gradient loops twice in our ColorSequence. This can be done by just inserting all the colors twice. Do note, we also want to make sure the ColorSequence starts and ends with the same color.

Given the gradient you provided in your question, this would be our new gradient:

ColorSequence.new({
	ColorSequenceKeypoint.new(0, Color3.fromRGB(255, 0, 0)),
	ColorSequenceKeypoint.new(0.1, Color3.fromRGB(255, 255, 0)),
	ColorSequenceKeypoint.new(0.2, Color3.fromRGB(0, 255, 0)),
	ColorSequenceKeypoint.new(0.3, Color3.fromRGB(0, 255, 255)),
	ColorSequenceKeypoint.new(0.4, Color3.fromRGB(0, 0, 255)),
	ColorSequenceKeypoint.new(0.5, Color3.fromRGB(255, 0, 0)),
	ColorSequenceKeypoint.new(0.6, Color3.fromRGB(255, 255, 0)),
	ColorSequenceKeypoint.new(0.7, Color3.fromRGB(0, 255, 0)),
	ColorSequenceKeypoint.new(0.8, Color3.fromRGB(0, 255, 255)),
	ColorSequenceKeypoint.new(0.9, Color3.fromRGB(0, 0, 255)),
	ColorSequenceKeypoint.new(1, Color3.fromRGB(255, 0, 0)),
})

Lastly we need to change our tween. Since we are hiding 25% of our gradient at each side of our TextLabel summing up to 50% of the gradient being hidden, we want to tween from the offset -0.25,0 to 0.25,0. Modifying your code, this can be achieved quite easily:

gradient.Offset = Vector2.new(-0.25,0) -- Set the starting offset

local tweenInfo = TweenInfo.new(2, Enum.EasingStyle.Linear, Enum.EasingDirection.In, -1, false) -- Changed the duration to 2
local tween = TweenService:Create(gradient, tweenInfo, { Offset = Vector2.new(0.25, 0) }) -- changed this to stop the tween at 0.25

Note that the duration was changed as well. Since we have duplicate colors in our gradient now, we have to also double our tween duration in order for the timings to be consistent. Effectively, one tween has now become 2 cycles through the original gradient, instead of 1.

Putting all these together, we get your desired effect. Just be careful you don’t break the size of the TextLabel as this will destroy the seamless transitions.

I hope this helps!

1 Like
#8

Thank you for your help! Those changes worked amazingly and now I’ve got exactly the effect I’m wanting!

#9

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.