Easiest way to create cutscene in Godot

Hello everyone! I know you have been waiting for this for a long time, so here it is another Godot tutorial. 

VIDEO TUTORIAL

TEXT TUTORIAL

You must have played a game, which has a cutscene created by moving the camera. So, in this video I will show you how easy it is to create a cutscene by just moving the camera around your level. And with no coding required. 

First create a scene of a control node. Then we have a ColorRect Node for the background then a Tile map, which is used to create these walls. 

Now the first thing you need to think of is from where you want to move the camera. Once you decided that…. Then we will add a Path2D node to the scene And under it add a PathFollowNode which will move along the path. Now Select the Path2D node and on the top bar you will see many icons. Right now we need to click on the add point icon  , this will add a point by which we will create the path

So depending on where you want to move the camera,

left click to add a point, then click again at a different position and it will create a line,

now keep extending this line when you are done your PathFollowNode will move on this path.

Now once you are done select this icon  this will make these sharp edges smooth So, click and hold on the edge point and drag your mouse and you will see two handles coming out of it. You need to move these handles to make this sharp edge into a smooth curve.

Once you are done with smoothening the points. Add a Camera2D node under the PathFollowNode

and in the camera property make sure that current option is turned ON .

Now click on the PathFollowNode and in the inspector you will see an offset slider and as you move it,you will notice the PathFollow node along with the camera is moving along the Path you just created. Also make sure the rotate option is set to false. So our camera don’t rotate as we move along the path. 

Now we need to change this slider during the game. So in that case we are going to use the Animation Player. So, add an Animation player to the scene then click on animation player and create a new animation.

then, just put how long you want the animation to be. For this demo i will write 6 sec. 

Then bring the pointer at 1 sec of time so the camera doesn't start moving as we play the game. then, go to the pathFollow node, set the offset slider to 0 and click on the key icon. This will create a key frame in the animation timeline. 

Then move the animation slider at the end and go to PathFollow node again and slide the offset slider to 100 then again click on the key icon to add a keyframe.

Now if you play the scene, you will see that the camera is moving along the path with a linear speed 

so when there comes a turn it feels a bit unnatural, so move the animation slide at the point where PathFollow node is in the corner and add a Keyframe if there is none.

 Now if you double click on the first point you will see a curve. so, if you want the PathFollow node to slow down a little when it reaches the next key frame then you make the curve a bit upward and if you want to start slow and then accelerate at the end, then you need to drag the curve down. So in this case I want to slow it down when it reaches at the edge, so I will drag the curve upwards. Then afterwards I want to start slow and then increase the speed so I will drag the curve down.

so, you can see by changing the speed it looks a bit natural and smooth. Now we can make it more amazing by adding a black bars and top and bottom of the screen, For this add a CanvasLayer node, so that it stays on the top of everything. Then we add a control node and in the layout, set it to full rect. Then add a color rect node under the control node, and then increase its size in left, right and top direction. also don't forget to set its color to black. Now in the layout section select center top. Now just duplicate the color rect and set it layout to center bottom.

Now open the animation player and then select the control node, there you will find a visibility section and under it, select modulate and reduce the opacity to 0. 

Now click on this key icon and create a new Key frame at the beginning. Now I will move the animation slider about 1 sec and now I will bring the opacity of the control node back to 100%. 

And once the animation is finished you need to hide it again by reducing the transparency or alternatively you can uncheck the visible option and create a key frame but if you are setting the key frame the make sure you add a key frame at the start where the visible will be turned on.

Now if you play the scene you will see the black bar fades in, the camera starts moving around the path and in the end the bars disappear so, everything is working fine.

Now let's see a situation when you have more than one camera in the scene. 

So, in this scene I have one camera attached to the player and one camera for the cutscene and as you know only one camera can be activated at a time. So initially the cutscene camera will be OFF and the player camera will be ON ( set the current to true and your camera will be activated ).

So as you can see in the animation player timeline I have also added the player's camera and my cutscene camera. So when the animation starts, I turn off the player’s camera and turn my cutscene camera ON. and the whole cutscene run as usual and when the animation finishes. I turn the player’s camera ON again. 

You can also disable the player’s input or pause the game until the animation finishes.

if you have any doubts then watch the video tutorial