Cinematography in Unity — Fade to Black
Make your project more cinematic with this simple trick
We continue our exploration of cinematography in Unity by learning a simple trick we can all use to easily make our projects more cinematic. What do I mean by cinematography in Unity? By that I mean the intelligent use of Unity cameras and visual tricks to make the best looking games we can.
And what is that trick? Well, think about some of your favorite movies and shows. Chances are there was a scene that faded to or from a blank/black screen, as opposed to cutting directly from one scene to the next. We can emulate this effect ourselves in Unity, and it’s not even very difficult.
Setting up
Before we can make our fade to black effect, we need to set up our project. We will need a Cinemachine virtual camera and a Timeline. I would recommend, as a best practice, to create an empty object to organize everything.
Once we have those in place, the next thing we’ll need is to create a new UI Image object. Adjust the color of the image to be black, then adjust the values of the Rect Transform to cover the entire screen. This can be accomplished by setting the X and Y min anchors to 0 and max anchors to 1, then changing the values of the Left, Top, Right, and Bottom fields all to 0.
See the above picture if you need any clarification.
Finally, we also need to configure the UI Canvas object that was created along with our Image object. In that, we need to set the value of the UI Scale Mode field to Scale With Screen Size.
At this point, we should see that our Game window is completely black. Now we’re ready to continue.
Fade to (or from) black
To create our effect, what we need to do is go into our newly created Timeline. Once there, we need to create a new Animation track, and then attach to that track our Canvas object. This will add an Animator component to our object.
Within the Animation track, start recording and then create a key point at zero seconds. Then advance forward in the Timeline some amount of time. The amount of time you advance by will inform how quickly the fade effect occurs, so feel free to experiment with different values to see what looks good to you. For this example, I am advancing forward by 1 second.
Once you are advanced on the Timeline, now you want to find your Image object and change the color value to have an Alpha of zero. This will make the Image completely transparent.
Advance the Timeline again by some amount and create another key point, with the Image continuing to have an Alpha of zero. This amount of time represents the rest of the scene in your project (you weren’t just going to fade in and call it a day, were you?).
Now stop recording and let’s take a look.
Looks good!
The problem
The effect looks good, but we have a problem now. The UI elements that allow us to create this neat visual effect are now blocking our view whenever we’re not in this Timeline scene. Fortunately, there is an easy fix for this.
First, select the UI Canvas and then deactivate it by unchecking the box next to its name. This will unblock our game camera, but also will break the new Timeline scene. We will fix it next.
Return to the Timeline and add to it an Activation track. On this new track, add the Canvas as the object affected. Then, on the Timeline, make sure that the Active portion covers at least through the time of the fade effect.
And that should take care of it. You may notice the Game window is still all black, but if you click away from the object holding the Timeline (especially to a separate camera) you should see it go away.
The reason this happens is that the object with the Timeline is showing us what is happening at frame zero of the scene, which is a black screen.
Conclusion
So we can see now that just a very simple trick like this can do wonders for our projects. Just the kind of thing we were looking for in studying cinematography.
In the next article, we’ll be focusing on matching up our audio assets with what we’ve been doing visually. Until then, thanks for reading.