Walking
on the
Shadow Edge
Youtube video link: https://www.youtube.com/watch?v=j-dyO5eHFlw
Walking on Shadow Edge
Walking on the Shadow Edge is a deeply personal project and a captivating game that revolves around the unique concept of shadow performance intertwined with spatial design.
Within this endeavor, I completed the game design, artistry, and the creation of its ten levels.
Embarking on this project has been an incredibly enriching journey, mainly because it allowed me to delve into game programming for the first time.
​
-
2D Side-Scrolling Puzzle
-
Platformer Game
-
Real-Time Shadow Physics
-
Work as Game Designer
-
Designed Art Style + Assets
-
Designed Ten Levels
-
Made with Unity
Digital Game Design
Individual Work
Spring 2023
Demo Video:
https://youtu.be/j-dyO5eHFlw
Game Link:
https://jackiehan.itch.io/walking-on-shadow-edge
Game Overview:
Walking on the Shadow Edge offers an immersive, narrative experience.
The player acts as a lonely shadow spirit, who is aimlessly walking in a maze. The shadow spirit will explore and advance through the dark environment by rearranging and reconnecting lights.
Graphic Design:
Architecture acts as a spatial design concept in Walking on the Shadow Edge. In order to make the shadows clearer, all the scenes are designed in 2.5D paper art style, and the characters and all hinted monsters are designed in hand-drawn black and white style.
In this game, I made two arguments:
a.Space is a game for light and shadows.
b.Space is a hinted story generator.
Art Style:
Spider-like monster hands and the hidden dangers hinder the player from advancing in the game. The atmosphere allowed me to create a unified and simplistic expressive effect with low saturation colors, emphasizing the theme of "shadow."
Game Concept:
Walking on the Shadow Edge focuses on the shadow illusion in a dark environment.
In immersive games, shadow always has a metaphor of negative meanings related to lifelong darkness, such as——
• Hidden Trauma
• Depression
• Loneliness
• Autism
I want to explore the beauty and fun of light and shadow games. There are several fixed shots in the game. The light and shadow flickered as you walked and ran, while the holy dome appeared particularly clear and sacred in the darkness.
Game Mechanics:
Side-Scrolling Puzzle Platformer
Players play by rearranging and reconnecting lights in order to explore and advance through the dark environment.
Figure.Time-lapse analysis with the game camera, showing the spatial experience in the vertical direction)
Interactive and Collectible Items
There are some collectibles in the game; players will see them in the whole gaming process, but they need to go to a certain level to use them. This is designed to allow the players to explore the map instead of playing the game linearly as a traditional platform game.
1. The spirit will find particular items' shadows on some levels.
2. When the spirit has collected the item's shadow, it will be shown in the "My Things" bag.
3. The spirit should collect all the items and put them on the platforms in Lady Level to finish the shadow projection puzzle.
4. When the shadow of the lady is completed, the final level will show in the dark.
Dialogues and Hints
Many metaphorical hints are shown on the architecture structure, in the spirit's thinking bubble(acts as an avenue to dialog with players), highlighted with outlines and the particle system to imply the possible walking direction.
Real-Time Shadow Physics
To achieve an immersive experience in a dark environment, I utilized real-time light with enhancements from Volumetric Light Beam and Post-process Volume.
(Figure.Volumetric Light Beam performance in Unity engine, with a collider controlling the interaction to open and close the light)
Character(animated) Design:
The main character in the game represents a silent spirit born in the darkness.
In the dark world, this spirit is fragile and ignorant. The player needs to read the textual clues and guidance in each level to help him/her find the path towards light.
The spirit is designed to be——
• curious about the world
• shadow-like
• gender neutral
• lonely
When the spirit walks through the colonnades or behind the walls, his/her body emits light and displays a reverse phase.
For each movement status, I also drew the illuminated version to match the character's motion when crossing the building.
Self-luminosity Performance
Metaphor:
There may be some metaphors for items in different levels.
Cage
The bird in the cage symbolizes the spirit's closed inner world.
Puppet
The hanging puppet symbolizes the inner constraints of the spirit.
Soldiers
The group of soldiers in the castle symbolizes the obedient masses.
Your Own Shadow
At certain moments, the spirit needs to create projections to meet the expectations of the obedient masses.
Level Design:
Based on my experience as an architecture student, I value the power of spatial design with metaphorical meanings.
Inspired by my study of architectural history and theory, many scenes within the game have been meticulously designed in the Gothic or Byzantine architectural forms but translated into the medium of paper art.
(Figure.Spatial Catalogue)
Selected Style
I have chosen typical buildings in Gothic and Byzantine styles.
Simplified Architecture
I abstracted and simplified the architecture based on stylized elements.
Fake Perspective
The entire scene is depicted using a multi-point perspective. In certain specific rooms, I intentionally elongate the length of the room or make it cone-shaped to enhance its spatial visual effect.
Some examples of possible levels in the game Walking on Shadow Edge (others are shown above already).
Start Level
1. At the beginning of the game, the entire scene is dark, and the spirit can only rely on the guidance of light and learn to light up the rays.
Door Level
2. As the game progresses, the dangers in the darkness will gradually emerge, and the spirit needs to use light to drive away the monsters.
Castle Level
3. In some levels, the spirit needs to light up the lights in a specific order to pass through.
Clock Level
4. The spirit's own shadow is also an important tool, which can be used to form different shapes through projection, such as the hands of a clock, to unlock levels.
Cage Level
5. Although the spirit can only move freely in the horizontal direction, the spirit can ascend, descend, and traverse different spaces using special props in the scene.
6. Finally, the spirit will travel through a jungle of eyes. The spirit needs to use his/her own body to block the light and ensure that the monster on the wall won't wake up otherwise the monster's vine will catch the spirit.
Eye Level
Early Versions:
In this game, I want to create an immersive, narrative experience for players and try to represent the charm of spatial design with light and shadow.
The main iterations are shown below based on the improvement of the function tests and narrative experience.
During the latest interaction, I added more detailed features such as outlines for clickable items, fading effects for monsters, and jitter for the scene.
Version 1.0
Tested light and shadow concept.
Identified the location of the main levels.
Designed levels with Photoshop to collage them.
Version 2.0
Confirmed main character and monster performance.
Added 3D texts to the scene.
Scripted for each level's objective.
Version 3.0
Added artistic style and asset details.
Added conversation between actants.
Tested different art styles with Midjourney.
Improved the animation.
Final Version
Added light and shadow effects, particle effects, and interactive items.
Simplified unimportant landscape like trees.
Completed the switching and transfer of camera.
Technical:
Character Motion:
The movement of the character is realized by the Nav Mesh Agent in Unity and WASD-oriented script. I enumerated three move styles: None(stop), WASD, and Nav Mesh Agent.
I implemented automatic path-finding points to enable the character to move between different levels. To achieve this, I baked the walkable areas with the AI navigation system. As a result, the character can easily move up and down stairs and navigate around obstacles by clicking on certain items.
Figure.Nav Mesh navigation baked map
Player Movement:
There are 2 control systems for the movement of the character: Nav Mesh agent, which directs the player from the start point to the destination point by clicking certain items, and AD input, which directs the player to walk horizontally.
The flow chart is shown below:
2D Character in 3D Scene:
In order to create a sense of depth in the scene, I used 3D mode to design it and added a billboard to keep the character always parallel or perpendicular to the camera plane.
The rotation as Euler angles in degrees. The x, y, and z angles represent a rotation of z degrees around the z-axis, x degrees around the x-axis, and y degrees around the y-axis.
When navigating a 3D environment, the Euler angle vector of a 2D character is not an absolute value but rather an interval. To address this, I utilized an EulerMaxOffset of 30° to establish the primary orientation of the character and manually adjusted the animation angle to match the canvas.
Figure.The billboard.cs to ensure the character is always parallel or perpendicular to the camera plane.
Figure.Euler angle calculation coding
Euler angle calculation chart:
Walking behind Structures:
For each movement state, I also drew the illuminated version to match the motion of the character when crossing the building.
There are two kinds of cameras that provide two different views of the character, one for when he/she is in front of structures and one for when he/she is behind structures. To implement this, I created a MonoBehaviour class called PlayerViewBehaviour. I added two versions of animation clips - a normal version and an illuminated version.
When the character enters an area where he/she is behind structures, the backface camera shows the illuminated version of the animation clips and becomes active.
Interaction with Shadow:
Each area where the character can use the ability to illuminate lights has a placeholder box with a collider to switch the light. When the character presses the E key, the shadow stairs and lights will appear or disappear together.
The Collectible Items are controlled by PickupItem.cs and PickupSystem.cs:
There are 4 states for each item: none, pickable, inventory, final.
And each item is shown in the game as three views: pickable view, inventory view, final view.
Pickable View:
In a dimly lit environment, the item initially appears as a shadowy silhouette.
Inventory View:
The UI canvas displays an item as collected or not collected.
Final View:
The item will be illuminated when the character places the item on a certain platform.
Dialogues and Hints:
The think bubble is created as a prefab. The chars are shown one by one via the script of StartCoroutine().
​When the character enters certain area, the think bubble will be triggered by ShowBubbleTextInteraction.cs.
Particle System:
The movement of light particle is refined by DG.Tweening. There are three paths. Each time a particle finishes a path, a cluster of particle fireworks is generated.
In order to make particle effects more dynamic, I added an elastic buffering effect using Ease OutBack in DG.Tweening.