My journey becoming a Unity game developer: Game Over Cutscene-UI animated as cutscene fades to black

Objective: Animate the Game Over User Interface to appear on the screen when the cutscene fades to black.

Game Over UI appears as the cutscene fades to black.

To start the animation of the Game Over UI, reopen the Timeline editor either using Window->Sequencing->Timeline or clicking on the Game Over Cutscene game object and double-click on the Game Over Timeline inside the Playable slot under Playable Director. Position the Timeline between the Scene and Game View tabs.

Open the Timeline editor to animate the Game Over UI.

Inside the Timeline editor create an Animation Track. We have 3 game objects which are Game Over Img, Restart button, and the Quit button that we need to animate. Since there is only one slot available in the Animation Track, we need to use the parent of those 3 objects which is the Canvas. Drag the Canvas into the Animation Track’s slot and select Create Animator on Canvas to create an Animator for the Canvas if it doesn’t have one.

Animation Track is created for the Canvas from the Game Over Cutscene in Timeline.

Click the REC button for the Canvas Animation Track to begin creating the keyframes for the Game Over UI animation. We want to move the Timeline’s pointer to the position where the Overhead Shot camera is about to pan upwards which is about the 6 seconds mark for us.

Select the Game Over Img, Restart button, and the Quit button game objects and head over to the Color setting. Drag the Alpha slider to zero which will make the Game Over UI transparent. Now move the Timeline pointer to the end of the animation and go back over to the Color setting. Drag the Alpha slider to one which will show the Game Over UI screen as it fades to black.

Game Over UI is animated as the screen fades to black.

This is the finished version of the Game Over Cutscene. With the Restart and Quit buttons in place, all we have to do is use code to give them functionality. This will be done at a later time.

Game Over UI animated final result.

Last thing we need to do is organize the cutscenes. Drag the Game Over Cutscene into the Cutscenes object to keep all the cutscenes together. Play the cutscene one more time in the Timeline editor just to make sure there were no changes made to the cutscene. After that we need to disable the Game Over Cutscene in the Inspector.

Game Over Cutscene is organized with the other cutscenes and disabled.