Games Getting Started introduction Tech timeline tutorial unity unity3d

Introduction to Unity Timeline

Introduction to Unity Timeline

Introduction to Unity Timeline

Builders typically use cutscenes to inform elements of a recreation’s story and have interaction the participant. Some video games use specifically pre-rendered animated scenes with larger element fashions, whereas others use the precise in-game fashions. Utilizing in-game fashions could be a nice value and time saver to you since you don’t want to make new fashions, rigs and animations only for cutscene story moments. And simply since you’re repurposing your present belongings doesn’t imply that you simply want to skip the particular results or drama! Unity has a wealthy device to show you how to make partaking cutscenes — the Unity Timeline! On this tutorial, you’ll study Timeline and the way to make cutscenes with animations and digital camera modifications.

Getting Began

Obtain the starter and last tasks utilizing the “Download Materials” hyperlink on the prime or backside of this tutorial.

Open the Starter Venture file and cargo the Principal scene. That is your start line. It options the hero standing on the tower searching into the world:

Together with your assist, he’ll leap off of the tower, flip, stroll in the direction of the treasure chest after which kick open the chest. The digital camera may even tackle new positions all through these animations. Here’s what the ultimate scene will appear to be:

What Precisely Is a Timeline?

You’ll accomplish this tutorial utilizing Unity Timeline — however what’s a timeline? A timeline is a literal GameObject with a timeline element, which is editable within the Unity Timeline window that controls the animation keyframes and object life cycles. If you end up making a cutscene with Unity Timeline, you’re setting all of the animation keys you’ll use, in addition to figuring out once they want to hearth. For this tutorial, additionally, you will use AnimationController, which may be regarded as a super-set of animation keyframes.

Each time a personality performs an animation, resembling strolling, each single vertex on the thing that strikes wants to have it’s path mapped out. You gained’t be worrying about creating mannequin and rig animations on this tutorial — it’s already completed for you. However it’s useful to know that, whether or not you’re manually setting an animation keyframe or utilizing an AnimationController animation, they’re all principally the identical factor: The place of objects at a given second in time. A timeline is the conductor that coordinates all of those actions to create a scene. This can all make sense as you dive into utilizing Unity Timeline.

Earlier than diving deeper, it’s useful to get an summary of the Timeline window. See the picture under and the corresponding numbered descriptions:

  1. Timeline Asset: This can be a monitor that’s linked to a GameObject that exists within the hierarchy. It is going to retailer keyframes related to that GameObject so as to carry out animations or decide whether or not the GameObject is lively.
  2. Related GameObject: That is the GameObject that the monitor is linked to.
  3. Body: That is the present body within the timeline that has been set. If you need to change animations, you’ll set the keyframes on the beginning and ending frames.
  4. Monitor Group: As scenes develop, so will the variety of tracks. By grouping tracks, you’ll be able to maintain your tracks organized.
  5. Document Button: When that is lively, you’ll be able to change the present body and set the place and/or rotation of the GameObject within the scene, and it’ll document the modifications.
  6. Curves Icon: Clicking it will open the Curves view to provide the finer particulars on the related animation keyframes so as to modify them as wanted.

Don’t fear if that felt like rather a lot to absorb directly — you’ll revisit the above in the course of the tutorial. Crucial factor to know, at this stage, is the place the Timeline window is and that, by choosing the Timeline GameObject, you’ll be able to entry the Timeline window.

Lights, Digital camera, ACTION!

With the primary scene loaded, press Play. You need to see the hero idling on prime of the tower:

That is the default animation set within the Animation controller. This tutorial will leverage animations which have already been arrange for you, and also you gained’t want to fear concerning the inside workings of fashions, animations or controllers. However if you need to study that course of you’ll be able to check out our Introduction to Unity Animation tutorial.

Creating the Timeline GameObject

Step one is to create the Timeline GameObject. Create an empty GameObject by right-clicking (Command-clicking on a Mac) the Hierarchy window and choosing Create Empty. This can add a GameObject to the scene and choose it:

With the GameObject nonetheless chosen, open the Window menu and choose Timeline. This opens the Timeline window. Click on the Create button and it’ll open up a Save dialog field. Rename the file to Timeline and click on Save:

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

You’ve now created the Timeline GameObject that may coordinate all of the animations and digital camera modifications for the cutscene. Underneath the hood, Unity has saved an Asset file referred to as Timeline.playable to disk. On the Timeline GameObject, Unity added the Playable Director and Animator elements.

The Playable Director element accommodates the Playable area that’s sure to the Timeline asset that you simply’ve simply saved. The Animator element that Unity added would, in principle, permit you to animate the Timeline GameObject, however you gained’t be doing that, so you possibly can simply ignore this.

