Sprint 4 - Team 7 task ticket 2: Design display effects of transition animations and special effects

[LIU-Evelyn]

Description

Task: Design display effects of transition animations (how many images, duration etc.), and design special effects (based on scenario) Feature: Improve features based on the win/lose logic and eviction menu: Goal 2

After analysing the feedback gathered from user survey, the basic display logic and style of transition animation/special effects have been determined through the studio. In terms of design, we will design two or three types to present the transition animation as well as special effects and prepare for the A/B testing that we will do in user testing. The interaction process may include: visualize the eviction process and Display the corresponding effects around the prompt box according to the selection result.

Example

• Transition animation: After the user selects an NPC: A: shows the eviction animation with a specific (corresponding) NPC image throughout the whole process ; B: when the eviction animation starts, the image of the NPC is uncertain, and the corresponding NPC will not be displayed until the result is judged;.
• Special effects: When the correct prompt box is popped up, there will be ribbons. When the error prompt box is popped up, there may be black fog etc....

Dependencies

• [x] Win/lose condition for selecting the traitor (#122 ).
• [x] Npc infomation and storyline (#64 ).
• [x] Display styles relies on feedback gathered form the studio (#191 ).

Milestones

Steps that need to be completed for this task:

• [x] Step 1: Design draft of transition animation and special effects and prepare for user testing (Oct. 13)
• [x] Step 2: Improve the final image and effect of the feature after user testing (collect data). (Oct. 15)

Completion Deadline: Oct. 15

Documentation

• Eviction menu
• Storyline
• Sprint4 - Polishing-tasks: User survey (Team 7)
• NPC information

Member

• Yingxin Liu (@LIU-Evelyn ) (Yingxin LIU)
• Kexin Du (@motaA0309 ) (Kexin Du)

[LIU-Evelyn]

The idea and draft of animation process:	Process 1	Process 2	Process 3

If it is the correct or wrong selection:	Wrong selection	Correct selection

[LIU-Evelyn]

Based on the idea and draft, we designed the initial image and it will be improved in next stage:

Plan A-1	Process 1	Process 2	Process 3

If it is the correct or wrong selection:	Wrong selection	Correct selection

Plan B-1	Process 1	Process 2	Process 3

If it is the correct or wrong selection:	Wrong selection	Correct selection

[motaA0309]

After user testing, I further designed the transition animation based on 8 different NPC characters

Doris	Process 1	Process 2	Process 3

Heph	Process 1	Process 2	Process 3

Metis	Process 1	Process 2	Process 3

Nereus	Process 1	Process 2	Process 3

Orpheus	Process 1	Process 2	Process 3

Prince	Process 1	Process 2	Process 3

Zeus	Process 1	Process 2	Process 3

Zoe	Process 1	Process 2	Process 3

If it is the correct or wrong selection:	Wrong selection	Correct selection

Besides, I also drew the intial design of the background for the transition anmation.

Background	Background with the characters

[LIU-Evelyn]

The final eviction process after user testing and refining:

Initial background	Final background

The final eviction process displayed in the game

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

More modified details can be found here: Transition Animation and Effects: Design Process & Guideline