Design display of transition animation, special effects and sound effects

Sprint 4：Adding transition animation, special effects, and sound effects to make the game "juicy"

Background & Goal:

"Atlantis Sinking " is a puzzle game where users need to find the traitor who caused the sinking of the continent by completing tasks and collecting clues. Our team focused on developing the player eviction menu, which is an important interactive feature and created the win/lose logic associated with it.

In the previous three sprints, our team has completed all functions based on the player eviction menu:

1. Players can enter the eviction menu interface by "clicking" the menu icon in the game.
2. Players can browse the basic information of the corresponding NPC on each NPC card (eviction card).
3. Clues and information related to the NPC will be presented in the corresponding clue window after the player "clicks" on the NPC card (eviction card).
4. After the player "clicks" the select button corresponding to the NPC, a confirmation box will pop up to confirm the player's choice.
5. After the player confirms the selection, a correct/wrong prompt box corresponding to the win-lose logic will appear to display the player's selection result.
6. After selecting the correct traitor, a transition screen will pop up to instruct the player how to win the game.
7. The corresponding punishment mechanism will be punished when the player chooses the wrong NPC, such as reduced health, time reduction, etc.

However, although the eviction menu has almost included most of the interactive features, after several user tests, our team found that if we want to make the player experience the game more immersively, some visual eviction process and interesting interactive effects is essential.

Design Process in sprint 4

Before designing our feature, our team designed a questionnaire and conducted a pre-design user survey. . After delivering the first version of the design, user testing will be conducted and the designers will continue to improve the design based on the shortcomings and feedback of the initial design from it.

summary of the pre-design user survey questionnaire(Sprint 3) link: Sprint3 - Win/lose Condition: User survey (Team 7)

summary of the pre-design user survey questionnaire(Sprint 4) link: Sprint4 - Polishing-tasks: User survey (Team 7)

summary of the post-design user testing questionnaire(Sprint 4) link: User testing for optimizing eviction menu and win-loss conditions (polishing tasks)

Analysing the pre-design user survey questionnaire (sprint 3 & 4):

• Appropriate sound effects can give users a better experience, such as when opening menus/windows/popups. But should avoid adding too many sound effects to the menu causing negative optimization.
• When the correct/wrong prompt box pops up according to the winning or losing conditions, corresponding special effects should be added to further show the selected result and the state of the game so that players can experience the interaction more immersed.
• Add an eviction animation to visualize the eviction process in the middle of the user clicking the select button and the popup prompt.

Therefore, in this sprint, our team will design transition animations corresponding to NPCs as well as appropriate special effects and sound effects to connect the interaction process with the eviction menu and win/lose conditions.

Transition Animation (Visualize the eviction process)

Initial idea

Combining the results of the pre-design user survey, we initially considered how many eviction process actions would be displayed and what the general flow would be. Finally, we determined that four animation processes will be included in the transition animation, which are:

1. The player finds the corresponding NPC;
2. The player captures the NPC;
3. The player takes away the suspected NPC to check the identity;
4. Displays the inspection results.

Below is a conceptual draft of this process:

Eviction process

Process 1	Process 2	Process 3

selection results:

Wrong selection	Correct selection

Further Design

We created the corresponding NPC image based on the initial concept draft, added it into the initial process, and optimized some display details, such as redrawing the image of the NPC to match the design style of the eviction menu, designed character movements, etc.. In addition to this, we designed two plans to demonstrate the eviction process based on this interaction in preparation for user testing.

Plan A initial

Eviction process

Process 1	Process 2	Process 3

selection results:

Wrong selection	Correct selection

During the eviction process, the image of the NPC corresponding to the player's choice will always be displayed in the process (all steps), which is to display the player's choice more intuitively. If it is a traitor, the image of the NPC being ”tied up“ will be displayed at the end; if not, the image of the player's "frustrated" will be displayed, as shown in the above process.

Another form of process 3:

Moreover, we have additionally added more design to the third screen of the eviction process. This is because our team will do a more vivid interactive animation on the third screen, so the player's choice of this process is very important.

Process 3 form-1	Process 3 form-2

Plan B initial

Eviction process

Process 1	Process 2	Process 3

selection results:

Wrong selection	Correct selection

