SlateUI
DocsComponentsGitHub
Install SlateUI Plugin
SlateUI
DocsComponentsGitHub
Install SlateUI Plugin

Components

  • installation
  • components
  • button
  • inputs
  • notification
  • progressbar
  • loading
  • proximity
  • router
  • cutscene
  • effects
  • subtitles
  • cameraplus
Component

CutsceneSystem

A sequence-based cinematic controller. Chain camera movements, dialogues, screen effects, and character animations using a simple step-by-step table structure.

Overview

The Cutscene module locks the player's controls, takes over the camera, and processes an ordered sequence of events. Steps can run sequentially (one after another) or in parallel. It handles tweening, yielding, and cleanup automatically, ensuring the player is safely returned to normal gameplay when the sequence concludes.

Setup & Dependencies

Place the Cutscene module in ReplicatedStorage. The module is built to seamlessly integrate with the SubtitleSystem and ScreenEffectsModule if they are present. It attempts to load them via safe pcalls:

• Subtitles: ReplicatedStorage.Subtitles.SubtitleSystem • Effects: ReplicatedStorage.Effects.ScreenEffectsModule

If you prefer to load cutscenes by name rather than passing table data directly, store your sequence ModuleScripts in ReplicatedStorage.Cutscenes.CutsceneData.

Basic Usage — Inline Sequence

luau
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
local Cutscene = require(game.ReplicatedStorage.SlateUI.Cutscene)
 
local sequence = {
-- 1. Snap camera to a part and fade in
{ Type = "SetCamera", CFrame = workspace.CutsceneCams.Cam1.CFrame },
{ Type = "FadeScreen", Direction = "In", Time = 1 },
-- 2. Tween camera to another part over 4 seconds
{ Type = "MoveCamera", CFrame = workspace.CutsceneCams.Cam2.CFrame, Time = 4 },
-- 3. Fade to black
{ Type = "FadeScreen", Direction = "Out", Time = 1 }
}
 
-- Play the cutscene (yields internally but runs asynchronously via task.spawn if needed)
Cutscene:Play(sequence)

Advanced Usage — Parallel execution, Dialogue, and Events

luau
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
local Cutscene = require(game.ReplicatedStorage.SlateUI.Cutscene)
 
Cutscene:Play({
{ Type = "SetCamera", CFrame = workspace.Cams.Start.CFrame },
{ Type = "FadeScreen", Direction = "In", Time = 1 },
-- Parallel = true means the next step starts IMMEDIATELY alongside this one
{
Type = "MoveCamera",
CFrame = workspace.Cams.End.CFrame,
Time = 5,
Parallel = true
},
-- This dialogue plays while the camera is still moving
{
Type = "Dialogue",
Opt = {
character = "commander",
text = "Target sighted. Moving to intercept.",
duration = 3
}
},
{ Type = "Wait", Time = 2 },
-- Fire a RemoteEvent to tell the server to spawn enemies
{
Type = "FireEvent",
Event = game.ReplicatedStorage.Events.SpawnEnemies,
Args = { "Sector7" }
},
-- Trigger a screen shake effect from the Effects module
{
Type = "Effect",
Effect = "Shake",
Args = { 1, 15 } -- Duration 1s, Intensity 15
},
{ Type = "FadeScreen", Direction = "Out", Time = 1 }
})

Character Manipulation

You can move NPCs or the player's character during a cutscene using the MoveCharacter and AnimateCharacter steps. MoveCharacter supports both physical walking (via Humanoid:MoveTo) and Tweening.

Walking and Animating NPCs

luau
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
local npc = workspace.NPCs.Guard
 
local seq = {
-- Walk the NPC to a part
{
Type = "MoveCharacter",
Character = npc,
Position = workspace.Waypoints.Door.Position,
Method = "Walk",
Speed = 16,
Timeout = 5 -- Skip if they get stuck for 5 seconds
},
-- Turn NPC to face the player
{
Type = "MoveCharacter",
Character = npc,
Face = game.Players.LocalPlayer.Character.PrimaryPart
},
-- Play an animation track
{
Type = "AnimateCharacter",
Character = npc,
AnimationId = "rbxassetid://1234567890"
}
}
Cutscene:Play(seq)

API — Step Types & Properties

PropTypeDefaultDescription
SetCamera / MoveCameraStep—Requires a `CFrame` property. `MoveCamera` also requires `Time` (number) to dictate the tween duration.
AttachCamera / DetachCameraStep—Attaches the camera to a `Target` (BasePart or Attachment) on RenderStepped. Optional `Offset` (CFrame). Use `DetachCamera` to stop tracking.
DialogueStep—Passes the `Opt` (table) property directly to `SubtitleSystem:Show()`. Skips if Subtitles module is absent.
EffectStep—Requires `Effect` (string, e.g., 'Shake', 'Glitch'). Passes `Args` (array) or `Time` to the ScreenEffects module.
MoveCharacterStep—Requires `Character` (Model). Accepts `Position` (Vector3/BasePart), `Method` ('Walk' or 'Tween'), `Speed`, `Face` (Vector3/BasePart), and `Timeout`.
FireEventStep—Fires a RemoteEvent or BindableEvent provided in `Event`. Passes the array provided in `Args`.
RunStep—Executes a custom function provided in `Action`. If the function returns a Tween or Signal, the step will yield until completion.