Multiple bricks shifting colors on GUI interaction

What is the easiest way to achieve this effect wtih certain tweaks?

Im making a cutscene where after pressing a button multiple bricks gradually transition from darker shades into white, later forming a whole, however im having trouble doing so with multiple bricks, and stopping the script once the sought after effect has been achieved.

So far i only managed to do this with the same script for each brick with slightly changed numbers ( they begin changing color immediately when the game is loaded and will fall out of sync over time) , and only for one brick when the button is pressed ( it begins to loop as well instead of going up to the max value just once ).

function handleActivated()
	print("Button Pressed!")
	local GlowBrick = game.Workspace.GlowBrick
	local x = 0

	while true do

		GlowBrick.Color = Color3.fromHSV(0,0,x)
		x = x + 1/255
		if x >= 1 then
			x = 0
		end
		wait(0.05)
	end
end

script.Parent.Activated:Connect(handleActivated)

script used for multiple bricks (placed inside each brick):

local b = script.Parent
local x = 0

while true do

    b.Color = Color3.fromHSV(0,0,x)
    x = x + 1/255
    if x >= 1 then
        x = 0
    end
    wait(0.05)
end

Putting a script in every brick with changed values that affect timing is uneffective.
Another issue Im unable to solve is freezing the state of the brick where the color reaches its maximum shade of white ( V:255 in HSV )
Im rather new to scripting and have no ideas how to achieve this.
GradientChangeProblem.rbxl (679.8 KB)

The thing to solve all of your problems is TweenService. It allows you to transition properties of an object to other values smoothly - you can even apply curves to make it nicer. Here is an example for your use case - I will use the same variable values from your second given script.

local TweenService = game:GetService("TweenService")
local b = script.Parent

local info = TweenInfo.new(
   15 -- This is the amount of time it will take for the transition.
)

local goal = {
   Color = Color3.fromHSV(0, 0, 255) -- Give the property name with the goal value.
}

local tween = TweenService:Create(b, info, goal) -- Creating the tween itself.

tween:Play() -- Begins changing the colors.

-- If you wish to detect when the tween is completed, do this.
tween.Completed:Wait()
-- Anything under here will run after your tween finishes.

If you have any questions feel free to ask me - TweenService can be tricky at first but I’m sure you’ll get the hang of it. Also, try to refrain from using while true loops, especially since you didn’t break them - that can be detrimental to performance.

2 Likes

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