Cinematography in Unity
Introduction to Timeline and Cinemachine in Unity
Expertly crafted cutscenes in video games can add a lot of depth to the story line and draw in the player even more. These cutscenes are also great for having characters perform specific actions that can bridge gameplay from one environment to the next. In Unity, cutscenes can be made easily using Timeline and Cinemachine, two very versatile tools available for free from the Unity Asset Store.
Timeline in Unity is, at its most basic level, an animation track that is a sequence of difference events. In any given timeline you can play animations, move characters or game objects, play audio, and even move the camera. Cinemachine is another Unity tool that can help make these cutscenes easy to build and look professional. Using cinemachine with timeline will allow us to blend the cutscenes and make dynamic cuts.
In the game The Great Fleece, our player needs to steal a key card from a sleeping guard without getting caught. While the player has plenty to do in this game, this particular game event will be accomplished using an animated cutscene that we will create from a set of notes given to us by the game designers and artists. If you are a single developer working on a large project such as this one, it is always a good idea to sketch out your vision of how cutscenes will play out. This makes YOU the director in this scenario.
As you can see, this cutscene has three parts. First, the player (Darren) sneaks up to the sleeping guard while the camera pans up and left to give a camera view over his left shoulder. Next, the view changes to a different view which then pans down slightly to clearly show the guard’s keycard so that we can see the player’s character grab the card. And finally, the camera pans up to show the player’s character’s face where we can see him looking to make sure the guard is still asleep and that we successfully grabbed the keycard. The cutscene animation then fades away and we resume the game.
To begin, we need to setup, or block, the scene in Unity and make sure we have the characters in their starting positions and that their animations are setup. We also need to create and place our virtual cameras for the scene.
Normally, the assets you will use for a game such as this one come with both game assets and ‘actor’ assets. These actor assets are only used in the cutscenes and may have more detail, certain movements, or some other attributes that are only needed for these cutscenes.
For example, in the card stealing cutscene, the 3D model prefab has both characters, the office chair, the keycard, and the animations needed for this scene. All we need to do is create the timeline of events, play the animations as needed, and edit them to the specifications of the directors notes.
First step is ‘blocking the scene’ — this means to get the actors in place for their roles in the cutscene. Our game scene of the museum already has the sleeping guard game asset but we need to use our ‘actor’ assets for this scene so we need to put them into the scene and get them into position and hide the original guard asset for the cutscene.
If we run the game now, the actors will play their animations right away. This is because the actor asset has everything already built into it; the characters, the animations, and even the card itself (notice in the animation below, the card stays on the guard’s waist after Darren grabs it).
Great! Now the next step is to setup the shot. We will use cinemachine for this. Find Cinemachine from the Unity Asset Store and download/import it into your Unity game project. Once you have cinemachine installed into Unity you will have a new menu item on the main toolbar called, you guessed it, Cinemachine. In this menu, select Create Virtual Camera. Looking back at the director’s notes, we will need two virtual cameras in this cutscene, so let’s rename this one to something to make it easier to remember what it is for…OTS stands for other the shoulder.
Once it is created, just align it with the scene by selecting the camera and pressing CTRL-SHIFT-F on Windows or COMMAND-SHIFT-F on Mac (after setting the scene view to match what you want to see). This should line up the virtual camera’s view with the scene view.
Rule of thirds (More like a suggestion of thirds). If you break the camera view into nine equal sections (3x3), you end up with four intersections — one at each corner of the center rectangle. If you place the characters or the action close to on of these corners (or thirds) you will get a more ascetically pleasing shot. For example:
We end up with more of the surrounding environment in the shot (for better context) and this action (grabbing the card) is not dead-center of the scene.
We have the first shot set up. According to the directors notes, this first shot will pan slowly up and left, showing the sleeping guard and building suspense for the action to come. The second view will require a second virtual camera, so let’s create that now by selecting the fist one and duplicating it (CTRL-D).
Position this second virtual camera where it will display the action the director requested. In this scene they want the card to be the focus so I set up the camera to place it just off center of the shot. The director’s notes state that the camera should pan down to focus on the card while Darren is reaching for it, then pan back up slowly as he takes it so we can see his reactions for successfully getting the card without waking the guard.
Finally, before moving on, let’s organize the Hierarchy better. Create an empty game object named ‘Sleeping Guard Cutscene’ and place the actors and virtual cameras as child objects under this new game object. You can also make another empty game object to hold your virtual cameras for even better structural organization. This also allows us to enable/disable the entire group of game objects needed for this cut scene with one command.
Awesome! We now have the scene setup and ready to ‘shoot’. In tomorrow’s article, we will start using Timeline to set the cuts and animations as laid out in the director’s notes.
See you there!
