BrickColor fade with TweenService

I tried to use TweenService here.
I want a part to fade to black after I release a key, but it doesn’t seem to be working.

local light = game.Workspace.Lights.LightBTM.light
local TweenService = game:GetService("TweenService")
local goal = {}
goal.BrickColor = BrickColor.new("Black")

local tweenInfo = TweenInfo.new(0.3, Enum.EasingStyle.Linear)
local tween = TweenService:Create(light, tweenInfo, goal)

game.ReplicatedStorage.LightStart.OnServerEvent:Connect(function(player,light)
	light.BrickColor = BrickColor.new("White")
end)

game.ReplicatedStorage.LightStop.OnServerEvent:Connect(function(player,light)
	tween:Play()
end)

Any way to fix this?

1 Like

You can’t tween BrickColor, the types that TweenService can work with are listed on its Roblox Creator Documentation page.

You also create a Tween that attempts to work on the same part instance, regardless of which light was passed into the event handler.

You could use BasePart.Color instead, which is a Color3 value. Black can be aquired with Color3.new(0, 0, 0), and white with Color3.new(1, 1, 1).

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

local white, goal = Color3.new(1, 1, 1), { Color = Color3.new(0, 0, 0) }
local tweenInfo = TweenInfo.new(0.3, Enum.EasingStyle.Linear)

ReplicatedStorage.LightStart.OnServerEvent:Connect(function(player: Player, light: Part)
    light.BrickColor = white
end)

ReplicatedStorage.LightStop.OnServerEvent:Connect(function(player: Player, light: Part)
    local tween = TweenService:Create(light, tweenInfo, goal)
    tween:Play()
end)
1 Like

Doesn’t seem to work.
When I press the corresponding keybind, it should become white instantly, which it does.
But, when I release the key, it should fade from white to black, not become black immediately.

Any way to do this?

Hey there!

To make a part fade to black after the player releases a key in Roblox, you’ll need to use the KeyUp event and the Transparency property of the Part object.

Here’s some pseudocode to give you an idea of what the process might look like:

– Declare a variable to store the initial transparency of the part
local initialTransparency = part.Transparency

– Bind the KeyUp event to a function that will be called when the key is released
part.KeyUp:Connect(function(key)
– Check if the key that was released is the one you want to trigger the fade
if key == “yourkey” then
– Fade the part to black over a period of time by gradually decreasing its transparency
for i = 1, 10 do
part.Transparency = initialTransparency + (i / 10)
wait(0.1)
end
end
end)

I hope this helps! Let me know if you have any questions.

1 Like

I cannot replicate this problem, using the following scripts produces the expected result.

-- game.ServerScriptService.LightHandler :: Script

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

local Lights = {} :: { [Player]: Part }

-- I'm not bothering to actually set individual lights for just myself.
for _, player in Players:GetPlayers() do Lights[player] = workspace.Light end

-- ^^^
Players.PlayerAdded:Connect(function(player)
    Lights[player] = workspace.Light
end)

Players.PlayerRemoving:Connect(function(player)
    if Lights[player] then Lights[player] = nil end
end)

local LightFunction = ReplicatedStorage.LightFunction

local white, goal = Color3.new(1, 1, 1), { Color = Color3.new(0, 0, 0) }
local tweenInfo = TweenInfo.new(0.3, Enum.EasingStyle.Linear)

