Hello and welcome to the Unity Timeline course.
In which you will learn how to create cutscenes. Trust me, it's easier than you think.
I'm Mario, a teacher, game developer, and creator of the YouTube channel "Root Games." We will create cutscenes for 2D
games, but you can easily apply the knowledge you will get to create 3D
cutscenes. Let's take a look at examples. The first example will teach you the
basics and it can be used as intro cutscene. Everything you see on the screen
is animated. I don't control the character at this point. When the cutscene
ends, then I can continue to play. The second example will include
Cinemachine and playing with cameras. The cutscene will start when the
player enters the trigger area. Then we switch cameras and
give a hint to the player. Following this course is super easy. You
can download the whole Unity project, open the scene and start following
the course right away. In addition, you can even download the completed project. Hello everyone! This is a quick
guide on how to follow this course. The first thing you need to
do is to download the project. Then you need to extract the files. After that, open Unity Hub. We need to open
the project. Find the location and then wait for the Unity Hub to set up the project. Maybe
you will get a warning that you are not using the same version but that is fine, most likely it
will work with your version. I'm using 2022 LTS. When you open the project, find the "Scene"
folder and open the "Example One" scene. Everything is prepared in the scene and
you can follow the course from this point. Also, if you want you can download the
completed project with everything done. Of course, if you wish you can use your assets and sprites. Choose the best option for
you and see you in the next lecture. Let's set up Timeline. Okay, first we need
to open "Package Manager." Make sure Unity Registry is selected, and search for the Timeline.
Then install it if it's not installed by default. To open the Timeline window, go
to "Window, Sequencing, Timeline." I will just place it here, at the bottom. To start creating a timeline, we need to select
a GameObject. Let's create a new game object, I call it ExampleTimeline. Make sure that object
is selected and click Create. This will create a Director component and a Timeline asset. Let's
create a new folder for the Timeline assets. I will call the asset "TimelineIntro" because
it will be used for the intro cutscene. As you can see, now we have a Timeline. Also,
we have a Playable Director component. This component determines which timeline
asset we use and when to play it. For this example, we can
leave "Play On Awake" checked. That means the timeline will start
playing as soon as we load the level. By default, the timeline is using frames,
but let's change that to seconds. I think it's easier to work that way. Click on
the settings button, and choose seconds. Then lock the Timeline window. If you don't lock
it, the window will lose focus and become empty every time you select another object. And
we are pretty much done with the setup. In the next lectures, we will add tracks to the
timeline and create cutscenes. See you there. Hello again everyone! In this tutorial, I will
show you how to use a timeline to animate objects and create cutscenes. Here is the end result, this
is all animated. I don't control the character. After the cutscene ends, then we can
control the character and continue to play. As you can see, we will learn how to use
animations with the timeline, how to move objects, how to use sound in cutscenes, and much more. To
create this cutscene, we first need to animate this "PlayerSprite" object. Remember, this is
not the real playable character. This is just an object with a Sprite Renderer component.
We use sprite that represents our character. To animate it on the timeline, we need to use
an animation track. To create tracks, we can right-click here on the Timeline window or click
on the plus button. We need an Animation track. As you can see, the Animation track expects
Animator. Drag in the "PlayerSprite" object, since we don't have Animator on
that object, choose to create it. Now you can see that the Animator
component was created on the object. We don't need to add a Controller
or anything. We just need Animator. Next, let's use the Idle animation of the real
playable character. To show you what I mean, I will enable the real character. You
don't have to do this, just watch. I will open the Animation window, and place
it like this. Let's zoom in a little bit. To preview animation, we
need to unlock the Timeline. Now you can see the Idle animation. Of course, I
created more animations for this character. But as I said, first we will need Idle. So, let's
find the Idle animation clip in the Assets. Here is the Idle animation clip
we need. I will just reset things, disable the real character,
move the Animation window, select the ExampleTimeline,
and lock the screen again. Now drag the Idle animation clip into the
Timeline. We can move the clip along the timeline, also we can change the duration. Let's move it
to the start. Make sure that Preview is enabled, and then press the Play button on the
timeline. You can see the Idle animation. Let's add another animation. We need a Run
animation clip. Adjust the position and duration. Let's see it now. After Idle,
we have Run animation. Nice. Now we need to animate the position of the
character while the Run animation is active. We need to move our character somewhere here, next
to the crab. To do that, we need to create another Animation track. Use the same animator from the
"PlayerSprite." The movement needs to start when the Run animation starts, so set the marker
at that point. Then press the record button, select the object, right-click on
the position, and choose "Add key." As you can see, that created one keyframe with
the current position values on the timeline. Move the marker at the end of the Run
animation, and then change the position. Press the record button again
to stop recording. Let's try it. As you can see, the character moves. However,
there is one issue. You can notice that the movement is not linear, we have acceleration
at the start, and deceleration at the end. Let's fix it. Open the Animation window, then double-click on the Animation track. You
will see keyframes in the Animation window. Here we can move them and adjust the position.
Notice that the change is updated on the timeline. Okay, we need to select all keyframes,
right-click, both tangents and select linear. Let's see it now. Much better, the movement is nice and even. Here
is one tip. If you need to adjust the position of animated objects, you can select the Animation
track and find offset options in the Inspector. For example, you can adjust the Y
position of the object if you need it. Let's press the play button to see what we
have done, and remember that the timeline will start as soon as we load the level
since we have "Play On Awake" enabled. Nice. You can see when the timeline
stops, of course, we need to finish it. In the next tutorial, we will animate a small
conversation between our character and the crab, then the character will attack him and
that will be the end of the cutscene. Hi everyone! Let's continue with our cutscene.
In this tutorial, we will see how to use the Activation track. I will just enable two
prefabs so I can show you animations. The idea is to use those two animations in the
timeline. The animation is nothing special, I will open the Animation window. Here you can
see the keyframes for one of the animations. Okay, now I will delete the prefabs. We will need another Animation
track. Here I have one Test object. It has Sprite Renderer and Animator
components. Let's rename it to "Question." Drag it to the Animator position. Now we need
to use the animation clip that I showed you. Place it somewhere here. Let's copy and
paste the Idle animation of the character. Adjust the position of the object
a little bit. Now we can try it. First, you will notice that we can see the
object from the start. It's active all the time. We need to fix that. The animation is
good, then again, the object is still active. To solve this problem, we can use the
Activation track. We use Activation tracks to enable and disable objects. Let's
right-click and create one Activation track. As you can see, it expects a game object.
Let's drag in the "Question" object. Now we need to adjust the Active zone. It
determines when the object will be active. In this case, it needs to be active at the
same time as the animation. Let's try it. We can't see the object at the start, that is good.
Then we have animation, and it disappears. Nice. However, you have to be careful when using
Activation tracks. There are some cases when objects will not be disabled
automatically after the animation, so we need to do it manually. Let me show
you. I will change the duration of the Idle animation so the cutscene ends at the same time
as the Activation zone ends. Now if we try it, the start is fine, we don't see the object, but
after the animation, the object is not disabled. To make sure that the object will be disabled
you need to click on the Activation track. In the Inspector, you should see the Post-playback state.
It determines what will happen to the object after the Activation zone. To make sure that object
disappears, we need to select "Inactive." That will disable the object. Let's try it now.
After the animation, the object is disabled. Notice that the Timeline has a lot
of tracks, we can group tracks to keep it clean and organized. That is
the material for the next tutorial. Hello everyone! Let's organize our timeline
a little bit. To create a Track group, let's right-click and choose Track
Group. I will rename it to "Question." Now select the Animation and Activation
tracks that control the "Question" game object and drag them under the "Question"
group. Then you can minimize and maximize the group as you need. It looks much cleaner and
more organized. Here is your first mini-challenge. Create this "Response" animation from the
Crab. You will need to use one Animation and one Activation track. Then you can
add another track group if you want. To animate response, we need another
object. Duplicate the "Question" object, move it to the right, and rename it.
Then we need a new Animation track, it will use the animator from the Response object.
Then drag in the "Response" animation clip. We can increase the duration, I
will set two animation cycles. This is how it will look. I would like
to invert the direction of the object. We can achieve it by changing the X
scale to -1. Then adjust the position. Next, let's create one Activation
track. Use the "Response" game object. Then adjust the Activation zone. Don't forget
to set the "Post-playback" state to "Inactive." Then we can create another Track group. It will
be for the "Response" tracks. Let's try it. This looks nice and everything works. In the next tutorial, we will animate the attack and see what we need to do if the
animation contains Animation Events. Hi again! Let's add an "Attack" animation to
the Timeline. This will be different because the "Attack" animation has Animation Events. Let
me show you. Again, I'm showing the real playable character. I will select the "Attack" animation.
This is how it looks. Notice that I use Animation Events in this animation. Those events will
cause errors on the Timeline. We can test it. Let's select the Timeline, drag in the
"Attack" animation, and adjust it a little bit. Let's try it. Here comes the Attack, and we
get one error. In the Console, you can see that Animation Events are the reason. This means
that every animation that has Animation Events will cause problems. So, how to fix it? I have one
solution. If you have any other solutions please comment and let me know. Maybe there is another
solution or Unity will fix it in the future. The idea is to create the same animation but
without events. So I will find sprites that we use in the animation. Select the
sprites and drag them into the scene. This will automatically create animation,
I will call it "AttackTimeline." You can see it's the same animation. Just
make sure that the frame rate is identical. I think that it was 10 in the original
animation. Then we can delete the object. Select the timeline, we can delete the
original "Attack" animation from the timeline. Let's find our copy animation.
Place it just after "Idle". Let's try it now. Here is the attack,
let's check the Console, no errors, nice. For some reason, in these assets, attack
effects are on separate sprite sheets. So I will quickly add this attack effect. Place it somewhere here. Of course, we need Animation and
Activation tracks. Use the "Attack Effect" object. Then drag in the animation. Adjust the
position a little bit. It needs to be the same duration as your Attack animation.
But usually attack and attack effects are on the same sprite sheet so you don't need
to do this. Then change the Active zone. Make sure that the Post-playback state is
"Inactive." Then create another Track Group. Let's try it. Nice. That is all
for this tutorial, in the next one, we will add a death animation for the crab
and I will show you Animation Extrapolation. Hello everyone! Let's find out more about
Animation Extrapolation. As an example, we will use death animation. Here I have the
"Enemy" prefab. We don't really need a real enemy, we can just use sprite. Before we
delete it, let's copy the position. Then we can delete it, and find the sprite
we need. Now we can paste the position. I will quickly change the name. To animate
"Crabby," we need one Animation track. Create an Animator on the object. Now let's find
Death animation. Drag it on the Timeline. Now we need to position it right. The Death animation
needs to start when the player swings the sword. That is somewhere here. But notice one
detail. You can move the marker anywhere before the animation starts. As you can see, the
first frame of the death animation is active. This is because of extrapolation settings.
Notice two icons, one before and one after the animation. The icons show extrapolation states.
If you click on the animation on the Timeline, in the Inspector, you will
see Extrapolation settings. Pre-Extrapolate defines what
happens before the animation, and Post-Extrapolate defines
what happens after the animation. By default, both options are "Hold." For
Pre-Exrapolation, this means that the first frame of the animation is displayed, even
before the animation starts. That is why we see the first frame from the start of
the cutscene. We can change that option. You can see we have a couple of choices. Let's
choose "None." Notice that the icon disappeared and we can see the default sprite. By default
sprite I mean the sprite we use in the Sprite Renderer. That sprite can change as we animate
the object. Next, let's see Post-Extrapolation. With the option "Hold" Post-Extrapolation
will hold the last frame of the animation. Let's try it. For now, just ignore that Crabby doesn't have
"Idle" animation. You can see the default sprite. And after the animation, we
hold the last active frame. Let's add "Idle" animation. Notice that now the "Death" animation doesn't
have the "Pre-Extrapolate" option. That is because we have an animation that
comes before the "Death" animation. For the "Idle" animation we need the
"Loop" option for both extrapolations. As you can see, the animation is repeating. Just notice that with the "Loop" option selected, the position of the animation determines the
first frame of the animation at the start of the cutscene. And that's it about extrapolation.
Maybe you will use it in some situations. Hello everyone! Let's see how to add sound to the
cutscene. First, we need to create an Audio Track. As you can see, it expects Audio Source.
So let's create a new empty game object. Then we can add the Audio Source component.
Drag the object into the empty field. Now let's add background music. Let's try it. You can hear the music. If you want to test it
in the Play mode, make sure that sound is on. Everything works. Let's go through some options. Select
the audio clip on the timeline. In the Inspector you can see some settings.
For example, we can change the volume. Notice that the final volume is calculated from
multiple sources. It's a combination of clip, track, and Audio Source. If you select the track,
you will see some options. Here is the volume. So, that is important to understand. You can tweak the
volume on the clip and on the track separately. And we can also change the volume and
other settings using Audio Source. If you now take a look at the clip, you will see
every volume setting and the final calculation. Next, let's create fade-in and fade-out
effects for the music. For the fade-in effect, we need to increase "Ease In Duration." Let's hear
it now. Much better. Move the clip to the start. Then let's create a fade-out effect. This is a
bit longer music clip, let's change the duration. I will make it a bit longer than animations. Then increase "Ease Out Duration" to
create the fade-out effect. Let's hear it. Nice. Next, let's add an attack sound. We can just drag
in the clip and that will create an Audio track on the Timeline. We can use the same Audio Source.
Now let's adjust the position of the attack sound. Let's hear it. Nice. Here is the
full preview in the game window. Nice. We can just quickly create
another Track Group for the sounds. And that's it for this tutorial. Hello everyone! In this tutorial, we will learn how to control the character
and continue to play after the cutscene ends. First, we can delete or disable our "PlayerSprite"
object. Then let's enable the "Player" prefab. The idea is to use Animator from the prefab. Let's
simply drag the prefab to Animator tracks. Since we plan to continue playing after the
cutscene, we need to extend the Idle animation to the end of the cutscene. Now it will end
at the same time as the sound. We can try it. As you can see, when the cutscene ends, I
can control the character. It's that simple. But there is one hidden problem.
Let's try it again. Notice that I can use controls and affect the character. We need to disable and enable player controls.
To execute that, we will use Timeline Signals. We use signals as communication channels
between the timeline and other objects and systems from the scene. A Timeline Signal is
constructed from three pieces: Signal Asset, Signal Emitter, and Signal Reciever. We will
create Signal Emitter that will take Signal Asset. Signal Reciever will listen for signals from
the Signal Emitter and execute signal orders. Let's see how to set up signals. First,
we need to show markers on the timeline. You can click on the pin button here, or
you can right-click on the timeline numbers, and select "Show Markers." You will see one track
for Markers. Right-click on that track and create one Signal Emitter. Note that you can move the
emitter along the timeline. In Inspector, you can see that we need to create a Signal and Signal
Receiver. Let's create a Signal Receiver first. You can read here that Receiver
was created on the Timeline object. If you select the Timeline game object,
you can see the Reciever component. Select the emitter again.
Now let's create a signal. I will call it DisableSignal since
we will use it to disable controls. You can notice that here we choose what signal
to emit from this emitter, and we can also create new signals. As you can see here, every signal
has a reaction. Reaction determines what will happen when we emit the signal. Remember, we need
to disable controls, so let's drag in the player. Now we have access to all
components that the player has. Before choosing a function, let's
go to the "PlayerControls" script. I created two functions. One will just disable, and another will enable controls. Notice that
I'm using the new input system. This course is not about the new input system but if you want
to learn more about it, check my other courses. Back to Unity, and select the emitter. From the "PlayerControls" script, we need
to use the "DisableControls" function. Note that you can add more reactions
to one signal. So if you need to do more things at the same time, this is
how you can do it. Now we need to move the emitter to the start because we need to
disable controls when the cutscene starts. Let's create another emitter. Move
it to the end of the cutscene. Then we can create a new signal here,
or we can go to the Project window, right-click, Create, Signal. I will call it
"EnableSignal." Select the emitter, choose "EnableSignal." We can add one
reaction by clicking on this button, or we can select the object
with the Receiver component, that is the Timeline object. We need to add one reaction
and choose EnableSignal. Click on the "Plus" button.
Then drag in the player. From the "PlayerControls" script, we need
to use the "EnableControls" function. Now you can select the emitter and
see that everything is set correctly. Let's try it. Now I'm trying to control
the character but nothing happens because controls are disabled. After the cutscene
ends, I can control the characters. Nice. Now I will show you another procedure for using
signals. You can also create Signal Track. It expects Signal Receiver. Usually, I create a new
empty game object. Add Signal Receiver component. Drag in that game object. With right-click
on the Signal Track, we can create emitters. Now you would just repeat the process,
create signals and add reactions. That is all for this lecture.
See you in the next one. Hello everyone! In this tutorial, I will show you
how to use Cinemachine and cameras with Timeline to create cutscenes. We will also see how to
activate a cutscene when the player enters certain areas. In this simple example, we can control the
character. When he enters the activation area, the cutscene starts. It will change cameras
and in some way give a hint to the player or whatever you want to achieve. After the
cutscene ends, we can continue to play. Let's start. First, we need to import
Cinemachine. Open Package Manager. Make sure you select "Unity Registry" and
then search Cinemachine. Install the package. After installation we can right-click in
the Hierarchy, "Cinemachine," and you will see different types of cameras that we can use.
Since this is a 2D game, let's select a 2D camera. I will call it "FollowCam" since
this camera will follow the player. As you can see in the Inspector, we created a
virtual camera. To make the camera follow the player we need to change some settings. Note that
I will not go into details about settings because this is not the main point of this course. I
have a great tutorial and courses about setting up Cinemachine. Feel free to check it out.
Let's quickly change the size of the camera. Then we need to choose a target to
follow. That will be the player. You can see the edges of the camera. We can also expand the "Body" settings. Adjust the
offset on Y-axis. And I will also disable damping. Now let's create another 2D camera.
This will be a static camera. Make sure that it's the same size, and set
"Body" to none. Pay attention, sometimes when you create virtual cameras, the position on
Z-axis can be messed up. So let's set it right. Then let's move our static camera. It
needs to show this enemy and the key. We can duplicate the camera. Rename
it. Then move it to the door. So, we are telling the player that he needs to
pick up the key to open the door. To make sure that our "Follow" camera is displayed before other
cameras, we need to increase the priority. Nice. Now let's create one Timeline. We need
a new empty object. I call it Timeline. Make sure that the Timeline window is open,
and click Create to create a Timeline asset. I call it "CameraCutscene." For now, we can leave
"Play On Awake" enabled so it's easier to test, but later we will disable this and activate
the cutscene manually. Lock the Timeline. To control cameras we need to create a Cinemachine
track. As you can see, it expects the Cinemachine Brain component. The Cinemachine Brain is located
on the main camera. So drag in the main camera. The cutscene can start with "FollowCam." Drag
it into the timeline. Place it at the start, then make it a bit shorter. Next, we need
our first static camera. Place it after the "FollowCam." Let's try it. First, we see
our "FollowCamera," and then it snaps to the first static camera. After the cutscene, it
will snap back to the "FollowCam." Of course, we need a smooth transition between cameras. To
achieve it, we need to blend cameras like this. Transition smoothness and duration depend on the
length of the blending part. Let's try it now. Nice. That looks much better.
Let's add another static camera, and we can finish it with "FollowCam." This is how the Cinemachine
track should look like. Let's see the whole cutscene.
Transition to the first static camera, then the second, and we go
back to "FollowCam." Nice. Of course, we should disable controls when the
cutscene starts so that the player can't move. Again, we will use Timeline Signals just as in the
previous lectures. So if you skipped that part, please go back to it. Now I will go a little bit
faster. Show markers, and create a new emitter. Add Signal Receiver, emit "DisableSignal,"
and add "Reaction." Drag in the player, and choose the "DisableControls" function. Create
a new emitter. It needs to emit "EnableSignal." Add another "Reaction." Again, drag in the
player, but this time use "EnableControls." Nice. In the next lecture, we create Activation Area. Hello everyone! Let's continue with the
course and manually enable the cutscene. Now we can select the Timeline, and in
"PlayableDirector" disable "Play On Awake." The idea is to start the cutscene when
the player enters the trigger area. I have one object prepared. I will enable it. As you can see, it needs to
have a kinematic Rigidbody2D, BoxCollider 2D, the "isTrigger" option needs to
be selected, and we need one activation script. You can see the position of the collider. The
player will for sure touch the collider, he can't jump over it or something. So, it's important
how and where to place your activation collider. Before we open the activation script, let's select
the player. Make sure you set the tag "Player." Now we can open the script. First, we need
the "UnityEngine.Playables" namespace. Then we need a reference for
the PlayableDirector component. As you can see, we use the
"OnTriggerEnter2D" function. For every object that enters the trigger, we check
the tag. If the object has the tag "Player," then we need to start the cutscene. To start the
cutscene, we use "playableDirector.Play." After that, I just disable the collider so we
don't get multiple calls. Go back to Unity. As you can see, we need to assign Playable Director.
It's on the Timeline game object, drag it in. Let's try it. I can play the game and move around. When I enter
the trigger, the cutscene starts. Let's watch it. And then I can continue to play. Nice. That is all for this course, I hope you learned
something about the Timeline and cutscenes. They can really make your game look more alive
and fun. Thanks for watching and see you soon. 12
All suggestions
