Mobile Game Progression

Working with Timeline to Animate our Virtual Cameras (part 2)

Continuing from where we left off last time, we were setting up our Virtual Cameras with Cinemachine and attaching them with out Dolly Tracks for a panning movement. Now we will be working with the Timeline to sequence every camera movement into one seamless Animation.

Timeline:

To access the Timeline, it is under Window > Sequencing > Timeline.

Once the Timeline appears, we will need to create a new empty game object in the hierarchy to contain every Virtual Camera.

The parent object is going to contain the Playable Director, which is the controller for the Timeline function. Select the parent object to create a new Timeline.

Once you do, we are going to right click the window to create an new Cinemachine Track. Or you can click the “+” icon and select “Cinemachine Track” to add an new track for the timeline.

We are going drag our Main Camera into this slot since our Main camera is the object that contains the Cinemachine brain component. Then we are either drag in the virtual camera into the timeline, or you can manually right click and select “Add Cinemachine Shot” into the timeline.

We are going to add in every virtual camera shot into this timeline.

If you play now, you will noticed that the panning of the Dolly Track won’t play, but the transition between the virtual camera shot does transition all 3 phases. In order to create the panning transition we need to hit the Record button and manually animate the transition by changing the path position.

Click the plus icon and add an Animation Track then drag in the virtual camera, there will be a pop up if the Virtual camera object doesn’t have an Animator, but will prompt to automatically create one for you. Then you are going to hit the record icon while dragging the slider to be in the desired position. In the beginning shot I set the path to 0 and once the shot is about to transition to the next shot, I will change the path position to a 1.

I do the same for every camera shot by creating a new Animation track on the Timeline. Now once you hit play, you will see that the camera will pan according to the Dolly track position.

To make the black fader between the transition of shots, I basically took an UI black image that covers the entire scene, and animate the fade in and out

Then within the Timeline I created a new Animation track, but this time instead of dragging in a Virtual camera, I will be placing the new fader.

When the transition happens, I made sure that there is an fader happening between the transition by duplicating the fader animation.

With the same logic, I decided to do the same thing with the touch controls so I can hide the UI during the beginning animation.

Finally I also wanted the HUD UI to be hidden as well, and since I don’t want it to fade in an out, I decided to use an Activation Track in the Timeline. The activation track allows objects to be turned off until they are desired to be turn back on and of course vice versa.

I created an new Activation track and dragged in my HUD game object and placed the track near the end when I want the HUD to show up, anything before and the HUD would be hidden.

In the 3rd and Final article we will go over making a skip button so the players can skip the entire intro animation if they so desired.