Introduction to Timeline in Unity

Objective: Explain and show what timeline is in Unity

Games have developed a lot over the years. Years ago a game was a set of characters and game assets set up with logic and code to run through game mechanics. Over the last number of years, games have become more cinematic. They now have intricate stroies and plots and theses contain so much more than just game logic. Games now have introductory tutorials, animations and some even have extremely complex cutscenes which move along with the games storyline.

Unity provides mechanics to create such cutscenes. Welcome to Timeline and Cinemachine. Timeline is an animation track which can be used for a sequence of events. These events can range from a variety of time lengths such as a ten second game cutscene with audio and animation.

Cinemachine is a dynamic camera system that allows you to create cinematic shots through the use of virtual cameras. Cinemachine can be seen as the director. The two work in parallel to blend and create dynamic cuts.

To open up Timeline(In Unity 2018, the version for this project), go to Window, Sequencing, Timeline. To make an efficient workflow we bring timeline down on its own below the game and scene views and then place the game and scene views side-by-side.

To create a new timeline for our cut, select the sleeping guard cutscene from the hierarchy and in the timeline panel, click on create.

* as you can see in the above image, between the composing a cutscene and now we created an empty object called sleeping guard cutscene, reset the positioning to 0,0,0 and placed the actors and cinemachine cameras inside the new object. The cameras were also placed inside another empty object renamed cm virtual cameras.*

You will notice an Animation Track was added to the Timeline and an Animator component and Playable Director component were added to the Sleeping Guard Cutscene object in the hierarchy. For now we only need the Playable Director component so delete both the Animator component and the Animation Track.

To get started animating between the virtual cameras we set up need to add a Cinemachine Brain to the Timeline. The fastest and easiest option is to drag the Main Camera into the Timeline and select add Cinemachine Track and this will assign the Cinemachine Brain needed.

As you can see in the above image the timeline is reading in frames. We can switch this to seconds using the gear icon for better control of timing.

Next right-click in the Timeline and add a Cinemachine Shot.

If you click on the newly created shot, inside the inspector, you will notice the shot is looking for a Virtual Camera. Drag the a Virtual Camera (We will use the CM OTS Shot). Create one more Cinemachine shot and drag the other Virtual Camera in there (CM KeyCard Shot) then drag the size of each shot to postition how long each shot lasts.

You can move the slider above the shots to see the transition between shots. If you drag the shots over each other, you get a blended shot instead of a cut.

You can see where the blend begins at 1:30 and ends at 3:00 (seconds) and how the camera moves instead of the cut we had before.

We wont be using the blend for now so drag the shots back to simple shots.

Next, in order to get our Actors animating during the scene, we need to add an Animation Track to the Timeline. We can then drag our Actors prefab into this track as it has Animator and Animation applied. Next on the hamburger menu on the Animation Track, the add from Animation Clip and select the Animation that we want to attach (Get Card Animation). This also gives us the length of the animation so we can adjust the previously created shots to match.

The next part is setting up the camera panning to match the Previs Elements.

We need to add another Animation Track for the first virtual camera. There is no Animator component on this virtual camera so it will add one when we drag it into the Animation Track. Next click on the record button on the Animation Track and set the first key frame point at the start of the track by setting the position in the transform of the Virtual Camera. Then slide the Timeline slider along to find where you want to have the top of the pan. Here set another keyframe. We change the x, y and z positions but we also move the rotation on the x-axis and y-axis for more effect.

For the second part of the shot using the second virtual camera, we will use the look at function we mentioned earlier. To set this up we need to create an empty object inside the Actors prefab so that it’s local to them then rename it VC_Look_At and set its position for the shot. Add an Animation Track to the Timeline and drag the Look At component into it again getting an Animator added as there wasn’t one already. Keyframe as before only this time you will notice more of a snapping effect on the camera. This where we change the Damping effect in the CM KeyCard Shot component where we looked at the zone and priority earlier. The damping setting will help smooth out the camera transitions. For more smoothing and modification, you can edit the curves in the aniamtion dope sheet by double clicking the Animation Track.

We want to remove the KeyCard when the Animation shows the actor take it. For this we add an Acivation Track instead of an Animation Track. We then drag the card element from the Actor prefab into this Animation Track. There is an active element on the track instead of where we place keyframes. Set this to Active for the entire animation until you identify the time that the card should be removed. Once you have your time set drag the active clip up until that point de-activating the card when collected.

Finally we want a camera fade for more dramatic effect. For this right-click the hierarchy and add a UI Image and rename it Camera_Fade_Alpha. Set the color to black in the image settings. Set the anchor point to free mode and set all values to 0 to cover the full screen. Set theb Canvas scaler to screen size instead of pixels. Move back to the Timeline and add one more Animation Track and drag the Camera_Fade_Alpha into it. Hit record and open the color and set alpha to full setting the first keyframe then slide to about half a second and open the color again and set the alpha to 0.

We now have our cutscene created with Timeline and Cinemachine.