-- Toggles the light then a player (any player, because I'm only using 1 light)
-- invokes this function.
LightFunction.OnServerInvoke = function(player)
    local light = Lights[player]
    if not light then return end
    
    if light.Color == goal.Color then
        light.Color = white
        return
    end
    
    local tween = TweenService:Create(light, tweenInfo, goal)
    tween:Play()
end
-- game.StarterPlayer.StarterPlayerScripts :: LocalScript

local ReplicatedStorage = game:GetService("ReplicatedStorage")
local UserInputService = game:GetService("UserInputService")

local LightFunction = ReplicatedStorage.LightFunction

UserInputService.InputBegan:Connect(function(input, processed)
    if processed or input.KeyCode ~= Enum.KeyCode.E then return end
    
    LightFunction:InvokeServer()
end)

Doesn’t seem to work.

local light = game.Workspace.Lights.LightBTM.light

game.ReplicatedStorage.LightStart.OnServerEvent:Connect(function(player,light)
	light.BrickColor = BrickColor.new(255, 255, 255)
end)

game.ReplicatedStorage.LightStop.OnServerEvent:Connect(function(player,light)
	for i = 1, 10 do
		light.BrickColor = BrickColor.new(255, 255, 255) + (i / 10)
		wait (0.3)
	end
end)

Anything I need to change in this script?

Why don’t you use the Color property and change .new(1,1,1) with .fromRGB(255,255,255)?

Is this right? Doesn’t seem to change anything about it fading to black.

Switch BrickColor to Color3. Also where you want it to be black, remove the i formulla and set the 255 values to 0.

Wouldn’t that make it immediately become black?

I want it to slowly fade to black in a short period of time.

Why don’t you use TweenService for that?

Tried to do that, but I’m not getting the same result.

Either I’m not sure how to put it together, or I’m not being given correct placements.

Change the entire for loop to this:

local ColorTween = TweenService:Create(light,TweenInfo.new(0.6,Enum.EasingStyle.Linear,Enum.EasingDirection.InOut),{Color = Color3.fromRGB(0,0,0)})
ColorTween:Play()

It seems you want to create a script that causes a part to turn white when a specific key on the keyboard is pressed and then fade back to black when the key is released. If I understood this correct, the script below should be able to achieve this effect. Just modify the first variable to refer to the appropriate part. You need to press the “H” button on your keyboard to trigger the effect.

local part = game.Workspace:WaitForChild("Part")

local fadeTime = 1 -- Fade time in seconds

local part = game.Workspace.Part

local startColor = BrickColor.White()
local endColor = BrickColor.Black()

local fading = false

function fade()
	if fading then return end
	local t = game:GetService("TweenService"):Create(part, TweenInfo.new(fadeTime),{Color = Color3.new(0, 0, 0)})
	t:Play()
	fading = true
	
	t.Completed:Connect(function()
		fading = false
	end)
end


game.UserInputService.InputBegan:Connect(function(inp)
	if inp.KeyCode == Enum.KeyCode.H then
		part.BrickColor = BrickColor.White()
	end
end)

game.UserInputService.InputEnded:Connect(function(inp)
	if inp.KeyCode == Enum.KeyCode.H then
		fade()
	end
end)
local ReplicatedStorage = game:GetService("ReplicatedStorage")
local TweenService = game:GetService("TweenService")
local light = game.Workspace.Lights.LightBTM.light
local startColor = BrickColor.White()
local endColor = BrickColor.Black()

local fadeTime = 0.3
local fading = false

function fade()
	if fading then return end
	local t = game:GetService("TweenService"):Create(light, TweenInfo.new(fadeTime),{Color = Color3.new(0, 0, 0)})
	t:Play()
	fading = true

	t.Completed:Connect(function(player,light)
		fading = false
	end)
end

game.ReplicatedStorage.LightStart.OnServerEvent:Connect(function(player,light)
	light.BrickColor = BrickColor.White()
end)

game.ReplicatedStorage.LightStop.OnServerEvent:Connect(function(player,light)
	fade()
end)

Makes the same result, it turns white, but after I release it, it only becomes SLIGHTLY white, and only happens when I press it again (same result with everyone else’s rendition of the script.

Anything to fix it this time?

Can you send me a video? If it works for me it should work for you. Any output errors?

This is what it does, same as everyone elses method.
When I spam the key, it seems to stop, but if you look closely it slightly lights up and dies down, not what I intended.

Any specific reason for why you want to use BrickColor for this? I believe you could achieve your goal using Color3 instead.

I changed everything that needed Color3, but it still doesn’t work as intended, does the same thing as the video.

Try adding print("Light started") and print("Light ended") on the two OnServerEvent callbacks. Observe what happens in the Output window. Is it spamming or normal?

If it’s spamming, can you send the LocalScript(s) that fire(s) the two RemoteEvents?