Earlier than shifting on, you’ll need to drag the Timeline tab to the underside of the display. This can permit you to have the Scene and Timeline home windows open on the similar time:

Choose the Timeline GameObject and return to the Timeline window. Proper now, there’s an Animation Monitor for the Timeline GameObject. This gained’t be wanted, so you’ll be able to choose it and press Delete to take away it:

Animating the Bounce!

You at the moment are prepared to animate. Increase the Hero GameObject to reveal the ModelGameObject. Choose the Timeline GameObject. Drag the Mannequin GameObject onto the Timeline window; this can immediate you to choose a monitor so choose Animation Monitor. Repeat this step for the Hero GameObject:

Word: The rationale you added each the Hero and Mannequin GameObjects has to do with ensuring animations will correctly zero to native area. The Hero GameObject is a container for the Mannequin GameObject, which permits the animations to play with out interfering with the place from the place they’re enjoying. Everytime you want to transfer the hero, you’ll be animating the Hero GameObject. When the hero wants to animate — which it could actually do whereas shifting, too — you’ll use the Mannequin GameObject. With out this parent-child relationship, the animations that the Mannequin will play would incorrectly override the Hero GameObject motion settings in the event you didn’t correctly set it as a toddler.

Recording Keyframes

Because the Hero GameObject monitor represents the place of the hero, you want to set it’s place as a beginning keyframe.

Choose the Hero monitor within the Timeline window and click on the Report button (pink circle) to start recording. Choose the Hero GameObject within the Hierarchy window and set the X Place to -1, then instantly set the X Place again to zero.

Return to the Timeline window and click on the Document button on the Hero monitor to cease recording. This has now added a keyframe for the beginning place of the hero:

On this venture, the hero was already within the place the place he wanted to start. Nevertheless, till you truly change the unit place, it gained’t register as a keyframe whereas recording. So should you ever want to set a keyframe whereas recording for a place the place the keyframe already is, simply transfer it and transfer it again to register it.

A simple approach to do that is to set the X Place of the item to -1 of its present place, then set it again. You’ll use this trick a couple of occasions on this tutorial.

Subsequent, you’ll have the hero idle for 100 frames earlier than he jumps off of the tower. At present, you’ve solely set the beginning place of the hero, however you want to set the hero to the identical place (i.e. the highest of the tower) 100 frames later — in any other case, Unity will begin interpolating a motion animation instantly.

Simply as earlier than, choose the Timeline GameObject — this time, nevertheless, you must click on the body field on the prime and sort in 100. This units the keyframe to body 100.

Click on the Document button on the Hero monitor. Choose the Hero GameObject and, underneath Rework within the Inspector, set the X Place to -1, then instantly again to zero. Click on the Report button as soon as once more to cease recording.

Now you’ve gotten setup the Hero beginning keyframe and are in a great place to proceed on with animations.

Including Animation Clips

Setting Place Knowledge

First up, you’ll want to set your place knowledge.

Click on the Timeline GameObject to choose it. Within the Timeline window add an Animation to the Mannequin monitor by right-clicking (Command-clicking on a Mac) the Mannequin monitor and choosing Add From Animation Clip. Now, choose the Idle animation:

Subsequent, you’ll animate the hero to bounce off of the tower, however you first want to transfer him up and over the railing, then down in the direction of the bottom.

To take action, first choose the Timeline window after which set the body to 138. Click on the Document button on the Hero monitor. Now, choose the Hero GameObject. Underneath Rework within the Inspector, set the Y Place to three.934 and the Z Place to 1.97.

Return to the Timeline window and set the body to 176. Choose the Hero GameObject once more and set the Y Place to zero and the Z Place to 5.159. Finish recording by clicking the Document button:

Save the scene and press Play to see your work!

Including Animations

You’ve set the place knowledge however not the animations to go together with them. You’ll type that out subsequent.

With the Timeline window chosen, right-click (Command-click on a Mac) the Mannequin monitor and click on Add From Animation Clip, then choose Leap. This could add a Bounce animation proper subsequent to the Idle animation.

Drag the appropriate aspect of the Bounce animation to set it to body 176. Now, you’ll add one other Animation Clip — solely this time, you’ll add the Land animation (you don’t want to change it’s size; simply add it):

Save the scene, press Play and behold your work!

Including Cameras

It’s a bit of exhausting to comply with the motion after the hero makes the bounce off of the tower, so now can be a superb time to begin working with cameras.

