Cinematic cuts — Timeline in Unity
This article takes forward the introduction on Timeline here.
A cutscene is a video clip that carries forward the story of a game.
Here is a a video that has combined all cutscenes from Batman Arkham City.
Now, coming back to the point.
There are two ways to make cutscenes.
- Attaching them as a video files to the gameplay.
- By using real in-engine game objects. (Do not get confused! When I say real game objects, I mean the literal game object.)
Because, the video files have the creative liberty to use High fidelity graphics of the same character and make it look as per choice. Therefore, many a times, the cinematic trailer of a video game looks dramatically different than the actual game as those videos are not using literal game objects. Rather, they are made as a separate project with different tools.
What is the limitation here?
The external footages don’t scale with time when the hardware gets powerful. It means, they are not dynamic.
However, the in-engine cutscene are by nature dynamic. It means, if the game studio decides to change the narrative to something else within a few months of release, they would also be able to change the cinematic cuts without much effort since they are using the same game objects.
However, if there were external cutscenes, they would have to get new scenes created from scratch.
On the other hand, these in-engine scenes have two basic requirement.
- They have to be optimized to make them work on maximum number of platforms.
- They have to be debugged.
I highly recommend going through this talk for understanding more about the dynamics in between the gameplay and cutscenes.
Now, let me take you through making a simple cutscene in Unity using timeline.
- To go ahead, along with the basic idea of Timeline, another tool called as “Cinemachine” is also required.
So, What is cinemachine?
Well that’s a mouthful !
Basically, cinemachine allows to deploy virtual cameras in a scene. The main camera would use those virtual camera locations to run the composed scene by the game designer/director.
This in essence would look like how camera angles change in a movie scene having multiple actors.
Why is it needed with Timeline?
Because timeline allows to blend all these cutscenes together like an editor to deliver one full scene for the game designer/director.
2. The director has chosen to create a scene resembling to the frames composed below.
3. Here is the implementation using the combination of timeline and cinemachine.
- Install cinemachine in the project by getting it from package manager. (This asset is brought into the package manager from the asset store.)
- Get actors in place with their animation attached as needed.
- Add a virtual camera from the cinemachine menu.
The latest version of cinemachine allows to first choose the right frame and second, add a virtual camera which would immediately compose the same frame that you were first aiming for.
Here is the frame 1:
Here is the frame 2:
- Select the actor prefab and then Go to Window-> Sequencing -> Timeline. This would prompt you to add a timeline asset. Save it as per choice in your project folder.
- Once you save it, you should get the timeline window tiled up as per preference. The final setup should just contain the playable director.
- Go ahead and grab the main camera and drag it into the timeline palette by selecting the option of “Add cinemachine track”.
- Select the cog at the left end corner of Timeline window and switch to seconds from frame.
- Drag both virtual cameras into the timeline. (Targeting a 5 seconds scene.)
- Add an animation track and drop the actors’ prefab.
- Right click on the left most 3 dots on this track and select the option “Add from animation clip”.
This brings the basic cutscene in place. Have a look here :)
Now, the following few steps adds some nuances into this scene.
- Add an additional animation track to deploy camera pan.
- Add an animator component to the virtual camera that should pan and drop it into the track.
- Hit the red record button and change the camera of the position as per choice in the timeline.
- Stop recording and preview the shot. You should see a perfect panning effect from the point the shot begins to the point you changed its position.
- Add a UI image element in the hierarchy and change the rect transform to full stretch. Also, change the Left-Top, Right-Bottom position to 0.
- Change the color property to full black by going into the albedo option.
- Add an animation track in the timeline and drag the image object in there.
- Change the color property via timeline to full white as per choice.
Here is what the scene would look like with these two additions into it :)
Lastly, let me show how to use the look at property of a virtual camera to implement the 2nd framing shown in the pre visuals.
- Create an empty game object and put it into the actors prefab. The location is approximate to the center of the mid shot frame.
- Select the mid shot virtual camera and in its’ look at property, drag this empty game object.
- Select the mid shot virtual camera and arrange the dead zone height and width which keeps the object in focus.
- So, the change in object position from this dead zone would become the driving factor of animation.
- Add an animation track in timeline and drop this game object over there. If you have not added the animator component, it would ask you to add it.
- Now, change the position in the timeline of the game object to take it out from the dead zone and bring it back to its’ original position to make the full panning shot.
Here is what it would look like at the end :)
Thank you very much
