Animations in games tutorial: A Useful Tool in Immersive Storytelling

In video games, it is a quite common way to use animations to show the details of the plot, especially as cut scenes in the tutorial or introductory level. Here in this article, I would like to give some introduction to tutorial animations design.

1. As a Start-up: Why Use Animations in the Tutorial

Game developers are quite concerned about the rate of new players passing the tutorial levels. This rate is influenced by a variety of factors, such as usability (whether players can learn it or not), immersion, interest, sense of purpose, etc., which all affect the willingness of players to learn more about the game mechanics in the introductory sequence.

The common roles that cut-scenes animations could play in the tutorial of a game are as follows.

Introduce the Background: I am the Protagonist

“Immersion means that the player's mind and the role in the game being combined into one, and so what happens to the role means quite a lot to the player himself."

Cut scene animations enable players to understand where they are, who they are, and what they need to do. In this way they can become indulge in the virtual world of the game, making it easier to understand the settings and mechanisms.

Harry Potter: Magic Awakened has taken use of rich and vivid cut scenes to make players realize 'Now I'm a freshman at Hogwarts'. The whole animation is similar to the process of Harry's admission in the HP movie. From receiving the acceptance letter, Diagon Alley, the railway platform, and then to the auditorium branch, the scenes offer players a complete experience of the Hogwarts.

Compared to the movies, video games are more able to enhance the player's immersion by applying interactive scenes, for example, such as the decision option when receiving the admission letter, tapping on the wall with an umbrella before entering Diagon Alley, long pressing on the phone screen to get into the platform and so on. These simple interactive designs between the game and players bring interesting changes to the animations, give the players a feeling of surprise (especially for the fans of the Harry Potter franchise), and also make players feel more like it is themselves who acting in the game right now.

Players choose to believe in magic and open the admission envelope.

Hold with two fingers and the protagonist rushes into the platform

Recognize the Goal: Internal Driving Force for Players

Most games set a goal at the beginning, which makes the behaviors of the players in the game reasonable rather than nonsense. With the goal, it would be easier for players to learn the game's mechanisms. Even without costly and detailed cut-scenes animations, there are some flexible ways to tell players 'what I should do'.

End Moon is a good example that tells the story in a way combined with illustration with words. Introducing players to the background that grandmother is missing and Little Red Riding Hood is heading to the Black Forest, efficiently links all those battle scenes and different buff levels.

The opening sequence in End Moon

In this way, no matter whether the story has a certain ending, players are offered a clear direction given by the plot at the tutorial level.

Interest Leveling-up: Stop and Enjoy!

In the tutorial that contains a lot of learning points, the addition of the plot often offers players a little break as well as a potential sense of surprise, ensuring that they are not lost in the long tutorial process due to exhaustion and boredom of continuous learning.

The tutorial in Onmyoji: The Card Game is divided into three levels, in which players need to fight respectively with three different characters. The three levels are interspersed with simple character dynamics and dialogue, so that players can take a break in the long tutorial process and then continue their learning, instead of getting tired of the information input.

 After Santaro's defeat, a short dialogue between the other two characters.

Next, I'd like to share some tips in the design process after working on the actual product.

2. Exploration: Pre-design Planning in a Project

In the pre-planning stage of cut scene animation designing, it is necessary to determine the appropriate form of expression according to the actual situation of the project, and here are the three aspects that we should consider first based on player experience.

Depending on the characteristics of the game, cost budget, and available resources, tutorial animations can take very diverse forms. Some of the most common ones are as follows.

2D animation

Fire Emblem: Three Houses takes use of 2D animated video to explain the ancient background. The fancy animations alongside with polished plot give players an almost perfect experience based on the story. This animation form is highly common in JRPG games, and what is really special is that Fire Emblem's cut scene ends with the suspense of the plot, which attracts players efficiently and triggers their great curiosity.

In Fire Emblem, the opening sequence features the protagonist holding a bloodied sword and muttering to herself.

2D animation + dynamic effects

In Total War: Three Kingdoms, after the player chooses sides, there is a video that briefly introduces the background of the story. The video is mainly made of 2D key-animators and transitions, and the ink-painting style and camera movements matching the mood have been a good expression of the game's worldview of 'the Han Dynasty is in decline while the three kingdoms are rising'. It also includes some Chinese ink-painting style rendering 3D models, which creates a unique and rich effect.

People were living in distress, and Sun Jian rises.

Transition effects with ink-painting style rendering

This kind of transition is also used in Naraka: Bladepoint. For example, in the following GIF, the character appears first, then the giant claw, and finally the Buddha shows his face. Although the staining ways of the three characters are the same, the characters are introduced in a clear sequence, as if it indicates a short story by these pictures. The player may not notice the person in the giant claw if there is just one static image of it, and the sense of feeling the story will be weakened a lot.

