My journey becoming a Unity game developer: Cutscenes-Camera Fade to Alpha

Objective: Creating a camera fade in from black to alpha.

Fade In technique to start the cutscene.

First, we need to create an UI element by going in the Hierarchy and Create->UI->Image and name the image Camera_Fade_Alpha. Looking at the Director’s note, we see the director wants the screen to be black and fade in to alpha in 0.5 seconds.

Director wants Fade In used to start scene.

Set the image to Black, go to the Anchor setting and select Stretch in the lower-right corner to stretch in all directions. Then, set the Rect Transform directions to zero which will expand the image to fill the screen. Next, go to Canvas game object, come down to Canvas Scaler and change UI Scale Mode to Scale with Screen Size.

A black image created to fill the screen to begin the fade process.

With Sleeping Guard Cutscene selected, add an Animation Track to Timeline. Drag the Camera_Fade_Alpha image into the animation slot to animate this image to fade in. After clicking the REC button, to set the first keyframe we will go to the Color setting inside the Canvas Fade Alpha object. Slide the Alpha bar from 1 to zero back to 1 to create the 1st keyframe. Move the Timeline needle to anywhere from .03 to .06 seconds, then go back to the Color setting and move the Alpha to zero. Now scrub the timeline and we should see the black image fade in to the cutscene.

Fade in animation used to start the cutscene.

Finally, take the Canvas and add it to the Sleeping Guard Cutscene game object. This Canvas will be solely for this cutscene and the other cutscenes will have their own Canvases solely for them. This will allow them to have animated components assigned to each Canvas and avoid any cross issues during the gameplay.

Canvas added to Sleeping Guard Cutscene.

The Fade In effect is a good way to give a cinematic feel to the beginning of this sequence in our cutscene.

Learning to become a Unity game developer.