Cutscene Loading Screen

Hello developers.
I am beginner at coding and I am making a new game. I would like to know how to make blurred cutscene loading screen with fade effect when you click play/skip. It would be appreciative if someone can help me with that. Here is the video example: ☕The Vibe Cafe - Roblox, I couldn’t upload the video so if you play this game it’s gonna be at the start.

SuccessfuIDev

1 Like

Oh, that shouldn’t be too hard to do. What you can do is to add the Blur effect to the lightning service, adjust it to your needs then use TweenService to tween the camera’s CFrame. You can do that by creating some invisible parts (they’ll act as points for your camera cutscene) and, as said, tween the CFrame of the camera to the CFrame of those parts.
(TweenService | Documentation - Roblox Creator Hub)

1 Like

You can try my cutscene plugin. it can come in handy!
2k preview:

Tutorial:

3 Likes

I will watch it for sure. thanks

2 Likes

hi. i Already know that but if i add blur to lightning service then it will stay in game forever. i rater put the blur in “player’s camera” right?

1 Like

Loading Screen


So you want to make a loading screen? Here!


Make a localscript in ReplicatedFirst (name it anything that you want)

Add this to the start of the localscript to remove roblox’s default screen:

By the way you cant completely remove roblox’s loading screen, but you should only see it for around 1-2 seconds.

game.ReplicatedFirst:RemoveDefaultLoadingScreen()

Then, design a loading screen! (With a screengui)

Tip: in the screengui turn on IgnoreGuiInset.

Now, put that ScreenGui inside of the localscript.

Now, add this to the next line to add a variable for the PlayerGui.

local PlayerGui = game.Players.LocalPlayer:WaitForChild("PlayerGui")

Then add this. This will add a variable for the loading screen. Then it will move it into the playergui.

local GUI = script.LoadingScreen -- Change LoadingScreen to the name of your screengui
GUI.Parent = PlayerGui

We now need to make it wait for the game to load. Add this line to make it repeat wait.

repeat wait(1) until game:IsLoaded()

After that line, it will tell the script that the game has loaded. Try tweening everything off the screen! (You should know how to tween)
(This is my script)

GUI.BG.Note:TweenPosition(UDim2.new(0.321,0,1,0), "InOut","Quart",1)
GUI.BG.Load:TweenPosition(UDim2.new(0.5,0,-1,0), "InOut","Quart",1)
wait(1)
GUI.BG.Right:TweenPosition(UDim2.new(1.25,0,0.5,0), "InOut","Quart",1)
GUI.BG.Left:TweenPosition(UDim2.new(-0.5,0,0,0), "InOut","Quart",1)

Then, make it wait a specific time for your loading screen to delete itself.

wait(1)
GUI:Destroy()

Done! You can of course add more, but thats the bare bones of a normal loading screen. Thanks for reading!

(Heres my entire script, feel free to change it if you want)

game.ReplicatedFirst:RemoveDefaultLoadingScreen()

local PlayerGui = game.Players.LocalPlayer:WaitForChild("PlayerGui")
PlayerGui:SetTopbarTransparency(0)

local GUI = script.LoadingScreen
GUI.Parent = PlayerGui

repeat wait(1) until game:IsLoaded()

GUI.BG.Note:TweenPosition(UDim2.new(0.321,0,1,0), "InOut","Quart",1)
GUI.BG.Load:TweenPosition(UDim2.new(0.5,0,-1,0), "InOut","Quart",1)
wait(1)
GUI.BG.Right:TweenPosition(UDim2.new(1.25,0,0.5,0), "InOut","Quart",1)
GUI.BG.Left:TweenPosition(UDim2.new(-0.5,0,0,0), "InOut","Quart",1)
wait(1)
GUI:Destroy()

(Some of this I used AlvinBlox’s tutorial for. Most of it is made by me)

1 Like

Yes, that can be a solution too. You might wanna use a LocalScript to create the effect, then put it into the camera or the lightning service (altough I doubt anything changes). Don’t use a normal script, as then the blur will show for everyone (assuming you didn’t know).
Also just saw @devinkid1 made a pretty nice guide right there, so maybe try that out! Good luck :slight_smile:

1 Like

Hi. Thanks for script I will try it for sure.

1 Like

yes. i know basics of scripting i was just saying for blur. still thanks.

1 Like

image
When you generate scripts
You can add “Blur” instance to lighting and then add an object value referencing the blur instance to remove, inside “OnFInishedRemove” folder.
Any object value inside that folder. It’s value will get destroyed when the cutscene ends automatically

Oh thats a smart thing to do, thanks.

1 Like

It’s a great tool to get started but if you want ultimate control over your cutscene it worth it to try to make your own system. Have a good day!