My journey becoming a Unity game developer: Complete Level Cutscene-Fade effects added to the scene

Objective: Add fade in and fade out effects to the beginning and end of the cutscene.

Level Complete cutscene finale.

We will start by creating an image that will show the fade to black. Right-click on Level Complete Cutscene and go to UI->Image. Rename the image Camera_Fade_Alpha as this image will go from black to transparent in our animation. Go to the Anchor setting and select to stretch in all directions which will make the image cover the entire screen. In the Rect Transform, change the position axis, width, and height to zero which will make the image cover the entire screen. Change the color to black in the Color setting which will black out the entire screen. Last, click on the Canvas object, then under the Canvas Scaler component select Scale with Screen Size so the image scales to all screen sizes.

Created an image that will fade in and out to black.

With the Level Complete Cutscene selected, create a new Animation Track and drag the Camera Fade Alpha into the slot. Click the REC button, select the Camera Fade Alpha object, and in the Color setting slide the Alpha bar just a little and set it back to one for black. This will set our first keyframe at the beginning of the scene. Slide the Timeline pointer around the .30 second mark, then go back to the Color setting and set the Alpha to zero which will make the image transparent to show the beginning of the cutscene playing. When we either scrub the Timeline or press Play, the scene will start with a black screen and fade in to showing Darren in the cutscene.

Move the Timeline pointer to the moment Darren turned his head around completely showing his success on his face which was around 4:42 seconds for us. Head back to the Color setting, the set the Alpha to zero which will begin the fade out process. Move the Timeline pointer to the end of the animation, and back in the Color setting set the Alpha to one. Play the cutscene to see the fade in and fade out animations operate.

Animation Track using the Camera Fade Alpha object to animate fading in and out.

The fading process seems a little rushed, so we grabbed the Actors’ End Level Cutscene animation and dragged it a full second more than the original. Make sure the Camera Fade Alpha animation is matched up with the End Level Cutscene by double-clicking the Timeline to open the Animation tab and drag the ending keyframe to the end point if needed.

Actors animation extended in Timeline to make the fade out smoother.

We need to create a successful image text screen by right-clicking on the Canvas object and selecting UI->Image. Rename it Congrats_text, drag the Congratulations_text image into the Source Image under Image component, click on Preserve Aspect, and change the Width and Height to 300 x 300 or something to your liking.

Created an UI image with congratulations text appearing onscreen.

We need to add Restart and Quit buttons by right-clicking on the Canvas object, then selecting UI->Button. Rename the buttons Restart_button and Quit_button. Drag the Restart_Button and Quit_Button images into the Source Image under the Image component. Change the Width and Height to the size you prefer your buttons to be which in our case was 300 x 40. Position the buttons underneath the Congrats text to look uniformed. Last, inside the button objects click the drop-down arrow next to each button and click on the Text object. Inside the Text box under the Text component, delete the text inside these fields so that the actual text image inside the buttons are not blurred out.

Restart and Quit buttons created for the congratulations screen.

To animate the Congratulations screen we need to go into Timeline and add an Animation Track. Drag the Canvas object into the track’s slot as we need to animate 3 game objects under the Canvas object. Click the REC button, move the Timeline pointer to where the screen starts to fade out, then select the Congrats_text, Restart_button, and Quit_button all at once. Go to the Color setting and set the 1st keyframe to zero. Then move the pointer to the end of the animation clip and change the Alpha to one in the Color setting.

Canvas added into an Animation Track with the Congrats text and buttons animated to fade in and out at the end of the scene.

The Complete Level cutscene final result showing Darren’s success.

The Level Completed final shot.

Play around with the settings to make the cutscene more dramatic if you like, but the next phase will be to setup the Beginning cutscene which will have audio and sound effects added to it.