Game Advanced Beta type Version 3
Hello everyone, this is Park Hyun-sang, in charge of FPS game creation lectures
In this lesson, I will be giving a lecture on
Cinemachine and sequence control
Using features like sequences and Cinemachine,
you can easily create elements that would be
complex to implement through programming
By creating these cutscenes,
you can guide users to become more immersed
in the main flow of opening or ending content
Cutscene creation using Cinemachine and Sequences
The topic of this session is a lecture on cutscene creation
or Cinemachine creation using Cinemachine
First, we will define what a cutscene is and then move on from there
A cutscene is generally a screen
used to show important story elements, such as in the opening or ending
where the user does not control the action
It is created and directed by the developers
to be shown to the users
It is primarily used for story delivery or to provide hints
and other explanations to the users
through direction
In the past, games like the Final Fantasy series
used actual cutscene videos to show scenes, while during gameplay,
they used slightly lower-quality models
to display real time play
On the other hand, recently, there are many more cases
where the quality of in-game data,
which refers to playable data, is improved and directly used for cutscenes
I will explain the cutscene usage case of
the recently popular content Ogong
and then move on to the practical exercises
The screen you see now is the actual gameplay screen that I am playing
Since we are running it for the first time, the menu button is displayed
When you play it, clicking on New Game
takes you directly to the character movement screen,
and the predetermined opening sequence begins
I would love to show you everything, but
Since it's quite long, about 5 minutes, it would take too much time
I'll move on to the next stage of gameplay right away
After these predetermined scenes play out,
around the 12-minute mark,
you'll start seeing footage of me playing the game myself
Since it's the first time, I'm slowly testing the movement back and forth
This is what the situation looks like just before the game starts
In the predetermined cutscene, the protagonist delivers lines,
the enemy appears, and then the gameplay seamlessly continues
As the gameplay progresses,
you eventually defeat the boss
After the boss is defeated,
another predetermined cut scene plays
After that, even during the actual gameplay,
the developer controls the camera at various points
in the story to naturally guide the player's focus,
while the player is still in control of the game
hen, intentionally, after this cutscene,
the player needs to press a button at this location,
which appears to be a shrine,
for it to work
However, it informs the users about the location where this action occurs,
even without pressing the button
After that, the remaining parts of the story,
which are linked, continue
As you can see, cutscenes are
now used continuously, unlike in the past,
so it's important to keep that in mind
By continuous, it means that the boundary between cut scenes
and gameplay, as well as between user control, has almost disappeared
You can think of it as meaning that the connection between them has become seamless
The features for cutscene creation
that you've seen are also included in Unity
However, it's not included in the default project,
so you need to go to the Cinemachine package
in the Package Manager, navigate to the Unity Registry,
and install Cinemachine
This is the Package Manager window in Windows
Cinemachine is used for camera control
among these cutscenes
Not only camera control, but also control of objects
and other elements are all included
in the Sequence feature here
In the hierarchy, click the plus button and select Create Empty
to create an empty object
Set the position of the empty object to the world origin
The object will be named Director
This Director object will
essentially act like the director on a movie set
To direct the shooting, the director would need a script, of course
The process of giving the director a script is
essentially the process of creating a timeline asset
When you click the Create button in the Timeline window
you'll see that the Timeline is set
to attach the Director component
to the GameObject named Director
So, the asset will be saved in a folder
inside the Unity Assets folder,
which you can create and name CinemachineCut
You can think of it as
the timeline script owned by the Director
When you save it,
As the PlayableDirector component is created,
the asset we saved, named DirectorTimeline
is also assigned to it
You can actually perform this process manually as well
If you search for Director in the Add Component menu,
you'll find the PlayableDirector component
that was automatically added
Since it's already added, there's no need to add it again
I'll tidy up the windows a bit
by placing the Timeline window below the Scene view
Then, I will switch between the Scene view and the Game view
And in the Timeline window at the top,
we will set up the predetermined sequences and directions for the cut scenes
Before diving into the actual direction,
you will need to come up with a simple scenario
In the FPS we created,
the player is currently positioned at the world origin,
but the zombies are placed differently in the map
where we were testing
o, I will move three of the enemies, zombies
temporarily to the outside of the scene
So, we are going to capture the process of the player searching for the zombies
First, the camera will slowly move forward
in a shot from the front, while gradually zooming in on the player
In the second shot, the camera will
show the overall flow of the map
Finally, as you're seeing now,
the camera will move to the location
where the zombies are, in order to show our target
So, we will create a cut that first shows the player,
then the map, and finally the target,
following this sequence
Now, we will register the objects according to the scenario
and proceed with the direction
First, select the Director object
When you move
or rotate another object,
you'll see the Timeline window
switch back and forth like this
Since the Director object holds the timeline asset,
the Timeline window for it will be visible
However, when you select other objects,
the Create button will appear again
So, let's select the Director object
and ock it with the padlock
Now, even if you select other objects,
the Timeline window will remain fixed,
allowing you to direct smoothly and without interruption
First, we will create the camera direction in the Timeline
press the plus button
Add a Cinemachine Track to the Timeline
Just to note, the Cinemachine Track appears in the menu
because the Cinemachine package has been installed
First, add the Cinemachine Track
Currently, the Cinemachine Brain is
in a None state, meaning it is empty
We will connect the Cinemachine Brain
to the main camera here
Then, by dragging the main camera into this slot, Create button,
This will attach the Cinemachine Brain to the main camera
When you click the Create button,
a new component called CinemachineBrain
is added below the main camera
you can confirm that the Cinemachine icon on the right
has been added to the main camera in the Hierarchy window
In this current state,
we need three camera directions
If you look closely at the track,
on the left, there's a section displaying the object list,
and on the right, there's the timeline, which shows the flow of time
The white line is called the indicator
The timeline is aligned with the overall flow of time,
and the indicator shows where you are
As you can see, the time units are quite large,
with numbers like 30, 60, 90, 120, and so on
This is set in frame units
You can change the display
from frame units to seconds,
which we commonly use, by clicking the settings button on the right side of the window
For the Timeline,
you can zoom out using the scroll bar at the bottom
In the Cinemachine Track's timeline section,
if you right click, you'll see the option Add Cinemachine Shot
Let's add the Cinemachine Shot now
Once you add the Cinemachine Shot,
drag it to the position starting at 0 seconds to align it properly
And once again, you're scrolling the wheel to adjust the view
Right click again to add another Cinemachine Shot
Now, there are a total of two Cinemachine Shots
You can change the name of the shots
The first shot will be set as the shot for zooming in on the player
The second shot will be named MapBirdview
It will be named as a shot for viewing from a distance
Currently, you're seeing a yellow warning icon
along with the text appearing in yellow
The reason is that the Virtual Camera field here is
in a None state, meaning it's empty
If you click the Create button,
a Virtual Camera will be created
The Cinemachine feature we use
involves things like Virtual Cameras
Simply put, as you can see on the screen,
the main camera and the virtual camera are overlapping
If we move the virtual camera,
the main camera will also move along with it, as you can see, it follows
When the Cinemachine Brain is activated,
it connects to the virtual camera
through the Cinemachine Brain
So, even if we only move the virtual camera,
we can change the position
and various properties of the main camera
Once the virtual camera is registered,
the white text and warning icon disappear
Similarly, for the MapBirdviewShot,
click Create to make Virtual Camera 1
In this situation, once the timeline progresses
and the 5 second area passes,
the main camera will move to the location
of the second virtual camera
that we have set
Let's set the positions of the main camera
and the Birdview camera for the camera's representation
Select the first virtual camera and position it
so that it can view the player from a distance
After selecting the virtual camera,
go to GameObject and click Align With View
This will position the virtual camera
to face the player
However, since the /view plus from isn't visible,
it might be unclear if it's actually facing the player
In that case, you can move the indicator
to the camera view you want to display
The main camera will follow, allowing you
to preview the current view being shown
The second one will be renamed
to Map and the first one to 1
Select the second virtual camera,
which corresponds to the BirdviewShot,
and move it to a position where the map's landscape is visible
Once it's set, this position looks good
Move the track and check how the main camera moves
If you select Virtual Camera 2
and choose GameObject, Align With View,
you can confirm that the main camera is
now showing the same view as the one you are looking at
Finally, to show the zombies,
place the three zombies in the space
and add another Cinemachine Shot
This time, click the Create button
to create Virtual Camera 3
So, in total, we have Virtual Cameras 1, 2, and 3
The angle for Virtual Camera 3 is aligned using GameObject, Align With View,
ensuring the main camera can view the zombies
Now, all three cameras are set up
If you check through the Game view now,
In Camera 1, you can see the player,
in Camera 2, the map is visible,
and in Camera 3, the zombies are in view
If the cuts are too abrupt and the transitions between shots are noticeable,
it might make the experience uncomfortable for the users
To make the transition smoother,
click on Track 2 and shift it to the side
This will allow it to blend with Camera 1,
creating a blend over a 2 second interval
Now, if you observe the overall camera movement,
the camera first stays on Virtual Camera 1 for 2 seconds
Then, it gradually transitions
and moves to the area of Virtual Camera 2
In the same context, we need to do the same for Virtual Camera 3
However, the stationary duration in this section is too short
Click the right side to extend the arrow horizontally,
overlapping with Camera 3
Then, set the duration to about 12 seconds
so that it stops at the 12 second mark
This will allow the camera movement
to smoothly transition from Virtual Camera 1,
to Virtual Camera 2, and finally to Virtual Camera 3
You can adjust this interval by simply dragging it
if you want to make it longer
This is how the camera direction has been set up
We've just checked the screen that users would see through the Game view
But if you view it in the Scene view,
the main camera moves like this
Let's take a look from a bit farther away
This is the angle seen by Virtual Camera 1
It stays still for a moment and then smoothly transitions towards Virtual Camera 2
It rotates while transitioning towards Virtual Camera 2
To make it clearer for you,
I will label Virtual Camera 1, Virtual Camera 2,
nd Virtual Camera 3 here
Since the main camera is moving,
I won't label it separately
You can see the movement from Camera 1 to Camera 2,
and then from Camera 2 to Camera 3
This is what a Virtual Camera looks lik
What actually makes it work is the Cinemachine Brain
The Cinemachine Brain determines
when, where, and in which direction the camera should be
The Virtual Camera acts like a save slot,
storing the camera values for those specific times and positions
That's why, instead of manually adjusting the camera every time,
the Virtual Camera stores those changing values
and applies them at the right moments according to the timeline
This is how the Virtual Camera works and functions
This system is what we refer to as Cinemachine
Various direction techniques using Sequence tracks
Now, let's try controlling the player
Drag the player object into the track area
on the left side of the Timeline
and then add an Animation Track
You can see the Animator field, and if you scroll down,
you'll notice that the Animator component has been added
In this situation, when the camera approaches at frame 0,
it would be funny if the player is
facing a wall, right?
Since we have a path to follow,
let's make sure the player faces the path naturally
Click the "Start Recording" button at frame 0 to begin
After that, use the rotation tool to rotate the player
In the Inspector window
you'll notice that the Rotation field is
highlighted in red
So, set the rotation to 90 degrees so that the player is facing forward
That should be good now
Since the position is too far forward,
let's have the player start from a point further behind
Move the player slightly back
from the original position at frame 0,
so that the movement towards the original position
can occur smoothly
Once you turn off the recording button,
the player's position will now be saved,
oriented towards the location you've set
You can now see a dark blue color
in the Inspector window
Now, let's add an animation
for the player to run forward
until the camera looks up
To have the player run forward, set the animation for about 4 seconds
Then, press the record button again
and move the player to the starting position
the world origin, along the X and Z axes,
you can see the keyframe being created for the player's position
Since this value is now saved
You can now see that the keyframe has been created for the player's position
Let's stop recording
So, when you play it later,
you'll see that the player moves smoothly just as you see now
The awkward part here is that
since the game object is moving,
the actual player mesh data
isn't being animated,
What's important here is that our player,
by default, has a capsule shaped collider
That's why the Soldier demo is the one performing the animation
So, let's also add the Soldier demo to the setup
to the Add Animation Track
Afterward, if you check
the animation sequences in the Soldier's setup
you'll find a running animation under MoveBlend
Drag the running animation
and add it directly to the track
Now, as you can see,
the player smoothly moves
However, due to the settings of this animation file,
when you play it,
you can see that the animation
in the Animator for Soldier demo moves in the wrong direction
So, by first setting the default position value
to 0 and then playing it,
you can see that the character is doing stationary running
And then, set the Y axis to minus 90 degree
In other words, if you set it to 0 degrees, you'll be able to see the walking animation
However, while the player game object is moving forward
he animation file is not following it
At this point, turn off the Apply Root Motion option in the animation settings
Once again, set the position X and Z to 0, 0,
and configure it this way so that
the Soldier demo animation
follows the player object
Since the Run animation is
by default set to loop,
if you stretch it to the desired duration,
the animation will repeat continuously like this
While playing, take a close look at the player's feet,
as you can observe them more clearly now
The player's feet are showing a common issue called icing,
where it appears as though the feet are sliding in place while walking
To avoid this issue, the player should move a bit faster
To address this,
double-click the player’s track not Soldier demo's track
This will open the animation window
where you can control each keyframe's values
In this window, to reach the final destination faster,
reduce the time to about 3 seconds
After doing this, you should notice
that the icing issue is
reduced when the player runs
Let's compare it again with the 4 second duration
When it's set to 4 seconds,
This causes the player's feet to slide
On the other hand, when you reduce the duration to around 3 seconds
you can see that as the player runs, the feet almost stay in place
at the initial landing point
When you view it through the Game view, it looks like this
From the stationary screen, the player moves forward
Meanwhile, the camera shows the distant background
While the camera is focused on the distant background,
the player is still in a shooting stance
Then, it finishes by focusing on the zombies
As the movement unfolds, let's create
a fun and interesting direction using the Virtual Camera
Since the camera is stationary while the player is running
It looks very static, doesn't it?
At this moment, select camera number 1
Camera's noise section is set to None
Give it a value of Basic Multi channel Perlin
and Give a noise profile of
Handheld wideangle strong in the bottom
in the preview, Handheld method
do not use indicator
and click play button,
you can see the screen shaking before moving
Other than this, there also is widely used
shaking effect based on 6 axes
Feel free to find effects that you'd like to use
If you look at the player now,
the screen is not centered to the player character
of course the player moves towards the center,
right now if you see,
screen center and the player center is a bit off
Here, you can choose Aim part as Composer
and then designate the Look At part
as a Player Object
then the yellow dot is looking at player's pivot
So, use the offset value to set 0 5 for Y axis
it actually should be 0 3 to be able to see the head
if you set up with this value, no matter where player is running toward,
this yellow dot would be
fixed to player's head
Now the screen is fixed to the player until the blending part
through blending the camera transition smoothly
Now, let's create a simple
Fade in and out device
First, under Cancas insert and image to UI
Use Alt to fill the added image
and stretch the anchor points
in all directions
and fill it with the black color
Name the image as IMG FadeInOut
and register it by dragging it like this
added it as an animation track
Typically, for Fade in and out,
we make it so that from black screen, it gets brighter
or from normal screen, the image gradually disappears
That's how Fade in and Out are utilized
to the IMG FadeInOut enable record button
There's this property, color, in the image section
if you move the value of alpha here,
the change in alpha value is now recorded
So let's click record button to end it
You can see that the keyframe has been entered
If you double click this,
you can see that the color value of the image
shows 1 at frame 0 when you slightly move the screen to the side
If this is set to 0 for about 2 seconds
If you play it gradually like this
It should be more than 2 seconds
If you play it again from frame 0,
you can see the black color gradually disappearing from the screen
You can freely drag this to make it longer
and adjust the time as you wish
If you play it again, you can see that
when you reduce the scroll significantly,
this is roughly the 1 second mark, and this part lasts for about 1 second
And if you want it to change over 2 seconds,
you can set the interval like this and play it again It will gradually brighten
When doing a Fade In/Out, it would be better
to place the 1 second interval where users can see the black screen for a short time,
and set the 3 or 4 second interval here
This way, users will experience a smoother and more natural Fade In, Out
If you scroll the wheel a little more,
we were originally making it fit into the 12 second interval,
so place it around the 12 second mark
Then, copy the color value that was 0 in that section by Ctrl C
and paste it by Ctrl V at the 10-second mark
This way, the value will remain 0 until that point
let me increase the window
Place it at the 1 second mark,
then move the indicator and press Ctrl V
This will organize the Fade In, Out sections like this
let's trim it a bit
Since this section is too long, let's shorten it a bit
Now, when you play it, the Fade In,Out will gradually appear,
showing the defined situations, and then it will end
We've created the cut scene like this
Now, let's see how we can use
the created scene in actual gameplay
First, if you select the Director game object,
you'll see that
Play On Awake option is checked
So, simply pressing the play button
will trigger the Cinemachine
before any other code
This way, we can't control the player directly
The problem occurs when it ends
It ended like this when it was finished
And then it goes back to frame 0
The issue is that we need to continue playing
But the Cinemachine brain is still active,
so the virtual camera is continuously
following the player
We will try to control this through code
First, let's create a C sharp file in the Scripts folder
The newly created file
will be named DirectorAction
Next, we'll assign the DirectorAction file
to the Director game object
Double click to open it in Visual Studio
To use the basic Cinemachine features,
we first need to set up the namespace
The Playable item provided by Unity Engine is
necessary because it contains information related to the Director
More specifically, it's needed to access
the PlayableDirector component information
For Cinemachine, we declared it this way
in order to control the Cinemachine Brain directly
At the start, we created a variable of type
PlayableDirector to store the component
We created a variable called pd for the PlayableDirector,
and this corresponds to the Director game object
Then, into this pd,
we get the PlayableDirector component
and command it to play
This is important now, in the update, what we will do is
current time, the time being referred to here is
the playback time of the ongoing sequence
So, when the timeline bar is at 0,
the value 0 will be output,
when it's at 2, 2, when it's at 3, 3, and at 8, 8,
continuing in this way
The Duration refers to
the last playback time where the blue marker is placed
This is recognized as the duration
So, if the current playback time
reaches or exceeds the final play time
this is a safety measure to allow for a slight increase
When the current playback time equals the Duration,
it means the sequence has finished; one cycle is complete
So, disable the Cinemachine Brain
on the main camera by setting it to false,
which frees it from the virtual camera
Additionally,
set the pd game object to inactive
by setting it to false, then what do we do?
ensures that the pd no longer functions
We just created the code in a simple way
Now, let's play it
and see how the components behave in action
When you press play, and think about the situation right after,
both the Director and
the Cinemachine Brain will be active
Let's go ahead and play it
Right after pressing play,
the Brain will be active, and the Director will also be activated
In this state, the timeline
will continue to progress, with the current time moving from 8s, 9s, 10s, and so on
Once it reaches the Duration of 12 seconds,
the Director will be deactivated,
and the Cinemachine Brain on the main camera
will also be deactivated
By the way, the Director has
a Wrap Mode, which we changed to Hold,
and we disabled Play On Awake
To play it at the desired time,
in this state, and move around
Let's turn off the UI briefly,
If we turn off the IMG FadeInOut UI in the Canvas,
you can see that the player is actually
functioning and moving like this
But since the IMG FadeInOut was turned on, it wasn't visible before
From your perspective, you might think
that we can just set the UI to false in the code
when we set Active value to false for everything
However, if we do that,
some things would be controlled through the code,
while others would be controlled through Cinemachine by adjusting the alpha value amking it inconvinient
hat's why we will drag the IMG FadeInOut
and add an Activation Track this time
Then, an Activation Track will be created
What this track does is quite simple
Within the Activation Track section,
the IMG FadeInOut that we created will be activated
On the other hand, once it goes beyond the Activation section,
the IMG_FadeInOut object
will automatically be disabled
That's why, by setting it to active
only during the entire playback period,
it will automatically turn off at the end of the active period
allowing the screen to naturally disappear
So if you play it,
As you can see, the image remains active
because it's within the active section
When the fade out happens and it ends,
many mistakes can occur
Since it only turns off when it exits this section,
if you try to match the end exactly, it won't end correctly
Now it doesn't disappear
So, when using the Activation Track,
if you shift the end by just one frame inward,
since it will turn off as false setting,
This makes it easier to organize, and When you play it,
everything will be properly cleaned up like this
We briefly covered how to create cutscenes using Cinemachine,
how to move the camera,
and how to use tracks
The most basic approach is this
Controlling this manually with code can be difficult
Right now, we've applied
animations for a total of 5 objects
within the timeline asset
If we were to do this without using a timeline asset,
we would need to create assets and manually connect them,
then control them through separate functions
A lot of unnecessary assets
and one time assets would be created,
and managing them without missing any files
to properly organize the sequences would be challenging
By using the timeline feature for various sequences,
you can keep the assets limited to just one,
and since everything is managed in one place,
it makes editing much easier and more convenient for everyone
I hope that as you create content,
you'll be able to achieve great results
by utilizing these various features
In this lecture, we created a cutscene using
Cinemachine and Sequences
We explored how to manage complex and diverse scenarios
through sequence tracks without the need for scripts
When creating a cutscene, it's important to focus on clearly
conveying the intended message , and attention is needed
to ensure the goal is communicated effectively
This concludes the lecture on the beta version
Creating cutscenes using Cinemachine and Sequences
Cut Scene, A noninteractive video sequence that directs elements such as the opening, ending, and key story moments
In the past, cutscene videos and gameplay 3D were used separately
Recently, the boundary between cutscenes and gameplay has become blurred
Cutscene scenario flow Player zoom in to Show map overview to Confirm target
Cutscene creation, In the Window menu, go to Package Manager, select Cinemachine, and click the Install button
Window, Sequencing, Select the Timeline window
Create an empty object in the Hierarchy window, align it to the world origin, and rename it to Director
Create a CinemachineCut folder in the Assets directory, and save the DirectorTimeline.playable file inside it
In the Timeline window, create a Cinemachine Track, and drag and drop the main camera into the Cinemachine Track
Right-click in the Timeline window, then select Add Cinemachine Shot to create a slot
Click the Create button on the right side of the Virtual Camera in the Inspector window to create a Virtual Camera object
Create two more Virtual Camera slots, one for showing the map overview and another for the zombie
Drag the Virtual Camera tracks to set them up for blending
Check the movement path of the Virtual Camera in the Scene view
Various sequences using the Sequence Track
Player direction, Drag the Player object into the track area on the left side of the Timeline
Add it with the Add Animation Track option Then, click the Start Recording button at frame 0
Change the Y rotation value to 90 to make the camera face the desired direction
Move the player's position backward
Place the indicator at the 4 second mark, click the Start Recording button, and move the player to the position where the X value is 0
Drag the Soldier_demo object into the Timeline and add it to the Animation Track
Drag the demo combat run animation and add it to the Soldier demo track
Set the X and Z position values of Soldier_demo to 0, and change the Y rotation value to 0
Uncheck the Apply Root Motion option for the Soldier_demo animation, and set the X and Z position values to 0
Fade In, Out direction
In the Hierarchy window, select the Canvas item, then choose UI Image and set it to IMG FadeInOut
Change the Anchor preset to Stretch for both horizontal and vertical, and set the Color to black
Drag the IMG_FadeInOut object into the Timeline and add it to the Animation Track
Click the Start Recording button on the IMG FadeInOut track, then adjust the A (opacity) value in the Image component
Set the Fade In, Out section
Applying cutscenes to actual gameplay direction
In the Project window, go to the Scripts folder, select Create - C sharp Script, and name it DirectorAction
Select the Director object, then drag and drop the DirectorAction script into the Inspector window
In DirectorAction.cs, set up the namespace for controlling Cinemachine
Create a pd variable to control the PlayableDirector
To disable the Director object and the main camera's Cinemachine Brain upon ending
Set the Wrap Mode of the Director object to Hold and uncheck Play On Awake
Drag the IMG_FadeInOut object into the Timeline and select Add Activation Track to add it
Set the Active slot to end about one frame before the entire timeline ends