Animating GameObjects in Unity (Game Dev Day 55)

Using the Timeline editor to animate the gameobjects is pivotal in creating quality cutscenes, especially when UI elements are involved.

Animating the UI buttons and message allows for a seamless transition into a menu.

If you have read my previous articles on cutscene development the techniques used here are quite similar. All we really have to do is change the albedo channels on the UI elements themselves, then start the fade in at the appropriate timestamp on our timeline.

The final timeline. The UI elements begin their fade in at the 5:46 mark (bottom row).

So how is it done?

First off, we need to create the UI elements themselves. In this case, I have three UI elements; two buttons and some standalone text.

Each button is a unique object, and the top text is also separate.

All of these objects exist in a canvas gameobject, which Unity automatically creates when you make any UI element. We will technically be animating the canvas itself for this.

Ignore the “Fade” object for now.

So on our timeline, we add a new animator first.

How to open a new Timeline Animation Track.

Then we drag the Canvas Gameobject into the new open slot.

Placing the canvas into the track.

Hit the record button then select all the elements we want to fade in.

I chose to start the fade in at 5:47 and end it at 6:47 (the end of the cutscene).

At the starting timestamp, I set the albedo values to 0, making everything transparent. I then moved to the 6:47 timestamp and made the values 255, or opaque.

The bottom row shows the two timestamp as two diamonds near the end of the cutscene.

This allows those menu options to fade in, creating a smooth transition for the end of the level!