The cultivation animation in Naraka: Bladepoint.

3D animation

Clearly, the common expression form of 3D needs no further elaboration.

A combination of different expression forms

In an opening animation of Overwatch, Winston works as the main narrator of the entire story. The scenes containing Winston himself are all 3D animated, while what he narrates is expressed by 2D static images, along with animated scenes of the various heroes celebrating their victory in the game at the end. This is a useful form of organically combining the game's available resources with the storytelling work so that there is no need to model for some unimportant characters in the flashbacks.

Winston turns on the screen and recalls the moments from the past.

3. Design: animation-designing scheme for projects

Making an animation cut scene requires considering a great deal of content. As follows, I choose three aspects that I feel are most important and I'll explain them in detail. They are the combination of animation and game, camera language, and characteristics in action.

How to combine the animation and game better?

Essentially, the animated video in the game works as an auxiliary means of the game, which should be combined with the content of the game. So in our developing process, we should not just focus on the content of the animation itself. The following are some clever ways to combine animation and your games.

● The beginning/end of the animation is closely connected with the game itself.

Let's take Mario Odyssey as an example. At the end of the animation cut scene, Kuba destroys Mario's hat, and the hat ghost appears and grabs the rag of the hat. In the game, the 'hat' is the core prop of Mario, and the hat ghost is also the character responsible for the tutorial in the beginning. The design at the end of the animation cut scene connects it smoothly with the next introductory part.

Mario's hat is torn up, then the hat ghost appears

Jumping into the tutorial

But it also needs to consider the cases when players choose to skip the animation. If the cut scenes can be skipped in the game, the designers should make sure that it won't interrupt the smooth flow of your game.

● Tutorial mixed up with animation cut scenes

This form combined the tutorial with animation cut scene usually gives the player a strong sense of immersion. Melt in one scene coherently, the context will be less information-dense, and it feels more like the player himself participants in the story through interaction. In addition to the above-mentioned Harry Potter: Magic Awakened, Sakuna of Rice and Ruin is also a powerful example.

When Sakuna first began to chase humans, although it is still in animations, the view behind her has already changed to the background of the corridor of the imperial column, which smoothly connects with the tutorial part, so that the immersion of players won't be interrupted.

Sakuna stomps her feet in frustration, and then players come to the tutorial.

Midway through the tutorial, several more humans appear to destroy the vase, and Sakuna needs to continue her chase. Directly placing model animations in the guidance allows the players to take a short break and also enhances the sense of goal to continue with the process.

Sakuna (player) walks halfway while several humans appear to push the vase down.

Storyboard: the magic of camera language

The efficient use of camera language has two main benefits.

● Create a specific atmosphere with the animation content

● Compensate for the goof caused by the limitation of project resources

As for goof problems, there are always more solutions than difficulties. So the following is mainly about how to use camera language which is common in movie making to create the atmosphere we need in-game.

Camera distance: telephoto is mainly used to illustrate the environment, the panoramic view often tells the relationship between the elements of the picture, the half-body view usually focuses on the upper body movements and facial expressions of the characters, and the close-ups take the micro-expression changes of the characters to convey some suggestive information.

Camera movement: we usually push the camera forward to highlight the main subject of the picture, when the subject is a character, it shows his psychological changes of him. Horizontal moving shots are used to present the continuity of the scene and the environment.

The following GIF from the opening animation of Naraka: Bladepoint works as an example.

First of all, the camera moves between the 3 characters at a variable rate to create a sense of motion while taking panoramic or semi-body shots, mainly used to show the movement of individual characters. The characteristics of each character are highlighted with different colors with the ink-painting style. After that, the telephoto lens shot properly presents the strained relationship between the characters and stories.

The opening animation scene of Naraka: Bladepoint

A similar shot is used in the tutorial in UNO. A telephoto lens shot shows the character relationships: it's a 4-player card game; afterward, the camera zooms in and takes a close-up shot in the cards in the center of the screen for the subsequent explanation of the rules.

The opening movie scene of UNO

4. Summary

Animations in game tutorials can play the role of introducing the virtual world, enhancing the immersion, setting a clear goal for players, and creating an atmosphere for them to immerse. However, in the development and design process, it requires comprehensive and careful consideration of the feasibility problem including project characteristics, project resource conditions, and how to connect the animation cut scenes with the game, as well as how to determine the way of action design using appropriate camera language, etc. In this way, the animations in the tutorial can finally be integrated with the game, and succeed in assisting with storytelling and tutorial pass rate.