Composing A Cutscene in Unity

Cutscenes are very popular throughout the gaming industry, so let’s dive into making a cutscene in Unity using Cinemachine and Timeline.

The two actors in this scene are 3D models which have attached animations.

When this cutscene plays, I will want to disable the in-game sleeping security guard asset, and replace it with this pair of actor prefabs. I bring the Get Card Cutscene prefab into the scene view, and place the actor sleeping guard exactly where the in-game object is.

The gizmo in the top right makes it easy to use top and side perspectives to quickly align the security guard objects.

Things are looking good!

The Sleeping Guard game object is now disabled in the hierarchy, as I only want to see the guard actor in the Get Card Cutscene.

Now that the actors are in place and on set, let’s create a virtual camera. If cinemachine is installed, it will be next to Window. I select the top option to Create Virtual Camera.

My default the first camera will appear as CM vcam1, which is short hand for CineMachine Virtual Camera 1.

The inspector on the virtual camera reveals some powerful options.

I create a second virtual camera and re-name them both. Posterior for the rear shot, and Anterior for the front (sorry I’m an anatomy buff!).

I select the rear camera and move it roughly into the desired starting position for my cutscene in the scene view. The image below is the virtual camera showing on the game view. The guidelines can be used for composing the shot on the active camera, but won’t show on your final cutscene.

The front camera is selected and similarly moved into position.

Now that I have my two cameras in position, it’s time to start a new Timeline!

The next few steps, as well as an introduction to Timeline in Unity, can be found here in my previous article.

READ INTRO TO TIMELINE BLOG

Now that the timeline is setup with a cinemachine track with both virtual cameras, an animation track for the actors, and an activation track for the key card, I can start panning the camera shots.

A new animation track is added to the timeline. I drag the rear camera (CM Posterior) into the animation track to assign it. The camera doesn’t have an animator on it yet, so I am prompted to create one.

If you check the camera in the inspector, you can see that it now has an animator component. The Priority level on this camera is increased from 10 to 11. The highest priority number will be the camera that shows as your main camera. To preview lower priority cameras the Solo button can be pressed.

Ok, back to the timeline! The little circular red record button can now be pressed to start recording a new animation for the camera.

While the animation is recording, select the camera in the hierarchy, then in the scene view, adjust the position slightly to add some initial key frames. Then I click in the timeline where I want the animation to end, and then go back into the scene view to reposition the camera into it’s final position, making some ending keyframes.

After the recording has stopped, keyframes can’t be adjusted from within the timeline. If you double-click on the new keyframes in the timeline, a dopesheet will open up where you can adjust the keyframes until the desired result is achieved.

Here I have the dopesheet placed above the timeline for editing, and I can preview how my cutscene is coming along.

I use the same process to pan the front camera, and then preview the results.

One thing you might have noticed is that the keycard never actually disappeared off the guards lap when Darren takes it. This can be handled using an activation track. The activation track will take a game object as a reference, and then activate or deactivate it at a designated point in time.

Simply drag the Active bar in the timeline to show when you want the object to be active. In this case, the card is present so it starts active.

The key card game object is dragged from the hierarchy into the activation track to assign it. I drag the right end of the bar to the location in the timeline that I want the card to disappear.

Now when previewing the cutscene, the keycard disappears when Darren steals it.

The last thing I want to do here is to fade in from a black screen at the start of the cutscene. In the hierarchy I create a new UI Image object, which will also create a Canvas.

This is what shows up in the game view.

The new UI image is renamed to Camera Fade Alpha, being the alpha channel is what will be used to create the fade in.

The color is changed to black under Image.

In the Rect Transform component has an anchor button that is now pressed. The bottom right option will stretch the image across the canvas. Setting the left, top, right, bottom and Z assignments to 0 will ensure the entire screen is covered.

The game view now shows a black screen.

Selecting the Canvas now in the hierarchy, the Canvas Scaler dialog box has a drop-down with an option to Scale with Screen Size. This will ensure that the entire screen is black no matter the monitor size.

Another animation track is added to the timeline, and the Camera Fade Alpha UI Image is dragged in to assign it.

After pressing record, I go into the color channel on the UI Image and adjust the Alpha channel to set the first key frame. Full opacity is the starting point. I move 1 second into the timeline and then pull the alpha channel all the way down to 0, making the black UI image fully invisible.

The preview shows my completed cutscene with a nice fade in from black.

This cutscene game object can now be set to inactive, and triggered by code when I want it to play! I hope you enjoyed this journey into making cutscenes in Unity, and thanks for reading!

--

--

--

I am an artist and musician, that is currently diving headfirst into game development with C# and Unity3D.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Help me Alex Goldman

There Are No Laws of Software Development

Game Dev Digest Issue #144 — Graphics Programming

Issue #144 - Graphics Programming

A Review a Day Keeps the Conflicts Away

iOS Push Notification

A Simple Guide to Update Docs on GitHub Using Git Commands

How to Database Operations without writing a single line of backend in 20 minutes??

Online HRMS System

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jared Amlin

Jared Amlin

I am an artist and musician, that is currently diving headfirst into game development with C# and Unity3D.

More from Medium

How to switch between Cinemachine cameras in Unity

Animated Tilesets in Unity

Importing Character Models and Animations from Mixamo into Unity

Creating a Pressure Pad in Unity