How to Create a Fading Effect for Room Entry in Roblox

[Alfiepro98234]

Hi everyone!

I’m trying to make a smooth fading effect when players enter a new room in my game. I want it to start with a black screen that fades out when they teleport to a different area. Ideally, the screen would briefly go black, then fade back in once the teleport is complete.

I’m not sure how to approach this and would appreciate any guidance on scripting this effect! If anyone has tips on implementing the fade, like using TweenService or other methods, please let me know!

[doctorpepper126]

-- instant black   
frame.BackgroundColor3 = Color3.new(0,0,0);
frame.BackgroundTransparency = 0;

-- fade in  
game.TweenService:Create(
   frame, TweenInfo.new(duration), { BackgroundTransparency = 1, }
):Play();   

[BEAMEDBYTRGX (DevStellarX)]

local Room = workspace.Room
local Frame = script.Parent.Frame
local TweenService = game:GetService("TweenService")

Frame.BackgroundTransparency = 1

local fadeInfo = TweenInfo.new(0.5, Enum.EasingStyle.Linear, Enum.EasingDirection.Out)

local fadeIn = TweenService:Create(Frame, fadeInfo, {BackgroundTransparency = 0})
local fadeOut = TweenService:Create(Frame, fadeInfo, {BackgroundTransparency = 1})

Room.Touched:Connect(function(hit)
    if hit.Parent:FindFirstChild("Humanoid") then
        fadeIn:Play()
        wait(5)
        fadeOut:Play()
    end
end)

[robloxhehevoice (lolll)]

What do you mean by fade, like transparency? Or the room (from bottom to top) just disappears?

[Frowning_Loser606]

hah yeah, tween service. another way to do it is a for loop, which depending on your case may be easier or harder.
(for loop, like for i=0,1,(your increment, smaller = more smooth) do skibidiScreen.BackgroundTransparency = i)

[robloxhehevoice (lolll)]

if you ARE using transparency, definitely use tweenservice https://create.roblox.com/docs/reference/engine/classes/TweenService

local tweenservice = game:GetService("TweenService")
local info = TweenInfo.new(--customize parameters)
local goal = (Transparency = 1) --transparency as in the models parts transparency, you can get them with a for loop!
local rig = --your rig
local tween = tweenservice:Create(--params)

otherwise, im not so sure.

[PlyDev]

For it to be smooth, yes you would need to use TweenService.
Here’s a simple way to do it assuming the localscript is under a black frame with a background transparency of 1 (only client-sided):

local TweenService = game:GetService("TweenService")

local tweenInfo = TweenInfo.new(0.5)

local blackFrame = script.Parent

local touchPart = workspace.TouchPart
local teleportPart = workspace.TeleportPart -- Your teleport part

-- Defaults
blackFrame.BackgroundTransparency = 1
blackFrame.Visible = true

local tweenIn = TweenService:Create(blackFrame, tweenInfo, {BackgroundTransparency = 0})

touchPart.Touched:Connect(function(Hit)
    if Hit.Parent:FindFirstChild("Humanoid") then
        tweenIn:Play()
        tweenIn.Completed:Wait()

        game.Players.LocalPlayer.Character:WaitForChild("HumanoidRootPart").CFrame = teleportPart.CFrame -- Teleport

        TweenService:Create(blackFrame, tweenInfo, {BackgroundTransparency = 1}):Play()
        blackFrame.Visible = false -- do this so you can interact with everything under the UI, including the actual game.
    end
end)