Utilizing the Hierarchy window, rename MainCamera to Camera1. Choose the Timeline GameObject. Drag Camera1 onto the Timeline window, which can immediate you to choose a monitor; choose Activation Monitor. Drag the Lively bar for the Camera1 monitor in order that it finishes at body 157:

Tip: You’ll be able to set the present body marker utilizing the body counter area within the Timeline Inspector. In the event you set the marker to the body you need to drag a monitor to, the monitor will snap to the body marker.

The Activation Monitor is what determines whether or not a GameObject is lively or not throughout a scene. Your primary digital camera will now flip off after body 157. Press Play and take a look:

You’ll now add one other digital camera — solely you’ll place this digital camera overhead in order that it could get a fowl’s-eye view of the hero after he’s jumped over the tower railing.

Within the Hierarchy window, choose Camera1, and duplicate it by urgent Management-D (Command-D on a Mac). Rename the duplicate to Camera2 and set it to be disabled.

On this tutorial, you’ll use two extra cameras, so make them now by following the identical steps; rename them Camera3 and Camera4, respectively, and be certain to disable them. After you’re finished, all of the Digital camera GameObjects, besides Camera1, ought to be disabled. That is what your hierarchy ought to appear to be now:

Now, you’ll place Camera2. Choose Camera2 and under Rework within the Inspector, set its Y Place to 10.75 and its Z Place to 2.84. Set its X Rotation to 79.5:

As with Camera1, choose the Timeline window and drag Camera2 from the Hierarchy onto it; once more, it will immediate you to select a monitor so choose the Activation Monitor. Now, slide the Lively bar in order that it begins proper after the top of the Camera1 activation (body 158). Drag the suitable aspect of the Lively monitor for Camera2 in order that it ends at body 216.

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

Time to Get Treasure!

Dealing with the Treasure

Now that your hero has landed on the bottom, he ought to flip in the direction of the treasure chest and begin strolling.

Choose the Timeline GameObject and set the body to 202. Click on the Report button on the Hero Monitor to start recording.

Choose the Hero GameObject and beneath Rework within the Inspector, set the Y Rotation to -1, then instantly again to zero to set a beginning keyframe for the Hero GameObject’s rotation.

With that full, once more choose the Timeline GameObject and set the body to 216. Once more choose the Hero GameObject and, beneath Rework within the Inspector, set the Y Rotation to -90.

Notice: Setting place and rotation keyframes happen independently of one another. Earlier, once you set the beginning hero place, it by no means saved a keyframe for rotation, which is why you wanted to set a brand new one right here earlier than setting the specified rotation to face the treasure.

The hero also needs to be idling throughout this time, so add an Idle animation to the Mannequin Animation Monitor, and have it final till body 216:

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

Tip: Your Timeline monitor is beginning to get huge, so should you want to zoom in or out you’ll be able to scroll the mouse wheel up and down to zoom out and in, respectively. To pan left and proper, click on and maintain the center mouse button and slide your mouse left and proper.

Approaching the Treasure

Choose the Timeline GameObject and set the body to 216. Click on the Report button on the Hero monitor to start recording.

Choose the Hero GameObject and beneath Rework within the Inspector, set the X Place to -1 then again to zero to set its beginning place keyframe. Then, on the Timeline, set the Hero monitor to body 361.

Return to the Hero GameObject and, beneath Rework within the Inspector, set the X Place to -6. Return to the Hero Monitor and finish recording.

Lastly, add a Stroll Animation to the Mannequin utilizing the identical steps as above, and prolong it to body 361:

You may discover that it appears as if the hero has walked previous the treasure, however this appears to be a problem with the Timeline preview as a result of, as you will notice shortly, the hero will stroll proper up to the treasure and cease.

Relatively than simply have the hero stroll with Camera2 hogging all of the motion, now you can use Camera3 to do a behind-the-hero shot.

To do that, beneath the Essential menu within the Hierarchy window, choose and drag Camera3 over the Mannequin GameObject, which is beneath the Hero GameObject, to set it as a toddler.

Set Camera3‘s position to (X:0, Y:2.06, Z:-2.5). Set it’s Rotation to (X:zero, Y:zero, Z:zero). Your hierarchy ought to seem like the next:

With Camera3 childed to the GameObject Mannequin, it’ll now comply with alongside all of the GameObject Mannequin’s motion from behind. Nevertheless, Camera3 nonetheless wants an activation monitor in order that it’s lively on the proper time.

As you probably did with Camera1 and Camera2, drag the Camera3 GameObject onto the Timeline and choose Activation Monitor. Set Camera3‘s start frame to Camera2’s finish body, and set Camera3‘s finish body to 361:

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