During the eviction process, the image of the corresponding NPC will not be displayed but replaced by the image of "the man in the cape" to indicate that the identity of the traitor is unknown. The corresponding NPC image will not be displayed until the selection result is determined (the fourth step of the process). If it is a traitor, it will display the image of the NPC being tied up; if not, it will display the image of the player's "dispirited", as shown in the process above.

Changed and Improved

After conducting the user testing, the designers in our team found the drawbacks of the initial design and determined a clear improvement plan, which was mainly about making the corresponding images of NPC always be displayed in the whole process and further refine the character's appearance and actions based on feedback. Finally, to make the transition animation look smoother, we designed a background to connect each image (frame).

1. Changes of the player image

We have optimized the player's image based on user feedback to ensure a better visual experience for users:

• Optimized the player's image display: made the body proportions more normal, and added details to the player's clothes, such as shadows, folds, colour matching, etc.
• Optimized the player's actions: Since the perspective of the created transition animation is obliquely rearward, it is necessary to pay attention to the action of "the interaction between player and NPC". We have optimized the player's posture when holding the rope, the movement changes when throwing the rope, and the movement changes when dragging away NPCs to make them more aligned with the real world.
• Combined with the user testing results, the player's image in the third frame is changed to the front to distinguish the difference between the key image(as a dynamic picture) and the first two images.

The comparison of design improvements is as follows:

Initial Player 1	Initial Player 2	Initial Player 3
Improved Player 1	Improved Player 2	Improved Player 3

2. Changes of the NPC image

According to the results of the user testing, we chose plan A: display the corresponding NPC image in the whole process of the eviction animation so that the user can see the eviction screen of the corresponding NPC more intuitively.

• We first made some optimizations to the image and actions of NPCs based on the first draft, such as changing shadows, sizes, and actions.
• According to the user's wishes, we changed the image of the third frame of NPC to "sitting on the ground" to distinguish the process of eviction.

Take Metis for example

Initial Metis 1	Initial Metis 2	Initial Metis 3
Improved Metis 1	Improved Metis 2	Improved Metis 3

In this regard, we designed 8 eviction images corresponding to NPCs:

Doris 1	Doris 2	Doris 3	Heph 1	Heph 2	Heph 3
Nereus 1	Nereus 2	Nereus 3	Orpheus 1	Orpheus 2	Orpheus 3
Ares 1	Ares 2	Ares 3	Zeus 1	Zeus 2	Zeus 3
Metis 1	Metis 2	Metis 3	Zoe 1	Zoe 2	Zoe 3

Final version of the eviction process

After a series of tests and iterations, we settled on the final version and tested the smoothness of the process with an interactive prototype:

Doris 1	Doris 2	Doris 3	Heph 1	Heph 2	Heph 3
Nereus 1	Nereus 2	Nereus 3	Orpheus 1	Orpheus 2	Orpheus 3
Ares 1	Ares 2	Ares 3	Zeus 1	Zeus 2	Zeus 3
Metis 1	Metis 2	Metis 3	Zoe 1	Zoe 2	Zoe 3

We also made some minor adjustments to the characters in the last frame, such as modifying facial features, and clothing, adding shadows, etc:

Final Wrong Selection	Final Correct Selection

Transition Background

After user testing, we found that if only has character interactions will make the entire transition animation seem to lack connection to the game context. When users experience the interactive prototype, they pointed out that because there is no suitable eviction scene, the entire transition animation looks a bit boring, and sometimes even makes people feel confused: what stage is expressed by a certain action. So we designed a scenario:

We used the elements of the ocean in the design of the background, used sand and rocks as the land and background, and added elements such as coral and aquatic plants to enrich the picture. At the same time, we used light and shadow effects to present the perspective we needed and created the feeling of the ocean floor.

Initial background	With character

However, when we added character interaction to this background, we found that the composition of the scene did not meet our expectations, and some perspectives did not quite match the display of the character. Therefore, we made changes to the composition and layout of the background, while optimizing some elements:

Final background

The final eviction process displayed in the game

Below is the process of the eviction animation that is finally expected to be shown in the game.

Notice: in the process of taking away the NPC, the image of the character will become larger and larger with the animation of walking to better demonstrate the interaction.

Take Ares for example

Find NPC	Tie Up NPC
Take Away Start	Take Away End
Not A Traitor	Be A Traitor

Special Effects

We initially envisaged two schemes for making special effects:

