Cutscene Module V1 ━ a easy-to-use Cutscene API

Cutscene Module V1

a module for easier cutscene creation
module is still WIP!


This is one of my first ever made Community Resources so please don't judge me. Grammar/Spelling errors may appear.
Current Version: 1.3

🔨 The Features:

  • Cinematic GUI
    • These Black Squares that tween into the Screen
  • Camera Manipulation
    • Supports Tweens
    • Based on Offset Rotation from a Target Part.
  • Dialoges
    • with animations
  • Templates and animations are easily addable
    • Animations are defined in ModuleScripts.
    • Templates are ScreenGUIs in the ‘Templates’ folder.
  • Auto-Correction
    • The Module supports Tab-Completion & uses setmetatable()

👀 Check it out:

🎬 Showcase

🚧 A Example:

:rocket: Get started!

💡 Tutorial

Getting the Module

The Module is available from the Roblox Creator Store and GitHub. You can get the Module from the 'Get' and 'Git' Button at the Start.

:rocket: Jump to the Top

  • To get it from the Creator Store
    • Click Get at the top of this post.
    • Click Get Model.
    • Open the Tool-Box in Roblox Studio.
    • Navigate to the Inventory tab.
    • Click on Cutscene Module V1.23.
  • To get it from GitHub:
    • Click Git at the start of this post.
    • Go to Releases.
    • Download the latest .rbxm file.
    • Import the file into Roblox Studio.

Then place it anywhere you want.

Requiring the Module

To require/use the module, use the following snippet:

local ccm = require(path.cutsceneModule) -- replace 'path' with the actual path of the module
local cutscene = ccm.new({})

How to use

