top of page
BlissBanner.jpg
WixBanner-min.gif

TALE OF BAGUA

2023 - PRESENT

A non-Euclidean puzzle game that bends space-time

MY ROLE:

Technical Artist

Environment Artist

TEAM SIZE

3

PLATFORM

Windows | Mac | Web

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:

  1. Navigate within the scene to reach the BaGua well to retrieve the mirror.

  2. The mirror opens up a new scene of the same location in the past with a different layout.

  3. Use the new location to overcome obstacles and reach the next BaGua mirror.

The interactive mechanisms are integrated into 2 major entities:

  1. Movement of the player.

  2. 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.

StencilShader_Demo.gif

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.

DepthRF_Demo.gif
EnvCard_Demo.gif

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.

AllEnv_Demo.png

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:

  1. Only need to address the conditions of the SELECTED mirror since only active mirrors can be moved.

  2. 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.

  1. If not, check for colliders at the layer for the mirror.

  2. If yes, check for colliders at the layer below the mirror.

Same conditions apply to player movement into and out of mirrors.

Tutorial_Min.gif
Stacking_Min.gif
EnvStoryTelling.png

Intuitive tutorial fully imbedded into the visuals and gameplay.

Stacking multiple mirrors for better visibility and controls.

Environmental storytelling.

bottom of page