1. Let the team's designers draw different frames according to the game state (correct/wrong selection), and generate "altas file", here we assume that the special effects of the pop-up window can be generated similar to characters animation;
2. Create particle effects according to the game state (correct/wrong selection), here we need to use Libgdx's "2D Particle Editor", and then developers can integrate it into the appropriate popup.

The Tools for creating particle effects can be downloaded here: https://libgdx.com/wiki/tools/2d-particle-editor

After several discussions, we found that making particle effects can show users the state of the game more directly and effectively, and it can provide more vivid and interesting dynamic effects.

1. After the user selects the correct traitor and expels him, the celebratory special effect will be triggered simultaneously as the correct prompt box pops up: Celebratory Fireworks.
2. If the user chooses the wrong NPC the first time and fails to expel the traitor, the bad situation special effect will be triggered simultaneously as the wrong prompt box pops up: Brown Smoke.
3. If the user chooses the wrong NPC the second time and fails to expel the traitor, the worse situation special effect will be triggered at the same time as the wrong prompt box pops up: Black Smoke.

During the design process, we continuously improved the display method, location, style, and colour scheme of special effects. For example:

• Move from the top of the screen to the bottom of the screen;
• Display at the top of the prompt box to be symmetrical on both sides of the prompt box;
• Adjust the colour of the smoke (the original colours are red and green, but it doesn't quite fit the situation).

The design process and final version of the correct selection

Design Process: Correct	Celebratory Fireworks

The design process and final version of wrong selection 1

Design Process: Wrong1	Brown Smoke

The design process and final version of the wrong selection 2

Design Process: Wrong2	Black Smoke

Sound Effects

In order to improve the user's interactive experience, we have added corresponding sound effects to some important "actions", such as:

1. Opening/closing the eviction menu;
2. Opening/closing the clue window;
3. Sound effects are triggered when the correct/wrong prompt box pops up.

Design process

In the design of menu sound effects, since the icon of the eviction menu is in the shape of a book, we chose to use the sound of "quickly flipping books" when designing the sound effects of the menu open and close. In addition, since the image of the clue window is a scroll, we use the sound of "slowly turning pages" to express the sound effect when opening/closing the window.

1. We first recorded a sound of quickly flipping books from life.
2. Then we used a sound editor to compile the sound and clipped the timing and decibel of the audio to make sure it was better displayed in the game.

The sound effect of opening clue window in the game

The sound effect of closing clue window in the game

The sound effect of Opening the eviction menu in the game

The sound effect of closing the eviction menu in the game

When designing the sound effects that can reflect the corresponding selection results (when the prompt box pops up), the sounds in simple life lack some special feeling, such as the cheers/depressed sounds of the crowd. Therefore, we choose to first find suitable audio sources on the open resource platform:

We first found a copyright-free platform and ensured that the source it provided was commercially viable.

Then we found some sources that matched our expectations and modified them:

Regarding the sound effects of the wrong prompt box and right prompt box, we used the sound source from Freesound, using two different tones of frustration(meltormen, 2020 & schroedel, 2016) and a cheering voice(kyles, 2022) to represent the first/second wrong and the correct choice.

All audio was redesigned. And if just simply lengthening or shortening the overall sound source will make the sound effect very strange, producing a sound effect that is very different from what we need.

1. In order to make its duration meet our needs, we cut it and re-spliced it.
2. While changing the overall duration of the sound effect, it will not change the sound effect we need.

Especially the correct sound effects, because the sound source is long and the soundtrack changes greatly from beginning and end, in order to shorten the duration and reflect a complete process of cheering from start to finish, the sound source has been edited and spliced multiple times to make it appear as a whole. While the duration is shortened, the cheers remain intact and smooth, without a cliff-like drop or abrupt end.

3. The sound source was then inspected to find some noise in the source, and then we denoised them.

The sound effect of popping up the right prompt box

The sound effect of popping up the wrong prompt box1

The sound effect of popping up the wrong prompt box2

Reference list

1. kyles. (2022, June 9th). Freesound. https://freesound.org/people/kyles/sounds/637159/
2. meltormen. (2020,August 17th). Freesound. https://freesound.org/people/meltormen/sounds/530912/
3. schroedel. (2016, February 22nd). Freesound. https://freesound.org/people/schroedel/sounds/337727/