To begin actually using the module, you need to specify the settings. Here's a full table of possible settings (as of V1.23):
ccm.new({
         targets = {Players}, -- Players affected by the cutscene

         cutscene = {
                 template = number, -- Defaults on 1
         	 time = number, -- Tween time for In()
         	 distance = number, -- GUI distance (0.5 = full screen)
         	 returnTime = number, -- Tween time for Out()
         	 delay = number, -- Delay before Out() in AutoIn()
         }

         camera = {
             targetPart = BasePart,
             offsetRotation = Vector3, -- The offset-rotation
             offsetPosition = Vector3, -- The offset-position
             rotateWithTarget = boolean, -- If the Rotation should add with the Targets Rotation
             positionWithTarget = boolean, -- If the Position should multiply with the Targets Position
         }

         dialog = {
         	 template = number, -- Defaults on 1
         	 text = {
         	 	[number] = {
         	 		beginwait = number, -- The wait-time at the beginning of the text
         	 		text = string,
         	 		animation = number, -- The Animation (Defaults on 1)
         	 		time = number, -- How long the animation should take
         	 		delay = number, -- The wait-time before the text disappears (w/ animation)
         	 		endwait = number, -- The wait-time at the end of the text
         	 	},
         	 	
                        -- After this point only use value which needed (for your cutscene)
         	 	playername = { 
         	 		text = string,
         	 		animation = number, -- The Animation (Defaults on 1)
         	 		time = number, -- How long the animation should take
         	 		delay = number, -- The wait-time before the text disappears
         	 	},
         	 },
})

A Example

Here a example how it would look like (used in the showcase):

-- LOCAL SCRIPT
local ccm = require(game.ReplicatedStorage.cutsceneModule)
local player = game.Players.LocalPlayer
local character = player.Character or player.CharacterAdded:Wait()

local cutscene = ccm.new({
	targets = {player},
	
	cutscene = {
		template = 1,
		time = 1,
		distance = .2,
		returnTime = 1,
		delay = 2,
	},
	
	camera = {
		targetPart = character:WaitForChild("HumanoidRootPart"),
		offsetRotation = Vector3.new(0, 180, 0),
		offsetPosition = Vector3.new(0, 1, -5),
		rotateWithTarget = true,
		positionWithTarget = true
	},
	
	dialoug = {
		template = 1,
		
		text = {
			[1] = {
				beginwait = 0,
				text = "this is a really cool showcase!",
				animation = 1,
				time = 1,
				delay = 1,
				endwait = 0,
			},
		},

		playername = {
			text = game.Players.LocalPlayer.Name,
			animation = 1,
			time = 1,
			delay = 2,
		},
	},
})

cutscene:AutoIn()
cutscene:ActivateCamera()
task.wait(1)
cutscene:StartDialog()

For more information look at the Documentation below this dropdown menu.


📃 Documentation
🚀Navigation

Functions


ccm.new(settingsTable)
Creates a new metatable with specified settings under the settingsTable variable as a table.
Find the settings table under the dropdown menu above the documentation.
This is needed for every other function.

:rocket: Jump to the Settings Table


cutscene:OverrideSettings(settingsTable)
Overrides settings for an existing cutscene.
Does not change all settings, only the specified ones.


cutscene:AutoIn() For GUI Cinematic Bars
Automatically uses ccm:In() and ccm:Out().
Requires all of the variables under cutscenee.


cutscene:In() For GUI Cinematic Bars
Tweens the Cinematic Bars In.
Requires the time and distance variable under cutscene.


cutscene:Out() For GUI Cinematic Bars
Tweens the Cinematic Bars Out.
Requires the returnTime variable under cutscene.


cutscene:ActivateCamera() For Camera
Activates the Camera with the according settings.
Requires targetPart.


cutscene:DeactivateCamera() For Camera
Sets the camera’s type back to Enum.CameraType.Custom.


cutscene:Update() For Camera
Updates the cameras Position & Rotation.


cutscene:GetCamera() For Camera
Callbacks the Camera (for Tween-Use)


cutscene:StartDialog() For Dialog
Starts the dialog with the settings specified under the cutscene.


cutscene:Destroy()
Destroys the cutscene, including its GUIs and Parts.


Remember: This Module is still WIP and most things are subject to change. If you have any suggestions, questions or bug reports, join my Discord below or just comment under this forum.

If I made any error on here I’m deeply sorry.

I will improve this forum in the near furture.
The module took me around 5 hours to write, and the forum post around 2 hours.
I would appreciate if you included credits. :slight_smile:
Feel free to give feedbacks!


🔗 Social Links 🔗

Roblox Group: Seraphic Labs
Roblox Profile: the_h0lysandwich
Discord: Seraphic Labs
12 Likes

445 views and no replies…
please give me feedback :pray:

1 Like

This plugin really saves me time in making cutscenes; it’s extremely helpful. Thank you! :heart:

Thanks for your response!
Glad you like the module. :slightly_smiling_face:

1 Like

Can you add an Editable testing place with multiple different cutscene examples , that do different type of cutscenes?

Can you also add some other

  • Cinematic GUI
    • These Black Squares that tween into the Screen

– Like a screen blur fade in, screen blur fade out.

–And a circle black fade in , fade out.

– A spinning screen fade in , fade out

– A spinning blur screen fade in fade out

Are there sounds examples , that kick of when cutscenes are at certain points?

Thanks

1 Like

Here a reply to your suggestions:

Can you add an Editable testing place with multiple different cutscene examples , that do different type of cutscenes?

Sure, tho I’m currently busy. I’ll make the place in a few days. I’ll edit the forum afterwards and add it under ‘:eyes: Check it out’. And I guess you mean by editable a GUI to edit it manually? Or just uncopylock it?

My Idea would be, you can create cutscenes in a testing place and then export that cutscene into a settings table.

  • Cinematic GUI

As i mentioned, you can easily add more templates by cloning/making a ScreenGUI and putting it in the Templates > Cutscene Folder. Name it ‘TemplateNumber_C’ (the C is needed to identify the Cutscene and Dialoge GUI seperatly.)
But I’ll look forward to adding more templates in the future!

– Like a screen blur fade in, screen blur fade out.

A Blur isn’t really necessary to add since it can be done manually with like, 6 lines of code (not including tweenservice variable). If you need it:

-- in a local script (tested)
local tween = game:GetService("TweenService")
local info = TweenInfo.new(1, Enum.EasingStyle.Quad, Enum.EasingDirection.Out)

local blur = Instance.new("BlurEffect", game:GetService("Lighting"))
blur.Size = 0
tween:Create(blur, info, {Size = 15}):Play()
task.wait(2)
tween:Create(blur, info, {Size = 0}):Play()

Maybe I’ll think about adding it, but it isn’t that necessary.
Tho read this.

And a circle black fade in , fade out.

What exactly do you mean by ‘circle’?
Like a Black Circle in the middle that gets bigger by time? (Tweening)

A spinning screen fade in , fade out

I don’t get exactly what this should be, but I would guess the camera rotating out. I’ll have to decide since the feature could be unnecessary, since I could just add a callback for the target part and you multiply the camera’s cframe with the target’s cframe and then rotate it (if you get what i mean).

– A spinning blur screen fade in fade out

A spinning blur is rather hard to make. I have found a module tho which makes UI Blurs as GUI.

I will insert the module in V1.4 and add a few features you requested. and the spin blur may be possible. The module in question: UI Blur [AUTOMATIC] (I will add proper credits)

Are there sounds examples , that kick of when cutscenes are at certain points?

This is a really good suggestion to be honest, I will add this in the next major update!
Tho, I’m not sure how I would add keyframes. If you have a Idea how I should do it, you can dm me or reply to this message!

I would add another table (like cutscene and dialoge) and name it “keyframes” and add it there, in example this format:

keyframes = {
   {name = "Keyframe1", timestamp = 0.5},
}

Thanks for your feedback!

It is kinda the opposite , the visible area is the inner circle that if it was a fade in the screen would be all black, and the visible inner circle expands bigger so you see more , until it is the whole screen… kinda like you a driving to the end of a tunnel… or like when you open your eyes…

then the fade out is the screen is all visible, and then the circle goes in smaller until the screen is all black

I can find an example if you want.