The Western Chamber


An interactive storytelling game design based on the classic Chinese opera play The Western Chamber. By taking on the role of the Hong Niang, the player helps the couple, the scholar Zhang Sheng and the daughter of a nobleman, Cui Yingying, get through the obstacles and successfully settle their marriage.


The Design and technical quality parts of this game design got 78 and 70 marks respectively in the assessment.

Why this?

The original intention of this project is to make traditional Chinese art more accessible to young people. For me, the most attractive thing about operas is their stories and tunes. But a lot of my friends around me think opera is only for old people, or find it boring, they can't understand or feel the appeal of opera. Therefore, I want to bring my favourite and most engaging voice to a wider audience, and perhaps let more people understand the appeal of opera and reshape their understanding of opera.

In addition, The Story of the Western Chamber was chosen as the prototype for the project due to its unique narrative style. In my opinion, love stories often appear in the tragic background of drama. But the Story of the Western Chamber is different in that its theme of tragic love and characters comes to a happy ending. The character who makes the story so successful is Cui Yingying's maid matchmaker, who helps Cui Yingying and Zhang Sheng throughout the story after seeing the old woman's immoral behaviour. Therefore, I decided to tell the story from a matchmaker's point of view in this game.

What is the Story of The Western Chamber?

The Western Chamber, written by Wang Shifu, tells the story of Cui Yingying, a young lady of the Sangguo, who, with the help of her maid, Hongniang, breaks through the shackles of the world and its elaborate rituals to become a woman of her own free will. In this story, the character of Hongniang often has to deal with people in various difficulties for the life of the young lady. The role of the Red Chamberlain in this story is huge, without the Red Chamberlain as the link between these two young people who dare not speak of their love and are bound by the rules of etiquette, this story is unlikely to come to a happy ending. Every difficulty they go through is like a copy of the game, with the Red Chamberlain acting as the intruder in the copy. This was the main inspiration for the project design.

How is it designed?


Requirement Design

Some Requirements that will support game design are listed.

Image of Stakeholders

Idealy Stakeholders

2022 Summer
Image of functional and non-functional requirements

Functional & Non-Functional Requirement

2022 Summer

Visually Design

The graphics are mainly ink and wash style, with a dark green background adding a sense of lightness and elegance to the whole screen. More attention is paid to the use of colour in the drawing of the characters and to fitting the costumes on the theatre stages.

The game is based on one of the versions of The Western Chamber performed by the Zhejiang Xiao Baihua Yue Opera Troupe. Therefore, the character designs are mainly based on the designs of this troupe, with some relative simplification due to the numerous and complex details and patterns of the costumes.

Character - Zhangsheng
Character - Cuiyingying

Comparison of in-game and real-life character costumes examples

2022 Summer

Character - Hongniang(player)

Comparison of in-game and real-life character costumes examples - the Player

2022 Summer

Aurally Design

The music also uses mainly audio from the stage but is a little fuzzy as the existing audio is from the 90s. For some parts that cannot be expressed through textual lines, audio of opera singing is used with associated animation to transition. For general character dialogue, simple click sounds are triggered when sentences are displayed to try to represent the drumbeat of the narration in the opera.

How the Prototype is produced?


Animated Clips Creation

Procreate is used to draw pictures of scenes and people on a tablet.

Adobe XD, is used to connect the trunk sections. For example, to start scenes with different section switching. XD is also responsible for the animations related to the backpack, such as opening it, closing it, saving items to it, and viewing item details.

Adobe Premiere Pro is used to combine the drawn scenes and the associated moveable layers into a video with the associated opera singing.

animation production

Example of Animations drawn by Procreate

2022 Summer
Screenshot from Adobe XD

Example of Animations connected by Adobe XD

2022 Summer

Screenshot from Adobe Pr

Example of Animations combined by Adobe Premiere Pro

2022 Summer

Dialogue Creation

iFVN, a visual novel creation tool is used for creating dialogue between characters.

Screenshot from iFVN 1

In iFVN, once a new story page is added, it is possible to edit the content directly on the left-hand side of the page. Character's name and dialogue can directly visible on the display screen and be repositioned by typing and draging.

2022 Summer
Screenshot from iFVN 2

Placing the character profile next to the dialogue box able clearly tell the player who is speaking at the moment.

2022 Summer

Final Prototype

Demonstration of project performance simulation

2022 Summer

Reflection

Since this is my first-year project, the production process and results are relatively simple. I had some problems managing and assigning tasks, focusing too much on plot design and neglecting the time required to draw images, resulting in very intense and heavy work in the later stages. This is my first time using procreate electronic drawing software, so I am not familiar with its usage. In addition, this project also includes some virtual novel special software learning and use, although the process is a little difficult, but the final result is still more satisfactory.

Compared to the previously identified non-functional requirements, the game's production style may not be particularly exciting for players. From a graphical and musical point of view, The West Wing will give players a gentler, slower, more laid-back feel than the excitement and tension it was intended to give players in the first place. What's more, user requirements need to be supported by more background research, but this is not well considered in the first year of production.

Unfortunately, the game was not complete, and due to time constraints, I could only make a few snippets, such as some dialogue clips and some scenes and animations. It will take me more time to finish it. But I did my best to make a demo of some of the game's main features to simulate the intended effects of the game. In the future, I hope to learn from this and manage and organize my time better. I also wish I could express my ideas in a better way. If possible, I want to improve and improve the game and have a chance to finish it.