My journey becoming a Unity game developer: Beginning Cutscene-Fade Effects

Objective: Add fade effects to the beginning and end of the Intro Cutscene.

Final results of fade effects at the beginning and end of the cutscene.

Start by creating an Image game object inside the Intro Cutscene game object, and name it Fade Img. In the Rect Transform component, click on the Anchor setting and select the All Directions anchor in the lower right-corner. Set the Transform positions to zero which will make the image cover the entire screen. Set the Color setting to Black to represent the fade effects appearance. Click on the Canvas game object and in the Canvas Scalar component, change the UI Scale Mode to Scale with Screen Size.

Fade image created for the fade effects.

Inside the Canvas object, create a Text object and name it Skip_text. In the Text field box under Text component, type in “Press ‘S’ to skip” which will appear in the middle of the screen. Change the text Color to White, and set the Font Size to 20.

Text added for the fade effects.

Click the Anchor setting under the Rect Transform and set the text to the lower left-hand corner. Use the Rect Transform Positions to move the text a little bit to the right and up.

Text positioned to the lower left-hand corner.

With the Intro Cutscene selected, create an Animation Track for the Canvas object to animate the Fade_Img and Skip_text objects. Click the REC button and position the timeline pointer at the beginning of the clip. Create the first keyframe by setting the Fade_Img Color to Black moving the Alpha slider back and forth to one again. Set the Skip_text Color setting Alpha to Transparent so the text doesn’t show on the screen when the screen is black. Move about half-second up and set the Skip_text Color Alpha setting to 1 which will show the text onscreen. Set the Fade_Img Color Alpha setting to Transparent which will show the cutscene playing.

Animation Track created for the Canvas to animate the Fade image and text in the beginning of the cutscene.

Go to the point in the cutscene where Oliver ends the scene by saying “Noted” with the timeline pointer. With the REC button still on, begin the fade out process by setting the Fade_Img object Color Alpha to zero again moving the slider back and forth. Move to the end of the animation and set the Fade_Img Color Alpha setting to 1 for the screen to turn black. Change the Skip_text Color Alpha setting to zero to remove the text from the screen.

Animated the Fade image and text at the end of the cutscene.

The final results of the fade effects in the beginning and end of the cutscene.

Make sure to turn off the Intro Cutscene as this will be called upon through code in the game. Last, place the Intro Cutscene object inside the Cutscenes game object to keep all the cutscenes organized.