Lesson 4.1 - Creating a Timeline and Adding Keyframed Animation Tracks

1. Lesson Overview

2. Creating a Master Timeline

To start, we need to create a Master Timeline that will contain and control all of our animations in this Scene. The Timeline can be thought of as a sequence of various Animation Clips and triggers in your Scene, all of which can be edited together to orchestrate a story.

To begin:

1. Download the Unit4_StarterFiles here. Unzip the folder and move it to an organized location on your computer, add the Project in the Unity Hub and open it.

2. Once the project is open, create an empty GameObject and name it Master Timeline.

3. To open the Timeline window, go to Window > Sequencing > Timeline. Dock it to the bottom of the screen. If you need a reminder about docking windows in Unity's interface, please refer to Unit 2 of the course.

The Timeline window will appear in your Scene (Figure 01).

Figure 01: A look at the Timeline window

4. Click the Create button inside the Timeline and when prompted, save your new Timeline as Master Timeline in the Timelines folder (Figure 02).

Figure 02: An empty Timeline. Notice the numbers at the top marked with ruled indentions. These represent the number of frames in the current sequence.

Now lock your Timeline so that when you click on other GameObjects, the Timeline doesn’t vanish.

5. Lock the Timeline by clicking on the lock symbol in the upper-right corner of the Timeline window.

3. Configuring Your Windows

At this point, you should configure your window to make it easier to work with Timeline. We will make the editing window look more like a traditional non-linear editor (NLE), such as Adobe Premiere or After Effects (Figure 03).

Figure 03: This Layout maximizes the size of the Scene, Game and Timeline views while providing access to the Hierarchy, Project, and Inspector.

The Timeline should be docked at the bottom of the screen already. From there, our goal is to have the Scene view and Game view windows exist side by side and not in a docked tab format.

Prior to this unit, we’ve only been working in the Scene view. The Game view is what the main Unity Camera sees. In a game, the Game view usually follows the character. In an animation or a film, camera movements help tell the story. For our purposes, the Game view camera in this project is set to a wide establishing shot focused on the corner and the alley. We’ll dive deep into cameras in Unit 5.

Let's create a new interface Layout more conducive to editing the Timeline:

1. Dock the Project window underneath the Hierarchy window. We'll need to drag Assets into our Scene and then modify their properties in the Inspector, so it's best to have access to all three of these windows. Feel free to switch the Project window to One Column Layout by clicking the context button in the upper-right corner of the window (Figure 04).

Figure 04: Simplifying the look of the Project window

2. Undock the Game view from the Scene view by left-clicking and dragging it to the right, then release the window when it’s next to the Scene view.

3. In the Game view, adjust the Display drop-down to 16:9. This will crop the contents of the window to a 16:9 (widescreen) viewport, allowing us to see everything that the camera sees (Figure 05).

Figure 05: Adjusting the Game view's aspect ratio

4. Save the Layout and name it Sequence, or another name of your choosing so it can be loaded later.

4. Animating the First Car

There are surprisingly few cars in this city. Let's fix that by creating a short animation in which a taxi drives through an intersection. For this first part, let's say we want the animation to be 15 seconds. Unity, by default, will try to render a Scene at 60 frames per second, meaning the animation's total duration will be 900 frames.

1. In the Hierarchy, select the Car1 GameObject.

2. Slowly drag and drop the GameObject into the left portion of the Timeline window, then select Add Animation Track.

Animation Tracks allow us to record an animation for the object assigned to it.

3. You will now see a new Animation Track under the Master Timeline with the Car1 Animator assigned to it. In Unity, an Animator is a connection to the objects being animated. (Figure 06).

Figure 06: Creating a new Animation Track for the car

4. In the Scene view, position the car so that it’s on the far right side of the road, just before the Syn Cola sign (Figure 07).

Figure 07: Starting position for the Car1 GameObject. It’s just behind the Syn Cola sign in the Scene view.

We're now ready to record an animation of the car driving down the street.

5. Press the red Record button on the Car1 track to enter record mode. The red button will start blinking and the track will be highlighted red, indicating that it has been armed and is ready for recording.

6. With the playhead at 0, select Car1 in the Hierarchy.

7. In the Inspector, navigate to the car's Transform component, then right-click over the Position parameter and select Add Key. This will create your first keyframe (Figure 08).

