Custom Timeline Asset: Pause and wait for Player Input (Part 1/3)

06/17/23

Intro

Unity provides out-of-the-box tools for making simple cutscenes... But what if you want to make your cutscene more interactive?

Today I'll show how our indie game project used custom Timeline assets to add interactivity to a tutorial cutscene, allowing the player to press a button to continue progressing through the tutorial!

Here is what the end result will look like:

You may be asking yourself, is this guy waving? And the answer is, yes. The character asset I downloaded didn't come with an 'attack' animation, but by the time I realized that I was like halfway through making this and I'm too lazy to do this twice. So, 'superwave that blows enemies away' it is.

This blog post series will go over how to set up a custom "pause clip" from start to finish.

Part 1 will cover the basic setup of a timeline cutscene containing characters that move and play animations.

Part 2 will cover how to make a custom clip asset that can be added to the timeline to pause the cutscene.

Part 3 will show how to let the player resume the cutscene by pressing an input, and how to assign different input buttons to each pause.

All final code can be found here on Github: LINK

Part 1

1.1 Making a Timeline Asset

Welcome to the test scene! In it we have a simple green character (this free asset on the asset store) to represent our player, and some red characters to represent enemies.

(The project files are not available, but if you want to recreate this-- it is pretty much just 4 instances of the character prefab that comes with the free asset pack.)

The first thing we need to do here is add a Timeline (aka cutscene) to the scene. Create a new game object and name it Timeline.

Give it a PlayableDirector component:

Create a new folder in your Project in Assets, called Timeline.

In this folder, create a new Timeline asset by right-clicking in the project panel > Create > Timeline:

Name the asset "PauseDemoTimeline".

Drag and drop this timeline asset into the 'Playable' field of the PlayableDirector component.

1.2 Directing Things With the Timeline

Now that the Timeline is properly set up, we can start adding some animation direction to it. 

Click on the Player character - notice it has an Animator component already set up on it. Your actor must have an Animator like this (however it is fine if the Controller field is set to "null").

Open the Timeline panel (Top bar > Window > Sequencing > Timeline)

Now, in the hierarchy, select the Timeline gameObject. When you click it, you'll notice the Timeline panel you just opened will suddenly populate with some new stuff like buttons and a scrubbable timeline.

Right-click anywhere in the timeline panel and click Animation Track.

You will see a new track appear. Drag and drop the Player gameObject into the None (Animator) field for this new track:

From here, you can start adding animation clips to the timeline.

Right-click on the dark blue bar and click "Add From Animation Clip":

Then choose one of the character's animations, such as "Run". 

Now when you scrub through the timeline, the character is doing the Run animation.

However, he's just animating in-place. Let’s make him actually move... 

Make a new Animation Track just like before and drag and drop the Player GameObject into the None (Animator) field just like before.

However, this time, instead of adding a clip, we are going to press the red record button.

It will start blinking and turn the track red to show the Timeline is recording.

While it records, we can record changes to the character's position.

Moving through time with the timeline scrubber, use either the move tool or transform values fields to move the player in the scene, to set a start and end position key for the player character. (A keyframe will automatically be added at the current time every time you change the player position.)

Changing the player’s position while in Record Mode will add a keyframe at the current time

When you’re finished, press the red button again to stop recording.

Notice as you scrub the timeline that the player now moves AND animates! 

 Repeat these steps in the same Timeline panel to animate all the enemy characters. 

Continue to block out the cutscene.

As shown before... there was no attack animation included with this free asset.... so instead I've created a sequence where the player waves at the enemies to "attack" them and they are literally blown away by his friendliness.

Awesome, so now we have a complete cutscene (goofy though it may be). The next part will go over how to take this cutscene and add some interactivity to it with a custom clip!

PART 2