Introduction to Unity Timeline

Developers often use cutscenes to tell parts of a game’s story and engage the player. Some games use specially pre-rendered animated scenes with higher detail models, while others use the actual in-game models. Using in-game models can be a great cost and time saver to you because you don’t need to make new models, rigs and animations just for cutscene story moments. And just because you’re repurposing your existing assets doesn’t mean that you need to skip the special effects or drama! Unity has a rich tool to help you make engaging cutscenes — the Unity Timeline!

In this tutorial, you’ll learn about Timeline and how to make cutscenes with animations and camera changes.

Getting Started

Download the starter and final projects using the “Download Materials” link at the top or bottom of this tutorial.

Open the Starter Project file and load the Main scene. This is your starting point. It features the hero standing on the tower looking out into the world:

With your help, he will leap off of the tower, turn, walk towards the treasure chest and then kick open the chest. The camera will also take on new positions throughout these animations. Here is what the final scene will look like:

What Exactly Is a Timeline?

You will accomplish this tutorial using Unity Timeline — but what is a timeline? A timeline is a literal GameObject with a timeline component, which is editable in the Unity Timeline window that controls the animation keyframes and object life cycles. When you are making a cutscene with Unity Timeline, you are setting all the animation keys you will use, as well as determining when they need to fire. For this tutorial, you will also use AnimationController, which can be thought of as a super-set of animation keyframes.

Whenever a character performs an animation, such as walking, every single vertex on the object that moves needs to have it’s path mapped out. You won’t be worrying about creating model and rig animations in this tutorial — it’s already done for you. But it’s helpful to know that, whether you are manually setting an animation keyframe or using an AnimationController animation, they are all basically the same thing: The position of objects at a given moment in time. A timeline is the conductor that coordinates all of these movements to create a scene. This will all make sense as you dive into using Unity Timeline.

Before diving deeper, it’s helpful to get an overview of the Timeline window. See the image below and the corresponding numbered descriptions:

1. Timeline Asset: This is a track that is linked to a GameObject that exists in the hierarchy. It will store keyframes associated with that GameObject in order to perform animations or determine whether the GameObject is active.
2. Associated GameObject: This is the GameObject that the track is linked to.
3. Frame: This is the current frame in the timeline that has been set. When you want to change animations, you will set the keyframes at the starting and ending frames.
4. Track Group: As scenes grow, so will the number of tracks. By grouping tracks, you can keep your tracks organized.
5. Record Button: When this is active, you can change the current frame and set the position and/or rotation of the GameObject in the scene, and it will record the changes.
6. Curves Icon: Clicking this will open the Curves view to give you the finer details on the associated animation keyframes so that you can adjust them as needed.

Don’t worry if that felt like a lot to take in at once — you’ll revisit the above during the tutorial. The most important thing to know, at this stage, is where the Timeline window is and that, by selecting the Timeline GameObject, you can access the Timeline window.

Lights, Camera, ACTION!

With the main scene loaded, press Play. You should see the hero idling on top of the tower:

This is the default animation set in the Animation controller. This tutorial will leverage animations that have already been set up for you, and you won’t need to worry about the inner workings of models, animations or controllers. But if you want to learn about that process you can take a look at our Introduction to Unity Animation tutorial.

Creating the Timeline GameObject

The first step is to create the Timeline GameObject. Create an empty GameObject by right-clicking (Command-clicking on a Mac) the Hierarchy window and selecting Create Empty. This will add a GameObject to the scene and select it:

With the GameObject still selected, open the Window menu and select Timeline. This opens the Timeline window. Click the Create button and it will open up a Save dialog box. Rename the file to Timeline and click Save:

Rename the GameObject to Timeline by clicking it, pressing F2 and typing in Timeline:

You’ve now created the Timeline GameObject that will coordinate all the animations and camera changes for the cutscene. Under the hood, Unity has saved an Asset file called Timeline.playable to disk. On the Timeline GameObject, Unity added the Playable Director and Animator components.

The Playable Director component contains the Playable field that is bound to the Timeline asset that you’ve just saved. The Animator component that Unity added would, in theory, allow you to animate the Timeline GameObject, but you won’t be doing that, so you can just ignore this.

Before moving on, you’ll want to drag the Timeline tab to the bottom of the screen. This will allow you to have the Scene and Timeline windows open at the same time:

Select the Timeline GameObject and return to the Timeline window. Right now, there is an Animation Track for the Timeline GameObject. This won’t be needed, so you can select it and press Delete to remove it:

Animating the Jump!

You are now ready to animate. Expand the Hero GameObject to reveal the ModelGameObject. Select the Timeline GameObject. Drag the Model GameObject onto the Timeline window; this will prompt you to select a track so select Animation Track. Repeat this step for the Hero GameObject:

Recording Keyframes

Since the Hero GameObject track represents the position of the hero, you need to set it’s position as a starting keyframe.

Select the Hero track in the Timeline window and click the Record button (red circle) to begin recording. Select the Hero GameObject in the Hierarchy window and set the X Position to -1, then immediately set the X Position back to 0.