Figure 08: Creating the first keyframe on the Position parameter as we want to animate the car moving from right to left

8. Now move the white playhead to Frame 114, select Car1 in the Scene view and drag on the blue translation gizmo to move the car forward until it reaches the intersection on the on the left side of the Game view (right before the pink and orange lanterns). A second keyframe will automatically be created. Click the Record button again to stop animating (Figure 09).

9. Move the Timeline's playhead to Frame 0, then press the Timeline Play button to play the Timeline from this point.

Figure 09: Moving the car forward has created a second keyframe.

Notice that there are different ways to create keyframes while the Timeline is in record mode. You can do it in the Transform properties, or by moving the GameObject in the Scene view. Also notice how parameters in the Inspector are highlighted in red when in record mode. This indicates that changes to these parameters will create a key on the Timeline.

Now you can play your animation by pressing the Play button in the Timeline.

Note: If you are familiar with creating games in Unity, this is different from pressing Play in the Game view. Changes can be saved while a Timeline is playing outside of Game view, which will be essential to knowing when and how to modify the Timeline to correct changes.

Notice how the car steadily accelerates when it starts moving and decelerates before it comes to a stop? The effect will be more pronounced when the keys are spread out over more frames (i.e., 600 frames as opposed to 120). This is due to the smooth animation curve that Unity has automatically applied to our animation. Let's take a look:

10. Click the Animation Curves button beside the red Record button. This will expand the Animation Track to show the curve between the two keyframes we created (Figure 10).

Figure 10: Animation Curves in the Timeline. They are similar to curves within Maya's graph editor.

Curves display the rate at which keys are interpolated, or transition into each other. They also help to visualize the motion of objects over time. The curve exists on a XY plane: along the x-axis is time (in frames) and along the y-axis is distance traveled (In Unity units).

For instance, this curve shows that, between Frame 0 and Frame 114, the value of Position.z (the blue curve representing the z-axis) increases slowly before moving at a steady rate. This is shown visually by the bend in the curve that transitions into a straight line. Before the value reaches the final keyframe, the curve bends again, this time so the value will slowly come to a stop.

Simply put, this says that the taxi is moving forward over time, easing into its maximum speed and easing out to a stop.

Congratulations! You’ve created your first animation in Unity! Let's apply what we learned to animate the other vehicles in this Scene.

5. Animating the Second Car

This Scene would look more lively with multiple vehicles passing along the street. Let's follow a similar set of steps to animate another taxi.

1. Collapse the Animation Track for Car1, by clicking on the Animation Curves button to the right of the Record button, then select the GameObject Car2 in the Hierarchy.

2. Drag and drop the GameObject into the Timeline, then select Add Animation Track.

3. You will now see a new Animation Track under the Master Timeline with the Car2 Animator assigned to it.

4. In the Scene view, position the car so that it’s at the far end of the intersection, behind the building with the rounded facade (Figure 11).

Figure 11: Starting position for the Car2 GameObject. It’s on an intersection perpendicular to the car we animated in Lesson 4.1.3. Notice how there is an additional Animation Track on the Master Timeline.

5. Press the Record button on the Car2 track to enter record mode.

We don't want both cars to begin moving at the same time. Let's create an offset so that the second car begins to move several frames after the first one.

6. With the playhead at 170, select Car2 in the Hierarchy.

7. In the Inspector, navigate to the car's Transform component, then right-click over the Position parameter and select Add Key.

8. Now move the white playhead to Frame 330, select Car2 in the Scene view, and drag on the blue z-axis to move the car forward until it passes the blue Syn Cola sign on the right side of the screen. If your car is moving sideways rather than forward, ensure that you are in Local rather than Global mode (Figure 12) A second keyframe will automatically be created. Click the Record button again to stop animating.

Figure 12: The Local Transform button

Now you can play your animation by pressing the Play button in the Timeline. You should see both cars moving in the Scene. (Figure 13)

Figure 13: A look at the second car approaching the intersection that the first car travels on.

6. Animating the Security Camera

We’ve shown you how to animate two GameObjects moving in the environment. Sets are composed of both static and dynamic objects, however, so now we’re going to show you how to animate the movement of a stationary object, one that is not translated in space. Notice the two security cameras in the Game view. In this lesson, we'll have each security camera track left and right on a loop while the base of the camera remains attached to the wall.

1. With the Playhead at Frame 0, select SecurityCam1 in the Hierarchy.

