Light & Shadow

A Silent Journey

Kim Mai, Kelly Lu, Lila Hoang, Sophie Wang, Eileen Gu, and Naewon Eo

How can we design a game for accessibility, where players learn to communicate only through shared visual language, gestures, and understanding?

See the game here.

We coded a game with mechanics tailored to hearing disabilities with nonverbal communication methods using AI.

“The two civilizations coexisted side by side in a time where the light and darkness was common everywhere and coincided. Eventually a family was born of a shadow father and light mother who bore twins, one light, one dark. However, when a mysterious tower and gate appeared, the balance between light and dark was shattered. The gate blocked light from reaching the shadow lands and vice versa, making travel between the two worlds impossible. Unable to speak or hear, they taught their children how to communicate through gestures (similar to ASL). Determined to reunite, the parents fought against the separation by entering the tower, but the exposure to their opposing elements eventually took their lives.”

In a group with Kelly Lu, Lila Hoang, Sophie Wang, Eileen Gu, and Naewon Eo, we created conducted research on hearing disabilities, drew a story draft, brainstormed mechanics, planned 3 levels, created visuals in Figma, coded the project, gathered feedback, and implemented the changes in p5.js using Visual Studio Code.

Roles

There were 5 group members, each of them playing an important role.

Research and Analysis - Kelly Lu

  • Research the chosen disability in a global context, identify its challenged or adaptation, and integrate the research into the game mechanics

Game designer - Lila Hoang

  • Conceptualize the core gameplay mechanics, design the structure and flow of the levels

Programmers - Sophie Wang, Eileen Gu

  • Implement the game mechanics and core functionality for the 3 levels and debug the code

Visual Designer - Naewon Eo

  • Create visual assets, design the levels

Project Manager - Kim Mai

  • Oversee the project, support group members, facilitate communication, manage files, and submit the projects

Part 2 - High-Fidelity Prototype

Then, we presented our low-fidelity prototype to the class, gathered feedback, and implemented them.

What kinds of changes were made?

  • Fixed various bugs (ex. levels not completed and going to the next, player being able to move off expected path)

  • Prompted the users to use gestures

  • Showed more research in the game

  • Kept the light mechanics

  • Added more tutorials/visual aids for game mechanics

Lila Hoang’s storyline draft


Part 1 - First Low-Fidelity Prototype

What did we do?

  1. Started all components

  2. Completed research and team charter

  3. Created a basic skeleton of the layout, interaction flow, and visual design

  4. Completed the first draft of the layout, interaction flow, and visual design (start screen, character designs, backgrounds, levels and final scene) on Figma

  5. Conduced internal play testing and improvement of layout, interaction flow and visual design

Rough draft of our first iteration of the game after planning

Screen showing player what mechanics to use

The Outcome

This project was very difficult. Even though we had AI to help us with the skeleton code, there were still issues that arose and needed multiple brains to solve. The outcome was very rewarding, we are proud of our product. Implementing mechanics so that players can complete the game without speaking or hearing inspired us to think outside the box and find other methods of communication. Communication goes beyond sound.