Go back to the Timeline window and click the Record button on the Hero track to stop recording. This has now added a keyframe for the starting position of the hero:

In this project, the hero was already in the position where he needed to begin. However, until you actually change the unit position, it won’t register as a keyframe while recording. So if you ever need to set a keyframe while recording for a position where the keyframe already is, just move it and move it back to register it.

An easy way to do this is to set the X Position of the object to -1 of its current position, then set it back. You will use this trick a few times in this tutorial.

Next, you will have the hero idle for 100 frames before he jumps off of the tower. Currently, you have only set the starting position of the hero, but you need to set the hero to the same position (i.e. the top of the tower) 100 frames later — otherwise, Unity will start interpolating a movement animation immediately.

Just as before, select the Timeline GameObject — this time, however, you should click the frame box at the top and type in 100. This sets the keyframe to frame 100.

Click the Record button on the Hero track. Select the Hero GameObject and, under Transform in the Inspector, set the X Position to -1, then immediately back to 0. Click the Record button once again to stop recording.

Now you have setup the Hero starting keyframe and are in a good place to continue on with animations.

Adding Animation Clips

Setting Position Data

First up, you’ll need to set your position data.

Click the Timeline GameObject to select it. In the Timeline window add an Animation to the Model track by right-clicking (Command-clicking on a Mac) the Model track and selecting Add From Animation Clip. Now, select the Idle animation:

Next, you’ll animate the hero to jump off of the tower, but you first need to move him up and over the railing, then down towards the ground.

To do so, first select the Timeline window and then set the frame to 138. Click the Record button on the Hero track. Now, select the Hero GameObject. Under Transform in the Inspector, set the Y Position to 3.934 and the Z Position to 1.97.

Return to the Timeline window and set the frame to 176. Select the Hero GameObject again and set the Y Position to 0 and the Z Position to 5.159. End recording by clicking the Record button:

Save the scene and press Play to see your work!

Adding Animations

You’ve set the position data but not the animations to go with them. You’ll sort that out next.

With the Timeline window selected, right-click (Command-click on a Mac) the Model track and click Add From Animation Clip, then select Jump. This should add a Jump animation right next to the Idle animation.

Drag the right side of the Jump animation to set it to frame 176. Now, you’ll add another Animation Clip — only this time, you’ll add the Land animation (you don’t need to change it’s length; just add it):

Save the scene, press Play and behold your work!

Adding Cameras

It’s a little hard to follow the action after the hero makes the jump off of the tower, so now would be a good time to start working with cameras.

Using the Hierarchy window, rename MainCamera to Camera1. Select the Timeline GameObject. Drag Camera1 onto the Timeline window, which will prompt you to select a track; select Activation Track. Drag the Active bar for the Camera1 track so that it finishes at frame 157:

The Activation Track is what determines whether a GameObject is active or not during a scene. Your main camera will now turn off after frame 157. Press Play and have a look:

You will now add another camera — only you will position this camera overhead so that it can get a bird’s-eye view of the hero after he’s jumped over the tower railing.

In the Hierarchy window, select Camera1, and duplicate it by pressing Control-D (Command-D on a Mac). Rename the duplicate to Camera2 and set it to be disabled.

In this tutorial, you’ll use two more cameras, so make them now by following the same steps; rename them Camera3 and Camera4, respectively, and be sure to disable them. After you are done, all the Camera GameObjects, except Camera1, should be disabled. This is what your hierarchy should look like now:

Now, you’ll position Camera2. Select Camera2 and below Transform in the Inspector, set its Y Position to 10.75 and its Z Position to 2.84. Set its X Rotation to 79.5:

As with Camera1, select the Timeline window and drag Camera2 from the Hierarchy onto it; again, this will prompt you to choose a track so select the Activation Track. Now, slide the Active bar so that it begins right after the end of the Camera1 activation (frame 158). Drag the right side of the Active track for Camera2 so that it ends at frame 216.

Save the scene, press Play and watch as your scene now has a camera cut!

Time to Get Treasure!

Facing the Treasure

Now that your hero has landed on the ground, he should turn towards the treasure chest and start walking.

Select the Timeline GameObject and set the frame to 202. Click the Record button on the Hero Track to begin recording.

Select the Hero GameObject and beneath Transform in the Inspector, set the Y Rotation to -1, then immediately back to 0 to set a starting keyframe for the Hero GameObject’s rotation.

With that complete, again select the Timeline GameObject and set the frame to 216. Again select the Hero GameObject and, beneath Transform in the Inspector, set the Y Rotation to -90.

The hero should also be idling during this time, so add an Idle animation to the Model Animation Track, and have it last until frame 216:

Now the the hero has landed safely and is looking at the treasure. It’s time to head over and open it!

Approaching the Treasure

Select the Timeline GameObject and set the frame to 216. Click the Record button on the Hero track to begin recording.

Select the Hero GameObject and beneath Transform in the Inspector, set the X Position to -1 then back to 0 to set its starting position keyframe. Then, on the Timeline, set the Hero track to frame 361.

Return to the Hero GameObject and, beneath Transform in the Inspector, set the X Position to -6. Return to the Hero Track and end recording.