2. Drag and drop the GameObject from the Hierarchy into the Timeline, then select Add Animation Track, as we’ve done before.

3. You will now see a new SecurityCam1 Animation Track under the Master Timeline track (Figure 14).

Figure 14: The security camera is now a part of the Timeline.

4. Press the red Record button on the SecurityCam1 track to enter record mode again.

5. Select the SecurityCam1 GameObject in the Hierarchy and expand it to reveal the SecurityCam_Top GameObject. Select this GameObject.

6. Go to the Inspector and in the Transform component, set the rotation in the y-axis to 40. This will create your first keyframe and rotate the security camera accordingly (Figure 15).

Figure 15 Rotating the base of the security camera by 40 degrees in the y-axis

7. Next, in the Timeline move your playhead to Frame 142.

8. Set the rotation in the y-axis to -36. This will create your second keyframe (Figure 16).

Figure 16: Rotating the base of the security camera by -36 degrees in the y-axis

10. Go to Frame 290 and set the rotation in the y-axis back to 40. This will create your third keyframe and complete the loop.

11. Click the Record button again to stop animating (Figure 17).

Figure 17: The security camera during its loop animation and a look at our Timeline so far.

Congratulations! When you press Play in the Timeline, you should see the security camera sweep back and forth once until the playhead advances beyond the keyframe.

While we have created a looping animation, what if we wanted the loop to continue indefinitely? This is where the concept of Clip Tracks will become handy.

7. Converting to Clip Track

Unlike our cars, we want this security camera’s animation to loop throughout the duration of our Timeline. We could manually add keyframes to extend the animation, but not only would this be inefficient, it would also require more work if we wanted to change the duration of our animation in the Timeline.

A Clip Track can save any recorded animation into a clip that can then be repositioned or looped indefinitely.

1. With the SecurityCam1 track selected in the Timeline, click the Context button (displayed as three vertical dots) in the upper-right corner and select Convert to Clip Track. This will convert the keyed animation into a Clip Track (Figure 18).

Figure 18: Converting the keyed Animation Track into a Clip Track.

Notice how the Clip Track that was created replaced the keyframes that were there before.

2. Now, select the clip that was just created in the SecurityCam1 track. In the top of the Inspector, rename the clip from Recorded to Security Camera Loop.

3. Navigate to the Animate Extrapolation tab and set the Post Extrapolate parameter to Loop. This will make your animation loop throughout the remaining animation (Figure 13).

Figure 19: A look at our newly created Clip Track in the Inspector and Timeline. Notice the loop symbol next to the Clip Track. This indicates, as we now know, that the clip is looped.

Every Animation Clip in Unity has a Pre-Extrapolate and Post-Extrapolate property. This means you can tell Unity what you want to happen before or after a clip is played. You will see the default value for the Post-Extrapolate setting is Hold — which means that when the clip is done, Unity will hold the pose from the clip's last frame forever.

Clip Tracks showcase the flexibility of Unity's Timeline and function like media clips in traditional NLEs. Animation saved as a Clip Track can be looped, scaled, extended, truncated, and duplicated to further refine and better integrate pre-recorded animation into your Scenes.

8. Organizing Your Animation Tracks into Track Groups

It’s important to stay organized as we begin to make more complex animations, so we will now group our Animation Tracks into a Track Group. Groups place our Animation Tracks into collapsible folders. Doing this helps to declutter our Timeline window.

1. Go to the Timeline, navigate to the plus sign and add a Track Group. A new empty Track Group will appear (Figure 20).

Figure 20: Creating the Track Group. It functions and appears like a folder.

2. Rename the Track Group Props Group in the Timeline, either in the Inspector or by double-clicking the Track Group label.

3. Click and drag the three tracks we created so far into the new Props Group (Figure 21).

Figure 21: The three Animation Tracks nested within the new Props Group

You can now open and close the Props Group to hide and reveal the tracks.

9. Recap

This unit covered the basics of creating animatics in Unity. We learned how animatics can be quickly produced by sharing animations across characters, recording keyframed animation to clips, and allowing animators to then rearrange, extend, or loop clips as part of a larger sequence. The ability to create animatics quickly and then refine them makes Unity a powerful animation tool. We’ll build on these skills in the next unit, where we’ll learn how to animate cameras with Cinemachine to turn these animations into shots.