Virtually there! Now, the hero simply wants to open the treasure by… kicking it, in fact!

Opening the Treasure

For the ultimate shot, you’ll use Camera4, setting it up as you probably did Camera1 and Camera2.

Drag Camera4 on to the Timeline and add an Activation Monitor. Set Camera4‘s beginning frame to the end of Camera3’s Lively part, and prolong it to body 555. It ought to appear to be this:

Add the Kick Animation. Proper-click (Command-click on a Mac) the Mannequin monitor. Choose Add Animation From Clip and choose Kick. Don’t edit it’s period. Your Mannequin monitor ought to now seem like this:

The treasure chest wants to open, so that you’ll now add the animation for the lid of the chest. Setting this animation follows comparable steps because the earlier ones.

Broaden the ChestBottom GameObject within the Hierarchy window. Drag the ChestLid GameObject onto the Timeline and choose Animation Monitor. Within the Timeline, set the body to 389. Now, choose the ChestLid monitor. Click on the Document button.

Now that you simply’re recording, choose the ChestLid GameObject within the Hierarchy window and set its X Place to -1, then again to zero to set its preliminary place. Within the Timeline window, set the body to 555. Lastly, beneath Rework within the Inspector, set the ChestLid Y Place to 6. Press the Document button once more on the monitor to cease recording.

This can animate the chest’s lid to fly by means of the wall.

Now, it’s time to place Camera4 in order that it’s over the chest when the lid flies up. Once more, you’ll comply with the identical steps because the earlier digital camera, so see if you are able to do it with out each step laid out.

Set the Place of Camera4 to (X:-9.00, Y:5.four, Z:5.18). Set Camera4’s Rotation to (X:90, Y:zero, Z:zero).

As with the opposite added cameras, including an animation will make the scene extra thrilling, and it’ll look good to zoom in because the chest is opened.

Choose the Timeline window. Drag the Camera4 GameObject onto it and create an Animation Monitor. Set the monitor to body 389. Click on the Camera4 monitor after which click on the Report button. Choose the Camera4 GameObject. Beneath Rework within the Inspector, set the X Place to zero, then again to -9.

Within the Timeline window, drag the Animation Monitor to body 555.

Lastly, set Camera4‘s Y Place to three.74:

The complete scene is now accomplished. Press Play and take a look!

Managing Complexity: Grouping Tracks

This was a brief animation with just a few actors, so it’s fairly straightforward to maintain monitor of the GameObjects and numerous Tracks. However making a extra complicated scene with many shifting elements and actors can grow to be very troublesome to handle. That is why group is completely important. Whereas your scene might look carried out (and it’s, nice job!), it’s a good suggestion to take a couple of minutes and arrange it — your future self will all the time thanks for this.

A method to manage your work is to group tracks. First, Proper-click (Command-click on a Mac) beneath the tracks within the Timeline window and choose Monitor Group. Click on on Monitor Group and, within the Inspector, set the identify to Activations:

Repeat this course of to create a Monitor Group referred to as Animations. Your Timeline ought to now seem like this:

Now, drag and drop all the tracks with Lively sections into the Activations Group and all of the others into the Animations Group. You’ll be able to then open and shut every group to permit for a lot simpler readability and modifying as wanted:

Keep in mind to save your work. Lean again in that director’s chair and provides your self a pat on the again! You could have accomplished your first Timeline.

The place to Go From Right here

In case you skipped by means of some elements of this tutorial, don’t overlook you possibly can obtain each the starter and remaining tasks utilizing the “Download Materials” hyperlink on the prime or backside of this tutorial.

You’ve executed nice work and created a cutscene utilizing mannequin animation, digital camera modifications and object lifecycle updates — but there’s nonetheless a lot extra to discover. One of many largest issues associated to Timelines is customized scripting, whereby you tie in particular animations with code that you really want to execute together with it. You possibly can study extra about customized scripts right here. In the event you’re feeling daring, why not attempt including a customized script to this scene after the treasure is opened?

In case you are interested by studying extra about Unity animations generally, ensure to take a look at this nice Introduction to Unity Animation.

To study extra about creating 3D fashions and the Animation window, take a look at this large collection by Unity right here.

Final however not least, in case you are interested by making video games, it is best to contemplate getting our Unity Video games By Tutorial e-book. It covers how to make 4 forms of video games from scratch and walks you thru each step of the method.

Make sure to publish any questions you could have under and be happy to be a part of us within the boards.

Obtain Supplies

(perform(d, s, id)
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = “//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5&appId=118196468516511”;
fjs.parentNode.insertBefore(js, fjs);
(doc, ‘script’, ‘facebook-jssdk’));