Lining up Audio & Visual to Build Cutscenes in Unity

The exercise here demonstrates bringing an audio file and visuals together to build a cutscene in Unity using Timeline.

It is assumed that the audio file is already set and adjustments are being made with respect to that file here.

In the scene here, the audio file is basically narrating the main objective at hand and the visuals help understand the geographical situation to the player.

Instantly, it becomes your story :)

These are some of the basic ingredients to make a cutscene.

  • Virtual cameras (With their movements)
  • Sound clip that tells the story
  • Background music
  • Transitions in between cuts
  • Animation of involved characters

Together, they will be assembled into timeline which would become an asset that will run within the game.

  1. Setup virtual cameras

The main task here is to get a frame of choice and snap a virtual camera at that frame.

Later, in timeline, this virtual camera would need a new transform position which could be achieved by animation.

In the end, when the timeline would play, two transform positions would behave like camera panning locations. Basically a cinematic shot :)

Below is an example.

Unity

The main camera is a cinemachine asset which can take cinemachine tracks.

Unity

The rope shot virtual camera is located at this frame.

Unity

Since it has been added in an animation track, it can take transform position flags along the track.

Unity

When these all will be working together, a panning shot would be achieved.

Below are all such shots from this scene.

Unity

NOTE: A little bug in Unity is that when a rotation effect is added in the last transform flag, it gets applied to the beginning transform flag as well. To solve it, the initial flag’s transform rotation property has to be reset, Unfortunately. (It could be done by altering it in the animation window.)

2. Sound Clip & Background Music

This is the easiest part ! The audio elements are mostly worked on outside Unity and they are only brought in to be played.

Unity

3. Transitions

Here, an image component is used from the UI drawer and the alpha value is altered in the animation track just like how the transform positions are changed.

Unity
Unity

4. Animation of involved characters

Below is the character that has a pre built animation in place. All that needs to be done here is to add an animation track in timeline and attach the animation in it.

Unity
Unity

Below is the final look of the timeline after arranging all assets in the fashion explained above.

Unity

Here is the final result :)

Thank you very much

Work in Progress.