Finally, add a Walk Animation to the Model using the same steps as above, and extend it to frame 361:

You might notice that it looks as though the hero has walked past the treasure, but this seems to be an issue with the Timeline preview because, as you will see shortly, the hero will walk right up to the treasure and stop.

Rather than just have the hero walk with Camera2 hogging all the action, you can now use Camera3 to do a behind-the-hero shot.

To do this, beneath the Main menu in the Hierarchy window, select and drag Camera3 over the Model GameObject, which is beneath the Hero GameObject, to set it as a child.

Set Camera3‘s position to (X:0, Y:2.06, Z:-2.5). Set it’s Rotation to (X:0, Y:0, Z:0). Your hierarchy should look like the following:

With Camera3 childed to the GameObject Model, it will now follow along all the GameObject Model’s movement from behind. However, Camera3 still needs an activation track so that it is active at the right time.

As you did with Camera1 and Camera2, drag the Camera3 GameObject onto the Timeline and select Activation Track. Set Camera3‘s start frame to Camera2’s end frame, and set Camera3‘s end frame to 361:

Now, save the scene, press Play and see how things play out:

Almost there! Now, the hero just needs to open the treasure by… kicking it, of course!

Opening the Treasure

For the final shot, you will use Camera4, setting it up as you did Camera1 and Camera2.

Drag Camera4 on to the Timeline and add an Activation Track. Set Camera4‘s beginning frame to the end of Camera3’s Active phase, and extend it to frame 555. It should look like this:

Add the Kick Animation. Right-click (Command-click on a Mac) the Model track. Select Add Animation From Clip and select Kick. Don’t edit it’s duration. Your Model track should now look like this:

The treasure chest needs to open, so you’ll now add the animation for the lid of the chest. Setting this animation follows similar steps as the previous ones.

Expand the ChestBottom GameObject in the Hierarchy window. Drag the ChestLid GameObject onto the Timeline and select Animation Track. In the Timeline, set the frame to 389. Now, select the ChestLid track. Click the Record button.

Now that you’re recording, select the ChestLid GameObject in the Hierarchy window and set its X Position to -1, then back to 0 to set its initial position. In the Timeline window, set the frame to 555. Finally, beneath Transform in the Inspector, set the ChestLid Y Position to 6. Press the Record button again on the track to stop recording.

This will animate the chest’s lid to fly through the wall.

Now, it’s time to position Camera4 so that it’s over the chest when the lid flies up. Again, you’ll follow the same steps as the previous camera, so see if you can do it without every step laid out.

Set the Position of Camera4 to (X:-9.00, Y:5.4, Z:5.18). Set Camera4’s Rotation to (X:90, Y:0, Z:0).

As with the other added cameras, adding an animation will make the scene more exciting, and it will look good to zoom in as the chest is opened.

Select the Timeline window. Drag the Camera4 GameObject onto it and create an Animation Track. Set the track to frame 389. Click the Camera4 track and then click the Record button. Select the Camera4 GameObject. Beneath Transform in the Inspector, set the X Position to 0, then back to -9.

In the Timeline window, drag the Animation Track to frame 555.

Finally, set Camera4‘s Y Position to 3.74:

The full scene is now done. Press Play and have a look!

Managing Complexity: Grouping Tracks

This was a short animation with only a few actors, so it’s pretty easy to keep track of the GameObjects and various Tracks. But creating a more complex scene with many moving parts and actors can become very difficult to manage. This is why organization is absolutely critical. While your scene may look done (and it is, great job!), it’s a good idea to take a few minutes and organize it — your future self will always thank you for this.

One way to organize your work is to group tracks. First, Right-click (Command-click on a Mac) under the tracks in the Timeline window and select Track Group. Click on Track Group and, in the Inspector, set the name to Activations:

Repeat this process to create a Track Group called Animations. Your Timeline should now look like this:

Now, drag and drop all of the tracks with Active sections into the Activations Group and all the others into the Animations Group. You can then open and close each group to allow for much easier readability and editing as needed:

Remember to save your work. Lean back in that director’s chair and give yourself a pat on the back! You have completed your first Timeline.

Where to Go From Here

If you skipped through some parts of this tutorial, don’t forget you can download both the starter and final projects using the “Download Materials” link at the top or bottom of this tutorial.

You’ve done great work and created a cutscene using model animation, camera changes and object lifecycle updates — yet there is still so much more to explore. One of the biggest things related to Timelines is custom scripting, wherein you tie in special animations with code that you want to execute along with it. You can learn more about custom scripts here. If you’re feeling bold, why not try adding a custom script to this scene after the treasure is opened?

If you are interested in learning more about Unity animations in general, be sure to check out this great Introduction to Unity Animation.

To learn more about creating 3D models and the Animation window, check out this massive series by Unity here.

Last but not least, if you are interested in making games, you should consider getting our Unity Games By Tutorial book. It covers how to make four types of games from scratch and walks you through every step of the process.

Be sure to post any questions you have below and feel free to join us in the forums.

The post Introduction to Unity Timeline appeared first on Ray Wenderlich.