Game Opening Storytelling- Game Dev Series 115

Quick guide: make a quick opening with timeline to your mobile game.

In this article, we would create a cutscene at the beginning of game to help players get into story quick.
A cutscene would let players into the mood of your game, and also get some basic information of the goal in this game.

Concept

Our goal of this easy cutscene would be into 3 parts:

• Create an awakening animation to Player
• Create some display text as Player solo dialogue.
• Create a cutscene to show the text.

Awakening

The first we need to do is making an awakening animation. With this animation, Player would look like wake up from the dungeon and trying to survive.
To do this while we do not have the animation resources, we can finish this part by using death animation.

If you reverse this animation, it would look like Player from lying down position to stand up.

That is what we are going to do.
Open Animator of Player. Copy the death state animation and paste it back to Animator. Select the new one and rename it as “Awake” and set it as default state.

Once set the Awake animation to default, create a transition from Awake to Idle. Leave it with exit time and this would make our Player into Idle after Awake animation

Then we need to adjust this Awake animation. Select it and change the speed into -0.8 in the Inspector. With minus number of speed, it would become a reverse animation, which is what we need.

After this, we can create the text of Player dialogue.

Dialogue

First of the dialogue, we need to create a gameobject in Canvas. In my game, I create an image as background color and the gameobject.

Then create text object to finish your dialogue.
I would create 2 dialogue to my Player.

Once finish, make the alpha color of these gameobjects(image and text) to zero. This would help us easier on making cutscene.

Cutscene

To create a cutscene, we need to create an empty object, then create a Playable Director component to it.

Then we can select this object and create a new Timeline.
In this Timeline, we would make the text display on screen in order. Then our Player would start its adventure.
Create an animation track and drag the image that contains texts into it. Then make the text shows up in order by using the alpha color.

Once done, we need to create another animation and drag the controller in. Then do the same setting to it. We would make the controller stay invisible while the text is playing.

That is all we need to do to create our cutscene.
Now you can play it and check the result.