Tale of BaGua is a casual non-Euclidean puzzle game that manipulates with the physicality of time and space.
You play as a Chinese teenager on his quest to recover his family's lost heirloom, the BaGua mirrors, and using its spells, going back in time to unveil his forgotten lineage.
My Responsibilities:
-
Designed core gameplay mechanisms for BaGua mirror interactions.
-
Implemented and iterated mirror visuals with custom shader and Renderer Features.
-
Designed and set dressed 5 environments with scene-specific visuals to amplify the game feel, historical facts, and narrative.
-
Optimized scenes to be performant for the web and mobile devices.
GAMEPLAY
The idea for this game came from the theme - "Root".
The enormous essence of what root can lead to an introspective moment of self-reflecting on my life:
The present is an incremental result of the history/past.
This eventually became the foundation of the gameplay focusing heavily on the interconnection between the past and the present as puzzle manipulators. You will travel back in time to the same location with a different layout.
We wanted an intuitive and explorative approach to engage the players with the world and the puzzles. Therefore, the core game loop revolves around navigation and exploration:
-
Navigate within the scene to reach the BaGua well to retrieve the mirror.
-
The mirror opens up a new scene of the same location in the past with a different layout.
-
Use the new location to overcome obstacles and reach the next BaGua mirror.
The interactive mechanisms are integrated into 2 major entities:
-
Movement of the player.
-
Dragging the mirrors to allow more movement for the player.
PUZZLE VISUALS
One of the key elements of our gameplay experience is that we DO NOT want players to feel disconnected! We want to push for an explorative and fluid feel in engaging with the world and its puzzles.
To achieve this, all the levels are designed into one main scene.
Stencil shader and a custom Renderer Feature are used to filter each environment in its own layers assigned with a specific stencil value. Overlapping BaGua mirror increments its stencil value, hence the intersections of the mirrors will reveal a new environment.
OPTIMIZATION
The game is optimized by replacing most of the 3D models from each environment with 2 Environment Cards, very much like a fog card.
1. The environment is light-baked.
2. An image of the environment is captured with depth assigned to the Alpha channel.
3. A second environment card is used for occlusion to create the illusion of depth.
ALL ENVIRONMENTS
All of the environments follow the same procedures to transform from 3D into 2D.
Dynamic elements such as VFX particles, dynamic lighting, and interactable props are kept original.
ENVIRONMENT
Each scene is designed with specific color palettes to distinguish its layout during gameplay when multiple mirrors are present. VFX and other art directions are applied to create lively atmospheres.
Articulated POIs to highlight where the BaGua well is while being coherent to the location.
Environmental storytelling elements to connect the narrative and historical facts together.
CONTROL CONDITIONS
Conditions are set to ensure there are no conflicts when players are in different layers of the scene, or else the players will either get stuck in walls or travel through buildings!
To unpack this problem into its components:
-
Only need to address the conditions of the SELECTED mirror since only active mirrors can be moved.
-
Only ONE mirror can be actively selected at all times.
The two main protocols of the mirror logic are as follows:
When a mirror is selected, check if the player is in the mirror.
-
If not, check for colliders at the layer for the mirror.
-
If yes, check for colliders at the layer below the mirror.
Same conditions apply to player movement into and out of mirrors.
Intuitive tutorial fully imbedded into the visuals and gameplay.
Stacking multiple mirrors for better visibility and controls.
Environmental storytelling.