Using Unity Timeline to Create Video Game Cutscenes
The Unity Timeline is an animation track that allows you to coordinate a sequence of events. You can set up camera behaviors to run in your timeline alongside a series of character animations, the end result being a programmed cutscene in your game that runs in real-time. There are a lot of cool things you can do with timeline, so let’s dig in!
When creating cutscenes, two Unity features are commonly used in concert. That is the timeline and the cinemachine. While the timeline allows you to sequence the events of your scene, the cinemachine camera allows you to dynamically control the camera behavior. For example, if your cutscene had multiple characters animating in a dialog sequence, the timeline allows you to sync up the character animations to run at the same time as the dialog audio and a cinemachine camera behavior that switches the camera view back and forth between each of your characters as they are speaking. It takes a bit of set up to compose these shots, but the end result is a compelling story element for your game and it is absolutely worth doing.
In this post I’ll focus on using timeline to tie your cutscene elements together once you have your actors and cameras in place. For setup of those elements see my guide from yesterday which outlines how to compose your scene with the cinemachine camera.
Using Timeline
In timeline we can control all of the elements required for our cutscene. We can pan our cameras and decide when to switch between them, we can activate and disable our actors and any other objects, and we can layer in audio such as music or dialog — everything you need for a great cutscene.
To get started be sure to gather all of the assets correlated to the cutscene into one top-level game object. Select that object and in the timeline window click “Create” to create a Director component and Timeline asset. Create a new folder for Timeline and save to that folder. This will create an animation track in the timeline window as well as a playable director on your top-level cutscene game object. This playable director component will control when your cutscene timeline is enabled and begins to play. By default “Play on Awake” is enabled but that will eventually be deselected when we are ready to turn the cutscene on via code.
Next we need to get a handle to our cinemachine brain within the timeline track. In the timeline window click + (add) then select Cinemachine.Timeline and Cinemachine Track.
This creates a placeholder for a Cinemachine Brain, and we can drag our main camera into that slot to grab the brain attached to it. One setting you might want to adjust based on preference is whether the timeline is tracking in seconds or frames. This can be updated via the gear icon in the top right of the timeline window.
Next let’s add our first virtual camera and set a duration for how long to maintain the shot. Right click in timeline and select Add Cinemachine Shot.
On this new CinemachineShot track there is a component looking for a Virtual Camera. Add the first virtual camera for your cutscene to this slot. Then resize the track for the intended length, in my case about 2.5 seconds.
Now we can add our second camera clip by right clicking in timeline to the right of the first shot and repeating this process.
If we play this timeline, we can now see our camera cut to the next view at the 2.5 second mark.
There is another feature we can use in timeline to blend the shots for a smoother transition. To create a blend, simply drag your second shot over a portion of the first and you will see a new visual for the blended area, indicating how long the blend will last. This creates a camera translation from the first position to the second over the allocated amount of time.
Pretty neat! Now let’s add our actors to the timeline to be able to preview the animation along with the camera transition. In the timeline window we click + again, choose Animation track, and then drag in our actors game object which will pull in its Animator component.
Then we need to attach the animation clip to this track. Click the 3 dots dropdown and choose “Add from Animation Clip” and select the appropriate animation, in our case “GetCardAnimation”.
This will allow us to preview the animation alongside the camera cuts from within the editor.
Panning the Virtual Cameras
Now that we have our actors and camera angles lined up, let’s add some motion to the scene by animating our camera positions. We can create a pan effect for a camera by creating a new animation track for that camera. We do the same procedure to add a new track by clicking + and then Add Animation Track, and dragging in the camera we want to animate. Because our camera does not yet have an Animator component it will prompt us to add one, which we need to do.
Now we can press the red record button on that camera animation track and record our starting and ending keyframes. The basic concept here is that you choose a position where the camera game object should start, and at the end of that camera’s run time choose the position at which it should end. The software will automatically calculate the path to travel and speed based on any keyframe points you provide.
To set the first keyframe point ensure the white marker is at the starting position of the animation (0:00 seconds here) and modify the transform values of the camera object in the inspector. Be sure to edit both the position and rotation so that all data for your starting position is saved in this keyframe. Then drag the white marker to the end point for the camera clip, right before it transitions to the next shot, and in the scene view reposition your camera with Ctrl+Shift+F to the desired ending position, which will create a new keyframe reference point for where your camera should finish its pan.
You can see that by creating an ending point that has both the forward position and rotation modified it creates a cool angular panning effect. Now we can stop recording to save our animation. If you need to modify the keyframe position in the future, double click the animation track to pull up the Animation window, in which you can delete or reposition the keyframes as needed.
Our first camera animation is looking good, now let’s set up the second camera which will have focus on the theft action of the keycard. This one we can set up using the LookAt feature of the virtual camera. To use LookAt, we need to set up an object to follow, which we can do with a new empty gameobject. We drag this object into position above the keycard, and then on the MidShot camera we drag our new LookAt object into the Look At field.
Now we have an object that we can animate which our camera will follow due to the Look At setting. You can see as I move the object in the scene view our game view camera adjusts its pan to track it:
Next we create a new animation track and drag our Keycard_LookAt gameobject into it, which will add an animator component. Click record, and we can set up the keyframes. In this case, we want a beginning point (top of pan), a mid point (bottom of pan) and an ending point back at the top.
The keycard is a little hard to see, so let’s also animate the camera to pan in closer while maintaining the LookAt.
This way we can focus on the action as it happens — we get close on the keycard as it is stolen and then pan back to our hero to begin our transition out of the cutscene. I’ve also added horizontal and vertical damping value of 6 here to smooth out our camera movement along the track. An advanced setting also exists to control the timing and intensity of your animated motions, which is to adjust the animation curve. This can be found in the Animation window alongside the dopesheet and gives you even more granular control over smoothing out your animations.
Timeline Activation Tracks
Activation tracks can be used to enable or disable gameobjects at different points in your timeline. In this case, we want to disable the keycard gameobject as soon as it is swiped by our player thief character. Under the Timeline Add menu we select “Activation Track” and then locate our gameobject to control and drag it in.
Now what we can do is reduce the length of the “Active” section of the track to only last up until the point we want our card to disappear, at about 3.5 seconds
Now when our actor swipes the card, it disappears!
Camera Fade To Alpha
Now that our cutscene is pretty much ready to go, there is one more animation we should add to smooth out the transition between our game and our cutscene. This is called a camera fade to alpha, and is essentially just a short fade in from / out to black at the beginning and end of our cutscenes.
Step 1 is to create a new UI element which will be our black screen. Right click in hierarchy then select Create -> UI -> Image. In the color component set the color to black. Then in the anchor presets select the bottom right option to stretch in all directions and set all of the position values to 0. This will give us a full screen black image. Finally on the new canvas component update the scale mode from constant pixel size to scale with screen size to be sure this renders properly on all devices.
Now we can animate the alpha channel of this black screen with our timeline. Create a new animation track and drag in our black screen image, creating a new animator component in the process. Move the white timeline location bar to 0:00 and hit record. Then set the first keyframe by adjusting the alpha slider on the camera fade image object to reset it to 255 (100% color, 0% transparent). At the half second mark we add a second keyframe to reduce the alpha to zero and this will create a half second fade in from black at the beginning of our cutscene.
Voila! Our cutscene is ready for the big (read: small) screen. As a finishing touch be sure to nest this canvas inside your top-level game object for this particular cutscene —we will use a unique canvas for every cutscene to be sure our activation behaviors do not impact one another across scenes. Then disable this top-level cutscene object so that we can later activate it with code with a collider at the appropriate time, and we aren’t stuck with a black screen in our game view while we build the rest of the game!
That’s it for this intro to timeline. I’ll cover some advanced features such as creating a dolly track in a subsequent guide. See ya there!
