This is the user guide to the Cutscene Editor, made and developed by Bears Development Team
Hi! the Cutscene Editor was made by Bears Development Team to make it easy for developers to make and play cutscenes in their game!
The Cutscene Editor is available here:
How To Use
Layout
When you open up the Cutscene Editor, you should see a screen like this:
The ‘Add Node’ button adds a node at your camera’s current position. Note, it does record the orientation of your camera, so if you’re looking the wrong way, the cutscene will turn a lot. The ‘Name’ box is the name of the cutscene. The default is Untitled. The white textbox on the right of the editor shows how many nodes you have created so far.
Once you add at least two nodes, you will be able to create and test your cutscene! The screen will have two more buttons, one says “Test” and the other says “Create”
Nodes
In the workspace, nodes look like this:
The red side of the node is the way the camera is facing, and the way the camera will end up facing after the node has played.
Once you add multiple nodes, you should see something like this:
On top of the second node, it says ‘Change Time’. That will change the amount of time it takes to get from the node before it to the current node. The default is 2 seconds. You can tell the direction that the cutscene is going in because it starts at green and ends at red.
Tutorial
Making the cutscene
In this tutorial, I am going to show you how to make a simple cutscene using the Bear Development Team’s Cutscene Editor.
Step 1: Creating the Background
Every good cutscene needs a background, or a terrain to play in. In the cutscene I am making, the background is going to be a castle hallway, from Roblox’s template library. You can download it here:
Castle.rbxl (1.5 MB)
*Note the castle was not made by me, it was made by Roblox
Step 2: Naming the Cutscene
This is fairly easy to do, just click on the text box labeled ‘Untitled’.
Step 3: Adding Nodes
In the cutscene I am creating, the player’s camera will go through the castle.
In the gif, I move the camera around the castle, going to the dining room, adding nodes along the way. Then, I changed the time of each node (not in the gif). The closer the node is to the previous one, the quicker you should make it go to avoid the camera going to slow and making it look weird. The speed the camera moves at is proportion of the distance between the nodes and the time you inputed.
You can test the cutscene by pressing “Test Cutscene”
Once you get the result you like, click “Add Cutscene”. This will delete all the nodes and insert scripts to make the cutscene run.
Running the cutscene
In games, there are many ways to run a cutscene. I’m going to do the simplest: adding a button.
To do this, I build a button and add a script and a click detector:
Then, in the script, we run the cutscene by calling it, because it is a remote event.
game.Workspace.Cutscenes:FindFirstChild("Castle Cutscene"):FireAllClients(playerName)
Don’t forget: replace the “Castle Cutscene” and playerName with the cutscene/player you want to run.
function pressed(player)
game.Workspace.Cutscenes:FindFirstChild("Castle Cutscene"):FireAllClients(player.Name)
end
script.Parent.ClickDetector.MouseClick:Connect(pressed)
That scripts gets the remoteEvent for running the cutscene, then fires it with the name of the player.
Final Product:
Important Info
Bugs that haven’t been removed yet 
- Try not to undo/ctrl + z, it may break the plugin
- You can move nodes after adding them, however do NOT delete them
Thanks for reading! If you have any questions, you can message my Roblox account
Note: I may open-source the code to the plugin if there is enough interest…
Should I open source this?
- Yes
- No
0 voters
Written by
LoveTheBears101
Head Developer of Bear Development Team