Introduction to Unity Timeline

Games often use cutscenes to engage the player and tell parts of the story. The Unity Timeline allows you to harness your in-engine assets to create highly customized cutscenes. By Anthony Uccello.

Leave a rating/review
Download materials
Save for later
Share
You are currently viewing page 2 of 3 of this article. Click here to view the first page.

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:

Tip: You can set the current frame marker using the frame counter field in the Timeline Inspector. If you set the marker to the frame you want to drag a track to, the track will snap to the frame marker.

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.

Note: Setting position and rotation keyframes occur independently of each other. Earlier, when you set the starting hero position, it never saved a keyframe for rotation, which is why you needed to set a new one here before setting the desired rotation to face the treasure.

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!

Tip: Your Timeline track is starting to get big, so if you need to zoom in or out you can scroll the mouse wheel up and down to zoom in and out, respectively. To pan left and right, click and hold the middle mouse button and slide your mouse left and right.