Games Development - Shadowed Self
23.04.2025 - 03.08.2025 / Week 1 - Week 14
Siang Huey Yee / 0369549
OUTLINE
- INSTRUCTIONS
- TASK 1 - GAME DESIGN DOCUMENT (GDD)
- TASK 2 - ART ASSET DEVELOPMENT
- TASK 3 - GAME PROTOTYPE
- FINAL TASK - PLAYABLE GAME
- FEEDBACK
- REFLECTION
MEMBER'S BLOG LINK
- Angel Tan Xin Kei's Blog Link:
- Task 1: https://angeltanxinkei.blogspot.com/2025/06/games-development-task-1-game-design.html
- Task 2: https://angeltanxinkei.blogspot.com/2025/06/game-development-task-2-art-asset.html
- Task 3: https://angeltanxinkei.blogspot.com/2025/07/game-development-task-3-game-prototype.html
- Final Task: https://angeltanxinkei.blogspot.com/2025/07/game-development-task-4-game-prototype.html
- Phoon Yuk Guan's Blog Link:
INSTRUCTIONS
Module Information Booklet
TASK 1 - GAME DESIGN DOCUMENT (GDD)
Timeframe: Week 01 – Week 05
Description:
Students are required to design and develop their own 2D side-scrolling/platformer game. The game design document (GDD) will act as a blueprint, containing all essential information and visual references needed for game development. A sample GDD will be provided as a guide. However, students are encouraged to conduct additional research to identify and include the necessary content elements for their own GDD.
Requirements:
To complete all exercises to demonstrate understanding of the technical knowledge required to develop a platformer game.
Submission:
- Online posts in your E-portfolio as your reflective studies
- Google Doc or PDF
- Video Presentation
SIANG HUEY YEE:
We were divided into groups of three, and I was teamed up with Angel and Yuk Guan. Initially, each of us came up with a preliminary game idea, and we voted on which one to proceed with. The idea that received the most votes was Shadow Stitcher, so we decided to move forward with it.
Huey Yee's Ideation:
Topic Name: Magic Academy
Game References:
Super Mario Bros. (1985) Full Walkthrough NES Gameplay [Nostalgia]
I Tried Every Fireboy and Watergirl Speedrun
Topic Description:
A magical side-scroller where the player is a young wizard on their way to Magic Academy. They must prove their worth by completing a trial path filled with obstacles and mini-puzzles related to their chosen elemental power.
Aim/Objectives:
Choose one of five magical elements at the start (Fire, Water, Earth, Air, Lightning).
Avoid magical traps and natural obstacles based on the environment.
- Reach the gates of the academy to pass the entrance trial.
Game style:
Side-scrolling magical platformer with a slight fantasy RPG feel. The game focuses only on movement and jumping, no complex combat.
Colour scheme:
Fire: Red/Orange
Water: Blue/Cyan
Earth: Green/Brown
Air: White/Sky Blue
Lightning: Purple/Yellow
Element List (choose one at the start):
- Fire – burns barriers (represented in visuals only)
- Water – passes through waterfalls safely
- Earth – breaks stone walls (visually unlocked paths
- Air – longer jump/floating
- Lightning – activates electric bridges or zaps obstacles
Preliminary Ideas (Google Doc)：
After further discussion and task distribution among the three of us, we created our proposal slides and refined the original idea. We modified the game setting and renamed it "Shadowed Self" to better align with the new concept.
My Pinterest Shared Pin Link: https://pin.it/51DPhis5A
I contributed to the refinement of our game idea by developing several key components, including the Introduction, Aim & Objectives, Target Audiences, and the Mockups for our game. I was specifically responsible for designing the Level 2 mockups, while Angel focused on the Level 1 mockup design, ensuring each level visually communicated the game's tone and mechanics.
Meanwhile, Yuk Guan worked on the Game Mechanics, where she detailed and clearly outlined how features like movement, stealth, light avoidance, and upgrades would function, helping to define the gameplay experience and its emotional impact.
Together, we combined our individual contributions to further develop and strengthen the overall concept of "Shadowed Self".
-
Introduction
I crafted the game’s introduction, outlining the core concept and emotional foundation of Shadowed Self. I focused on establishing the mood, main character, and overall tone, highlighting the game’s themes of self-confidence, identity, and fear.
-
Aim & Objectives
I developed the key gameplay goals and player objectives to guide the game's progression. This includes defining how players interact with the world, what they must achieve in each level, and how success leads to character growth and narrative resolution.
-
Target Audiences
I identified and described the primary target audiences for our game. This includes casual gamers, atmospheric indie fans, and younger teens—players who would be most drawn to the game’s emotional story, stealth mechanics, and visual style.
-
Mockups Design
I created mockups for the game’s light obstacles and protection elements, visually representing how players would interact with and avoid light-based threats. These mockups help visualize level hazards and support the stealth gameplay concept central to Shadowed Self.
ANGEL TAN XIN KEI:
BACK TO OUTLINE
A. First Ideation
All of us came up with three different game ideas. My idea was actually inspired by a Mario Party mini-game. In my concept, the player controls a character flying left and right in the air, collecting bubbles to score points. The idea is based on controlling a hot air balloon that rises as it gathers more bubbles, making the gameplay simple yet engaging.
Game Concept: Balloon Up 🎈 (Inspired by: Super Mario Party – Go with the Flow)
In Balloon Up, you play as an adorable, incomplete character a plushie missing limbs or a robot missing parts floating upward while holding onto a balloon. As you ascend, you must tilt left and right to collect bubbles that either restore pieces of yourself or earn you points. Your ultimate goal: become whole again before reaching the top.
Objective:
Rebuild yourself by collecting missing body parts.
Avoid hazards that can damage or slow your progress.
Reach the top of the sky level before time runs out.
Earn a high completion score based on how whole you’ve become.
Fig 2.1 Mario Party- Go with the Flow
B. First Draft Proposal
After presenting all our game ideas, we voted to choose the most promising one. Icese’s game, Shadowed Self, received the most votes, so we decided to move forward with developing her concept for the project.
1) Moodboard
To encourage collaboration, I created a shared Pinterest folder where every group member could contribute their inspirations. This allowed us to visually align our ideas and understand how each of us envisioned the game world. It became a central place for collecting references and helped us find a cohesive direction that everyone could agree on.
Shared Pinterest Pin Board: https://pin.it/5QmcHRgOI
I started by creating a moodboard to capture the aesthetic direction we wanted. This included visual references like color palettes, lighting inspiration, character vibes, and possible environment styles. I explored different themes that matched the storyline and mechanics of our game, eventually narrowing it down to something that felt surreal, slightly eerie, and emotionally resonant.
2) Colour Scheme
I also developed the color scheme based on our moodboard which inspiured by Pinterest. The palette had to reflect the mood of the gamewhether it was soft and dreamlike, dark and mysterious, or something in between. I made sure the colors could work well across the user interface, environment art, and character design.
Fig 2.5 Overview of Colour Palettes
i. Character:
Base Form: A soft-edged black shadow silhouette.
Progress Indicators: Glowing, stitched lines (white, soft blue, or violet) run across the body and light up more as pieces are collected.
Final Form: A complete glowing shadow with a soft aura—still shadow, but self-possessed and radiant.
ii. Light & Danger:
Light Sources: Bright whites, glowing yellows, flickering ambers (candlelight, hallway lamps).
Danger Lights: Sharp edges and bloom effects; contact causes tearing/glitching of the shadow.
Safe Light (Late Game): Soft white light with halo glow, representing healing and understanding.
iii. UI Elements & Sound:
Typography: Delicate serif or handwritten style—like a stitched storybook.
Menus & HUD: Minimal, patchwork style (buttons appear like fabric labels or sewn-on notes).
Sound Design: Ambient tones, distant whispers, toy-like music box themes that evolve into gentle, confident piano or strings by the final level.
Overall, my focus was on unifying the game’s emotional and visual identity from the ground up. It’s been really exciting to shape the project’s atmosphere and contribute to how players will eventually experience the world we’re building.
Lastly, we came up with our group name, "Shadowed-Self" which plays a key role in giving our team a shared identity. I wanted something that felt meaningful and matched the spirit of our game. It helped set the tone not just for our visuals but also for how we presented ourselves during discussions and presentations.
C. Proposal Development
During the proposal development stage, we encountered several challenges and disagreements as a team. While we were aligned on the overall theme and mood of the game, we realized that our initial gameplay direction had some issues both in terms of clarity and functionality.
1) Crafting the Narrative & Moral
As part of shaping the emotional core of our game, I took the lead in developing the storyline and the moral message behind it. I wanted the game to feel meaningful—not just visually immersive, but emotionally resonant as well.
The story follows a unique perspective:
"You are the shadow of a child—fragile, incomplete, and terrified of the light.At first, the light feels like your enemy: harsh, blinding, and erasing everything you've tried to reclaim.You drift through a surreal world stitched together by broken memories and lost feelings.As you collect pieces of yourself, you begin to remember who you are.What once seemed frightening starts to shift. You realize the light wasn’t trying to hurt you—it was showing you what you were too scared to face.
In the end, when you become whole again, you no longer hide from the light.You stand in it not as a shadow but as someone confident, complete, and unafraid.This story is symbolic of self-discovery, healing, and emotional growth. It touches on themes of fear, acceptance, and transformation."
The moral of the game is that sometimes what we fear the most is what we need to face in order to grow. The light, once seen as a threat, turns out to be the key to becoming whole again.Fear fades when we understand ourselves. Confidence is not about being perfect—it's about embracing who we are, even the parts we've hidden in the dark.
2) Game Play
This narrative structure also ties into the gameplay, especially in how the player’s relationship with light evolves across the three levels. The ending where the shadow finally steps into the light represents the peak of personal transformation, or what I call the “Hierarchy Peak” of the story arc.
We also identified a few bugs and logical gaps in the early version of the gameplay. These problems made us reflect on how to make the experience smoother and more engaging for players.
After multiple discussions, we collectively decided to revamp the gameplay. Instead of a single linear progression, we chose to split the game into three distinct levels, each with its own unique mechanics, pacing, and challenges. This not only helped resolve some of the earlier concerns but also gave us more room to explore creativity and ensure the gameplay would remain fresh and immersive.
D. Refinement of Game Design and Mechanic
After presenting our proposal to the lecturer, we received constructive feedback that helped us see our game from a new perspective. One of the key points highlighted was that our game mechanics could be more creative and better aligned with the storyline. While our concept was strong narratively, the gameplay itself needed to reflect the emotional journey of the character more effectively.
1. Game Play:
Taking that feedback seriously, we went back and re-evaluated our mechanics, exploring ways to make them more symbolic and immersive so that the player's actions would feel more connected to the theme of transformation, fear, and self-discovery.
2. Update Mock-Ups:
Along with the gameplay revision, my team members Siang Huey Yee and I also updated the mockup designs to reflect these changes more clearly. The new mockups show a more accurate and cohesive version of our gameplay experience, with visuals that better represent the mood, level structure, and how the player interacts with the world alongside with the explanation in the slides:
Fig 4.2 Refined Level 1 Mock-Up
Fig 4.3 Refined Level 1 Mock-Up
Fig 4.4 Refined Level 2 Mock-Up
Fig 4.5 Refined Level 2 Mock-Up
Fig 4.6 Refined Level 3 Mock-Up
Fig 4.7 Refined Level 3 Mock-Up
Fig 4.8 Refined Level 3 Mock-Up
PHOON YUK GUAN:
Before we started, we decided to brainstorm and come up with our own unique game ideas for a 2D side-scrolling platformer. After exploring different directions, I decided to develop a concept that blends a little bit of mystery, emotion, and puzzle-solving together—something that feels both simple and meaningful.
Overall Concept:
Shadow Stitcher is a side-view platformer game where you play as a small shadow creature that has lost parts of its body. I thought it would be cool to explore a character who isn't chasing fame or power but simply wants to be whole again. The world is made out of fabric materials like denim, felt, and wool, and the game is designed to feel soft and handcrafted—but with a twist. In this world, light is dangerous, and shadows are your only protection.
Topic Name: Shadow Stitcher
Topic Description:
You play as a small shadow creature that lost its full body. Now, you move through a world made of cloth and light. Your goal is to find shadow pieces and sew yourself back together. But be careful—bright lights can hurt you!
Aim/Objectives
The main goal of the game is to help the shadow creature find and collect lost shadow pieces scattered across each level. As you collect more pieces, your character gradually regains its full form.
The core objectives I designed are:
Collect shadow pieces to rebuild your body.
Stay out of the light or you’ll lose progress.
Reach the final sewing machine to become whole again.
This idea came from the concept of self-repair and growth. I wanted the player to feel the progress not just through levels, but by literally seeing their character evolve with every piece they collect.
Game style
I kept the controls simple: move left, move right, and jump. But I also added some puzzle-platformer elements to make the gameplay feel richer:
A side-view puzzle and jumping game.
Move left, right, and jump.
Hide in the shadows to stay safe.
Use thread to unlock cool moves like double jump or short dash.
I imagine this game being calming in some areas and intense in others—a balance between quiet exploration and tricky timing.
Game Features
To make the gameplay more engaging, I included a few distinct features:
🧵 Shadow Pieces: These are hidden around the level. Collect them to grow stronger.
☀️ Light Beams: Try not to touch them! They remove your shadow pieces.
🕯️ Candle Guards: Moving lights that you must sneak past.
🪡 Sewing Points: Special places where you add your collected pieces to your body.
I think these features will help build a deeper connection between the gameplay and the story—making every piece you collect feel valuable.
Colour scheme
Since the world is made of fabric, I went for a soft, handcrafted look. Here’s the general palette and visual theme I’m aiming for:
Character: A dark shadow with glowing lines. The more pieces you collect, the more complete you look.
World: Looks like fabric—like denim or felt. Calm colors like blue, dark green, and soft gold.
Light & Danger: Bright white or yellow lights.
Buttons and Text: Look like they are stitched with thread
Compilation of Our Ideas:
B. Game Proposal
After presenting all our game ideas, we held a group vote to decide which concept we would develop together. I was really happy that my game, Shadow Stitcher, received the most votes. It was encouraging to see that my idea resonated with the team. However, during our discussion, we decided to make a few adjustments to the concept, especially regarding the theme and title. Since we agreed not to include stitching as a core mechanic anymore, we thought the original name no longer fit the updated direction.
So, we renamed the game to Shadowed Self—a title that still captures the mood and meaning of the original idea but gives us more creative flexibility in terms of gameplay and visuals.
1) Game Style
When shaping the world of Shadowed Self, one of the most important aspects I focused on was the overall game style—how it looks, feels, and plays. This part of the design helps set the tone and emotional atmosphere, creating a deeper connection between the player and the journey of the shadow creature.
🎮 Genre:
Shadowed Self falls under the genre of a 2D Puzzle Platformer, but with a meaningful twist. It combines classic jumping and puzzle-solving mechanics with emotional storytelling and a unique light-based challenge system. This mix keeps the gameplay engaging while allowing us to tell a quiet but powerful story about identity and self-growth.
👁️ Perspective:
The game uses a side-view perspective to maintain that classic platformer feel. However, to make the world more immersive, we’re including layered parallax backgrounds that shift gently as the player moves. This helps create a dreamlike atmosphere—as if the shadow is moving through memories or inner thoughts rather than a typical “level.”
🕯️ Tone & Feel:
From the very start, we wanted Shadowed Self to feel soft, eerie, and emotionally reflective. There’s a delicate balance between mystery and comfort. At the beginning of the game, players feel fragile and unsure, just like the incomplete shadow character. But as they collect pieces, avoid light, and solve puzzles, the tone begins to shift.
The world slowly becomes more empowering and hopeful—mirroring the shadow’s growth and healing. This emotional shift is something we really wanted to emphasize, using not just story and dialogue, but also visuals, movement, music, and even the way the player interacts with light and shadow.
2) Game Mechanism
As we started developing Shadowed Self together as a team, I had the chance to expand on the core mechanics and bring my original idea (Shadow Stitcher) into a more refined and emotionally driven experience. This section of our Game Design Document focuses on the gameplay mechanics and how they reflect the journey of our shadow protagonist.
🎮 Movement & Controls
You control a small shadow creature in a side-scrolling world, where movement is simple but meaningful. The player can walk, jump, and as the game progresses, unlock special moves such as:
Double Jump – allows the player to jump again while in the air, useful for reaching high platforms or escaping danger.
Shadow Dash – a short burst of speed used to avoid hazards or bypass short gaps quickly.
These mechanics evolve as the shadow regains parts of itself, making gameplay progression feel directly tied to the character’s growth.
🧩 Collecting Shadow Pieces
The core objective of the game is to collect shadow pieces—fragments of the character’s lost form. These pieces are hidden around the level: behind objects, tucked into dark corners, or floating in tricky spots.
What I love about this mechanic is that it makes exploration meaningful. Every time a player finds a piece, they see it stick to the character’s body, slowly revealing arms, legs, or a face. It visually and emotionally reflects the shadow's journey of becoming whole again.
☀️ Light as a Threat
In this world, light isn’t your friend—it’s your biggest danger. It symbolizes fear, self-doubt, and emotional barriers. If the shadow touches light, they lose progress or get sent back to the last checkpoint. It adds tension but also a deeper layer of symbolism to the game.
We designed a few different types of light hazards to keep gameplay fresh:
Light Beams – Static lights that flicker on and off. Timing is key to pass through safely.
Candle Walkers – Flame-like enemies that patrol with a small moving light. You need to stay hidden or move stealthily to avoid them.
Light Traps – Environmental lights that activate in patterns, requiring players to watch, wait, and act at the right moment.
📦 Hiding and Puzzle Solving
To survive, players must learn how to use the environment wisely. There are spots to hide behind objects, inside boxes, or in natural shadows. Some sections involve puzzle-solving, especially with light and shadow:
Moving objects to block light beams
Timing movements to sneak through safely
Using the dash move to pass between hazards quickly
These puzzles aren’t just obstacles—they reflect the inner struggle of the character, learning to adapt and navigate challenges with courage and cleverness.
🎯 Goal & Emotional Journey
Each level of Shadowed Self is not just a physical space—it’s a chapter in the shadow’s emotional journey. From fear to growth, and finally, to healing, the world changes as the character changes. The player's ultimate goal is to collect all shadow pieces and reach the end of each chapter.
If the player manages to collect all shadow fragments, they unlock the true ending—a moment where the shadow reunites with its original form, a child. This ending symbolizes emotional self-acceptance and inner confidence, the very heart of this game’s message.
Shadowed Self - Task 1 Proposal Presentation Slides (Canva):
TASK 2 - ART ASSET DEVELOPMENT
Timeframe: Week 05 – Week 07
Description:
- Students will be given the task to produce the art asset for their games
- This includes characters, environment, items, props, obstacles, power ups and HUD design
Submission:
- Google Doc or PDF
- Online posts in your E-portfolio as your reflective studies
At the start of our project, we allocated tasks according to each member’s strengths and areas of interest. This allowed us to work more efficiently and ensured that everyone played an active role in different aspects of the game development. Our task distribution was as follows:
-
Character Concepts & Movement Animations: Huey Yee & Yuk Guan
-
UI/UX Design & HUD Elements: All Members
-
Background Art & Environment Overview: All Members
-
Proposal Formatting & Documentation: Angel Tan
Task Distributions (Task 1 & Task 2):
SIANG HUEY YEE:
My main contributions focused on designing the initial Level 1 background, light obstacles, protection props, and the character’s idle and dash animations. I used Adobe Illustrator to create the game’s visual assets, ensuring they matched the surreal and emotional tone of our concept. By carefully crafting these elements, I helped establish a cohesive visual direction and atmosphere for the early gameplay experience.
For the Protection Props Design, we created items such as a box, newspaper, umbrella, and mirror—each allowing the shadow character to hide from or deflect light.
To add an element of surprise and engagement, we introduced the Mystery Box mechanic, where players won’t immediately know which prop they’ve collected until it’s used, enhancing curiosity and replay value.
In the Light Obstacles Design, we developed challenging elements like Light Beams, Candle Walkers, and Light Traps, all requiring careful timing and strategy to avoid. These obstacles reinforce the game’s central theme, light as both a threat and a puzzle while keeping gameplay dynamic and immersive.
I utilized both Adobe Illustrator and Adobe Photoshop to create and animate the character’s idle and dash movements, ensuring smooth transitions and a visually cohesive style. I then tested these animations using the Unity 2D template, where they successfully functioned within the game environment. To give our lecturer, Ms. Bong, a clearer understanding of our game’s visual and animation style, I’ve also provided video recordings of these animations as part of our presentation.
Boy Character's Animations:
Boy Character's Idle Animation - Shadow
ANGEL TAN XIN KEI:
A. First Draft of Visualisation
At the beginning of our project, we divided our responsibilities based on each member’s strengths and interests. This helped us work efficiently and ensured everyone contributed meaningfully to different parts of the game development process. Here's how we distributed the tasks:
Character Concepts and Movement Animation: [Siang Huey Yee and Phoon Yuk Guan]
UI/UX Design and HUD Design [All]
Background and Overview Design: [All]
Proposal Formatting & Documentation: [Angel Tan]
I started with the first draft of the visual direction, which included an initial moodboard, concept sketches, and colour palette ideas. These visuals set the tone for the game's emotional journey, aligning with our narrative of a shadow character facing the light.
Fig 5.1 Level 3 background design
Fig 5.2 Level 1 environment element
Fig 5.3 Home Page Design
Fig 5.4 Home Page Design
Fig 5.4 Gain Points Emotion Bubbles
B. Art Asset Modification
Following the feedback, I worked on modifying the background art to better support our new gamplay ideas. I also helped develop visuals for a new "gain points" element, a system where players collect emotional fragments of themselves as they progress.
Key changes:
Adjusted background layers to create more depth and movement
Refined lighting and texture to reflect the emotional tone of each level
Introduced visual cues for gain points (e.g., glowing fragments of memory)
These modifications helped enhance both visual storytelling and gameplay clarity.
1.Background:
Fig 5.6 Level 1 background design
Fig 5.6 Level 2 background design
2. Animation of Gain Point Elements :
To bring everything to life, I animated several elements using Adobe Photoshop and input it into Unity.
After completing the animations, I imported them into Unity and set them up as interactive slide animations within the game scenes. This allowed our backgrounds and UI to feel more alive and responsive to the player's action. Integrating them into Unity helped simulate how our game would play and transition between scenes.
Fig 5.8 Animation of Bubbles
Fig 5.9 Animation of Emotion Bubbles
PHOON YUK GUAN:
As we moved on to Task 2: Art Asset Development, I took on the responsibility of designing both the UI elements and the main character for our game, Shadowed Self. This was an exciting stage for me because it allowed me to blend visual creativity with functional design.
1) UI Elements
Before diving into the UI, I took time to carefully examine the background designs created by Huey Yee and Angel. Their work established a strong visual foundation for the game, with a unique mix of cute, funky, and horror elements. I wanted to ensure that my UI design not only stood out visually but also felt cohesive with their backgrounds.
Taking inspiration from their palette and mood, I chose green as the main color for the UI elements. It contrasts well with the darker backgrounds while still feeling eerie and natural—almost like a haunted forest. To enhance the theme further, I added a subtle horror-style pattern along the borders of the UI buttons, giving them a mysterious, overgrown jungle vibe.
For the font, I selected Professor Minty. It fits perfectly with our quirky-horror aesthetic—playful yet unsettling—and adds character to the menus and button labels without overwhelming the visuals.
After finalizing the button design style and selecting the typography (Professor Minty), I moved on to designing the actual UI buttons used in the game. These include the essential gameplay functions: Play, Pause, Restart, Quit, Home, and Next Level.
Each button follows the same consistent visual style I had established earlier—with a green base color and horror-themed border details to maintain the overall funky horror jungle vibe.
After completing the main function buttons, I continued by designing the icon-based buttons, These icons were created to support additional in-game interactions and settings, while keeping the interface visually clean and intuitive. I used the same green color base and creepy border pattern to maintain visual consistency, but ensured the icons were instantly recognizable even at smaller sizes. This part of the process helped me think more deeply about user experience (UX)—especially how players quickly understand symbols and navigate the game without needing extra explanation.
Then, I created two final visual elements: the "Game Over" screen and the "Level Completed" screen. These are meant for display purposes only.
And lastly, I created a Health bar for UI Elements as well.
Below is the overall design for UI Elements.
2) Character Design
As part of my task delegation for Task 2: Art Asset Development, I was in charge of designing the main characters for Shadowed Self. One of the key challenges I faced was creating a character that felt cute yet unsettling, in line with our game’s unique theme—a balance of eerie, emotional, and childlike charm.
To achieve this, I began by sketching out a few rough ideas. I decided to use a chibi-style proportion where the head is larger than the body, giving the characters an adorable and approachable silhouette. Their short limbs and round eyes emphasize innocence, which adds a layer of emotional connection for players.
Since our gameplay allows players to choose their character at the start, I created two versions:
A boy character with short, slightly messy hair, a collared button-up shirt, and dark blue pants.
A girl character with a bob haircut, a red bow, a collared dress, and black shoes.
Moving on, after finalizing the character outlines, I began working on the coloring phase. This stage was especially important because I wanted the colors to not only look good visually, but also carry emotional weight that matched the tone of the game.
Despite their cute chibi proportions, I made sure to incorporate subtle horror elements through color and expression:
Both characters were given oversized, hollow black eyes—this was a deliberate choice to create a haunting, soulless appearance. It visually suggests that something is missing, or that the characters are emotionally lost, perfectly tying back to the central shadow theme of our game.
I chose a muted color palette using mostly greys, black, and navy tones. These colors help maintain a somber and mysterious vibe, reinforcing the eerie environment they exist in without making the visuals too harsh or scary for players.
Lastly, I kept the facial expressions neutral and minimal. The blank stares give them a slightly unsettling feeling, as if they are wandering through an unfamiliar, dreamlike world. This choice enhances the mood of emotional emptiness and isolation, while still allowing players to project their own feelings onto the characters.
Since our game mechanics state that players will begin the game as a shadow form in Level 1, I needed to create a shadow version of both characters. This version represents the character in their incomplete state—before they start collecting shadow pieces and regaining their full form.
Initially, I tried making the entire body a flat grey color to represent the shadow. However, I quickly realized that this approach caused important details—like the eyes, face, and clothing outline—to blend together and become almost invisible. The character lost too much of its form, which made it hard to read visually in the game environment.
To solve this, I decided to take a more layered approach. I duplicated the original character and created a dark grey silhouette, but instead of replacing the colors entirely, I lowered the opacity of the grey version and overlaid it on top of the original colored character. This gave it a transparent, ghostly shadow effect while still allowing some of the original details to subtly show through.
This method kept the shadow form readable and consistent with the rest of the game’s visual language, while also clearly showing that the character was in a weakened or “lost” state. It also visually supports the core gameplay goal: as players progress and collect shadow pieces, the character gradually becomes more solid and complete.
3. Animation of Characters
After finalizing our character designs and completing the other art assets developed by my group mates, the next step was to bring our characters to life through animation. This was a crucial part of the development process because we wanted the characters to feel responsive, expressive, and smooth during gameplay.
For my task, I was in charge of creating all the character animations, which included:
Girl Character: Walking & Jumping
Shadow Girl: Walking & Jumping
Boy Character: Walking & Jumping
Shadow Boy: Walking & Jumping
Initially, we discussed using Unity’s bone system (2D rigging) to animate the characters. However, after some testing and considering the style of our game, we decided to use the sprite sheet method instead. This gave us more control over the specific look and motion of each animation, especially since our characters are in a stylized chibi form.
With this decision, each animation needed to be drawn frame-by-frame, with around 5–6 frames per action. This was both challenging and exciting, as it pushed me to think more deeply about timing, movement, and consistency in visual style.
I started with the girl walking animation first. I broke down the motion into key poses—such as the contact, lift, pass, and down positions—to make the movement feel fluid.
After finishing my first draft of the girl’s walking animation, I took a step back to review the movement. At first glance, it looked okay—but something felt off. The motion wasn’t smooth, and the character’s walk didn’t feel natural. The legs looked stiff, and the overall rhythm didn’t match the pace we were aiming for in the game.
I realized that while I understood the basic idea of animating frame by frame, I needed to dig deeper into animation fundamentals to really get it right.
So, I went online and began studying walk cycles—breaking them down frame by frame. I watched several tutorials, read articles, and analyzed examples from other 2D games and animation guides. I learned about key poses like the contact position, passing position, and recoil, and how each of them plays a crucial role in creating a believable walk.
By comparing these with my original frames, I could immediately spot where my animation lacked proper weight and rhythm. The feet weren’t grounded correctly, and the body lacked natural sway. After studying these principles, I went back to redraw the frames—adjusting limb positions, refining the foot placement, and tweaking the timing of each frame to make the walk feel more fluid. So here is the refined girl walking animation frames:
After finalizing the revised walk cycle for the girl character, I moved on to the next animation: the jumping animation. Unlike walking, jumping required me to think about vertical movement, timing, and how to capture the feeling of weight leaving the ground and landing back down.
Following the same animation structure and principles I applied to the girl character, I proceeded to animate the boy character’s walk and jump cycles. Since the boy and girl characters share a similar chibi style, I was able to use the same approach, but with slight adjustments to reflect his unique design and posture.
Once the walk cycle was complete, I moved on to the boy jumping animation. Again, I followed the same core stages: crouch, take-off, mid-air, and landing. I adjusted the limb positioning and movement slightly to fit his frame and ensure consistency with his overall design.
Before importing the animations into Unity using sprite sheets, I had to go through a few important preparation steps to ensure everything would work smoothly. Unity requires sprite sheets to be well-organized and evenly spaced, so I needed to carefully set up my files in Photoshop (PSD format) first.
To begin, I created individual artboards for each animation frame. Each artboard was one square per frame, and I made sure that every movement—whether walking, jumping, or idle—was centered in the middle of its artboard. This helps Unity properly slice the sprite sheet later on and ensures that each frame transitions smoothly without any jittering or misalignment.
In addition to the main character animations, I also created the shadow versions of each animation. Using the darker, semi-transparent shadow design I developed earlier.
Final Animations:
Character Girl Walking:
Character Girl Jumping:
Shadow Girl Walking:
Shadow Girl Jumping:
Character Boy Walking:
Character Boy Jumping:
Shadow Boy Walking:
Shadow Boy Jumping:
We presented our first draft and game proposal to the class and received constructive feedback from both our lecturer and peers. One key suggestion was to enhance our illustrations by adding more shadows and textures, and to create deeper, more immersive backgrounds. It was also pointed out that UI elements should be designed as separate layers with clean, non-cut-off edges. Additionally, we were advised to improve the character shadows by adjusting their opacity and layering. This feedback prompted us to re-evaluate our design priorities and inspired new ideas to further refine the overall game experience.
Shadowed Self - Task 2 Art Asset Presentation Slides (Canva):
COMPILATIONS
Click Here to View Compilation Document (all members included):
Games Development Blog Contents
TASK 3 - GAME PROTOTYPE
Timeframe: Week 08 – Week 10
Description:
This includes:
Coding movements and actions
Coding obstacles and enemies’ interactions
Coding game levels (Logic of the game)
Submission:
Video walkthrough and presentation of the game
Online posts in your E-portfolio as your reflective studies
Task Distributions:
SIANG HUEY YEE:
I was responsible for the animation tasks, which included creating the Idle, Walk, Jump, and Hurt animations for the Girl Shadow Character. These animations were imported into Unity, and I created an Animator Controller for the Girl Shadow Character. In Level 1, the character appears as a shadow, but as she progresses to Level 2, she transforms into her original, brighter form. Therefore, I created two Animator Controllers: one for the Girl Shadow and another for the Original Girl Character.
Since Task 3 focuses on the Level 1 prototype, I have showcased only the Level 1 version of the character and its animations. Additionally, I realized that we did not include a Hurt sprite for the Girl Shadow in Task 2, so I designed it in Adobe Illustrator.
I set up transitions between the animations in the Animator, allowing the character to move left and right using the arrow keys and jump with the space bar.
Girl Shadow Hurt Animation in Sprites (in Adobe Illustrator)
Girl Shadow with Box Animator
ANGEL TAN XIN KEI:
|
|
Fig 2.1 Background Layering in Unity |
|
| Fig 2.2 Tiles Layer in Game Mode |
|
| Fig 2.4 Box Animation in Sprites |
I imported animation clips and integrated them into the scene with basic triggers.
C. Draw the Light Obstacles Animation
I have designed light obstacle sprites and animated them to simulate flickering or moving lights.
|
| Fig 2.6 Light Beam Animation in Sprites |
I also implemented animation in Unity to add dynamic hazards that fit the game’s visual theme. I have placed animated obstacles in the level to create environmental challenges for the player.
I also applied looping animations and added Box Collider 2D to simulate hazards and placed them strategically in the game environment. I ensured animations are timed well to sync with gameplay pacing and difficulty.
D. Scripting for the Emotions as Collectibles
|
| Fig 2.8 Emotion Collectibles Scattered in Game |
I have created emotion collectible prefabs with associated scripts. I scripted functionality so that when the player touches a collectible, it disappears and triggers a collection event.
I also linked the collectibles to the UI or game state (e.g., score, progress tracking) to reflect successful pickups.
PHOON YUK GUAN:
Contains:
- Resume Button → calls UIManager.TogglePause() to unpause the game (Time.timeScale = 1).
- Home Button → calls UIManager.ReturnToHome() to go to the main menu scene.
- Controlled via the Escape key or in-game triggers.
- Panel is hidden at start (pausePanel.SetActive(false) in Start()).
 |
| Pause Menu Panel |
I put this restart button in both the Pause Panel and Game Over Panel.
Buttons are connected via Unity Inspector to call UIManager.RestartGame(), which reloads the current scene using: SceneManager.LoadScene(SceneManager.GetActiveScene().buildIndex);
 |
| Pause and Restart Button in UI Canvas |
 |
| Pause Menu Panel Hierarchy |
Contains:
- Replay Button → reloads the current scene (same as restart).
- Quit/Home Button → goes back to main menu (MenuScene).
- Triggered via UIManager.ShowGameOver() when HP reaches 0.
- Initially hidden (gameOverPanel.SetActive(false)).
 |
| Game Over Panel |
 |
| Game Over Panel Hierarchy |
- Displays when the player reaches the level-ending door.
- Triggered via UIManager.ShowLevelComplete().
- Used to just indicate level clear.
 |
| Level Caompleted Panel |
In my Unity game project, I implemented a centralized HP management system using a custom script called HPManager.cs. This script handles HP initialization, reduction, recovery, visual feedback, and game over detection.
The script is attached to a dedicated GameObject in the scene (usually an empty GameObject called HPManager), and marked as a singleton so it can be accessed from other scripts easily.
In my HPManager.cs:
1. HP Initialization
- I set the maximum HP to 5 for my game.
- At Start(), I initialize currentHP = maxHP and update the UI by calling: UIManager.instance?.UpdateHP(currentHP);
When the player takes damage, this function is called: public void ReduceHP(int amount)
- Subtracts the amount from currentHP
- Clamps it between 0 and max
- Updates the UI HP bar
- Triggers ShowGameOver() in UIManager.cs if HP drops to 0
When healing is triggered (like by a health pickup), this method is used.
It checks if HP is already full. If so, logs "It is already Full HP" and skips.
If not:
- Heals the player by the specified amount
- Clamps HP
- Updates the HP UI
- Plays a healing effect using HealingEffectManager
- Shows floating text (e.g., “+1 HP”) at the player’s position
This adds strong game feel when healing occurs.
- Resets HP back to full when starting a new level or respawning.
- Checks if HP is already full, to prevent over-healing.
When the player heals, a floating text prefab appears above the player.
This is managed by:
- Instantiating the prefab at position + Vector3.up * 2
- Setting the text using: floating.SetText("+1 HP");
- I will set the text by assigning the prefab in the Unity Inspector later
- I created an empty GameObject named HPManager.
- Attached this HPManager.cs script to it.
- Assigned:
- The FloatingTextPrefab from the prefab folder.
- Set maxHP in the Inspector to 5.
- Called HPManager.instance.ReduceHP(1) from my player collision/damage script.
- Called HPManager.instance.AddHP(1, transform.position) from collectible or healing scripts.
 |
| HP Manager Unity Inspector |
 |
| Hp Image in UI Canvas |
 |
| HP Damaged Red Effect Image |
 |
| UI Text for Emotion Text assigned in Inspector |
TASK 3 PROTOTYPE SUBMISSION
FINAL TASK - PLAYABLE GAME
Timeframe: Week 11 – Week 14
Description:
Final Project – Playable Game – 30 %
Students will integrate their art asset to their game development and produce a fully functional and playable game.
E-Portfolio - 10 %
Submission:
Unity Project files and Folders.
Video Capture and Presentation of the gameplay walkthrough
Game WebGL Build
Blog post for your reflective studies.
Task Distributions:
SIANG HUEY YEE:
In addition to the Level 1 shadow character, I have also designed the Girl Character for Level 2. In this stage, the character appears significantly brighter and no longer in her shadow form, symbolizing her emotional growth after collecting the emotion collectibles. She now resembles a real, fully-formed character, reflecting her progress in the journey.
For this new form, I created a full set of animations, including Idle, Walk, Jump, and Hurt. Each animation was designed frame by frame using Adobe Illustrator and imported into Unity.
Moreover, I redesigned the character variations for specific scenarios:
-
Girl with Box: Includes Idle, Walk, and Jump animations.
-
Girl with Umbrella: Also includes Idle, Walk, and Jump animations.
These variations allow the character to interact differently with the environment based on the power-ups or tools she obtains throughout the game. All sprites were carefully illustrated and animated to ensure smooth transitions and consistent visual style across levels.
Girl Animator (Level 2)
Girl with Umbrella Animator
In Level 2, a new type of Mystery Box is introduced one that unlocks an Umbrella as a protector. With Angel’s contribution in completing the Mystery Box with Umbrella animation in sprite form, I took charge of scripting both the MysteryBoxTriggerLevel2 and MysteryBoxTriggerUmbrella scripts. To avoid any confusion or script overlap between Level 1 and Level 2, I decided to create separate scripts specifically for Level 2. This separation ensures that the gameplay mechanics remain consistent and error-free across levels. Additionally, I created a MysteryBoxManager GameObject in the Unity Hierarchy, where I attached the relevant C# script files. This helped organize the system and ensured that both Mystery Box functionalities — in Level 1 and Level 2 — operate smoothly and independently.
In Level 2, I designed a new type of light-based obstacle known as the Candle Walkers, which also poses a threat to the player’s health. I created the Candle Walker animations using Adobe Illustrator, exporting the sprite sequences into Unity for use in the game. These Candle Walkers behave like patrolling enemies, they move back and forth across a defined area, requiring the player to carefully time their movements to avoid contact. If the player fails to pass through at the right moment, the Candle Walker will deal damage, unless the player is protected by a shield-like item, such as the Mystery Box protectors such as Box or Umbrella.
To implement this mechanic, I developed two separate scripts. The first is the EnemyWalker.cs, which controls the movement of the Candle Walkers, including their walking range and speed. The second is the EnemyDamage.cs, which handles collision detection and applies damage by reducing the player’s HP by 1 upon contact. These scripts ensure the Candle Walkers function as dynamic, moving obstacles that add challenge and tension to the gameplay in Level 2.
I have also worked on designing and implementing the Emotion Collectibles system, adding a clear and visually engaging collection effect for each type. Whenever an emotion collectible is picked up by the player, it now displays a glowing or shining animation before disappearing. This helps make the collection process feel more rewarding and noticeable.
I designed all four types of Emotion Collectibles — Sad, Happy, Angry, and Scared each with its own colour palette and visual identity. The sprite animations for these collectibles were created in Adobe Illustrator, carefully crafted frame by frame to bring each emotion to life.
To enhance the interaction further, I created individual Animator Controllers for each emotion collectible. These animators ensure that once the player collects a collectible, it triggers the shining animation before the object disappears. This not only creates a smoother visual transition but also reinforces the collectible’s emotional theme.
These collection effects have been consistently applied across both Level 1 and Level 2, ensuring a uniform experience throughout the game. This attention to detail makes it easier for the player to identify when a collectible has been successfully collected and adds a more polished, game-like feel to the overall experience.
Happy Emotion Collectibles Collection Effects Animation in Sprites (in Adobe Illustrator)
Then, I created the script logic for the Emotion Collectibles to smoothly transition from their original idle animation to the collection and disappearing effects once triggered by the player. This transition happens seamlessly for all four types of collectibles — Sad, Happy, Angry, and Scared which ensuring that each collectible plays its respective animation before disappearing from the scene.
I handled this functionality through the Collectible script, which I customized to trigger the appropriate Animator transitions and add a slight delay before destroying the GameObject. This way, the collection animation can fully play out, giving the player visual feedback and making the collectible interaction feel more polished and satisfying.
In Level 2, I implemented a new feature where the player can regain 1 HP after collecting 5 Emotion Collectibles. This healing mechanic was introduced to balance the difficulty of Level 2, as it is designed to be more challenging than Level 1. By ofering this small reward, we aim to keep players motivated and give them a sense of progression and encouragement to complete the level.
For the healing visuals, I designed a custom Healing Effect sprite that resembles sparkling magical elements. This visual appears every time the player regains HP, making the healing process feel more rewarding and noticeable. In addition, I integrated a healing sound effect that plays during the recovery to enhance feedback and ensure that players are aware they’ve gained health.
To support this functionality, I wrote a dedicated script called HealingEffectManager.cs, which handles both the healing visuals and sound playback. I also made modifications to the existing HPManager script to ensure that the healing process correctly increases the HP and updates the heart sprite on the UI. These scripts work together to create a smooth and responsive healing effect whenever the player meets the collectible requirement.
Healing Sound Effects MP3 File
ANGEL TAN XIN KEI:
- Onboarding Scene
- I created a welcoming interface with a "Get Started" button to ease players into the experience
- Storyline Scene
- Illustrated a storytelling section where players learn about the background and emotional narrative behind the game.
- "Start Game" button that appears after the story.
- Main Menu Scene
- Developed a clean layout with “Start Play” button to ensure responsive button interaction.
- Level 1 Scene
- Designed layout of gameplay for Level 1 with working mechanics, enemies, obstacles, and collectibles.
- Once complete the level, a “Proceed to Next Level” button.
- Continue Buffer Scene
- Added a short pause scene between levels to prepare the user for the next stage without breaking the immersion.
- Level 2 Scene
- Introduced new obstacles and mechanics in Level 2 for increased challenge and engagement.
- Upon completion, the player is taken directly to the endgame scene.
- End Game Scene
- Final scene that shares the moral of the story to tie everything together meaningfully.
- Included a “Back to Home” button for replayability, directing users to the Onboarding Menu.
|
| Fig 2.1 All Scenes in Unity |
- I illustrated a shadowy figure hiding under a cloak at the center of a dark background to create a mysterious, haunting tone right from the start.
- The title “Self - Shadowed” appears in glowing text, symbolizing inner identity and fear, immediately capturing the game's metaphorical essence.
|
| Fig 2.2.1 Onboarding Scene Background in Adobe |
|
| Fig 2.2.2 Onboarding Scene Background in Unity |
|
|
|
|
||
|
|
||
|
|
On the second page, I illustrated two blinking
monster eyes in the darkness, then animated
using Unity’s Animator and looping behavior to
evoke tension and mystery for storytelling.
Fig 2.3.6 Adjustment of Monster Eyes in Unity
Animator
Then, I have also done the scripting for page
container seamless sliding transtion in
storyline manager.
Fig 2.3.11 Scripting for Storyline Manager
Fig 2.3.12 Inspector for Storyline Manager
|
|
| Fig 2.4.1 Chapter 1 Flickers of Fears |
|
| Fig 2.4.2 How to Play Tutorial Panel |
|
| Fig 2.5.1 Level 1 Background |
|
| Fig 2.6.1 Chapter 2 Echos of Becoming |
|
| Fig 2.6.2 Continue Scene Background in Unity |
|
|
|
|
|
Fig 2.8.1 First background of End Game Scene |
|
| Fig 2.8.2 Second background of End Game Scene |
| Fig 2.8.3 Scripting for Page Sliding Animation |
|
Fig 2.8.4 Scripting for Text Typing Animation |
|
| Fig 2.8.5 Overview of EndGame Scene in Unity |
|
| Fig 2.8.6 Part 1 of EndGame Scene |
|
|
Fig 2.8.7 Part 2 of EndGame Scene in Unity |
|
| Fig 2.9.1 Level 1 Background |
|
| Fig 2.9.2 Level 2 Background |
|
| Fig 2.9.3 Level 1 Tiles |
|
|
Fig 2.9.4 Level 2 Tiles |
|
| Fig 2.9.5 Floating Tiles |
|
| Fig 2.9.6 Tiles Speed and Distance Setting |
|
| Fig 2.9.6 Scripting for Floating Tiles |
|
| Fig 2.9.7 Overview of Level 1 |
|
|
Fig 2.9.8 Overview of Level 2 |
D. Redesigned Umbrella Obstacle Animation
|
| Fig 2.10.1 Animation of Umbrella Open from Mystery Box |
E. Background Music Selection
|
| Fig 2.11.1 Finding Music Sources |
|
| Fig 2.11.2 Assigning Music Sources for Background Scenes |
PHOON YUK GUAN:
For Task 4, I updated existing UI panels and added sound effects and visual feedback to improve the game experience and polish the feel of interaction.
A. Game Flow UI Updates
1. Updated Game Completed Panel
Added inside:
- Next Level Button → calls UIManager.LoadNextLevel() to load ContinueScene.
- Quit Button → exits to main menu or another end scene.
 |
| Updated Game Completed Panel |
2. Updated Game Over Panel
Now includes:
- Replay Button (reload current level).
- Home Button (go back to MenuScene).
 |
| Updated Game Over Panel |
B. Button Hover & Click Sounds
I created UIButtonSound.cs, which is added to every UI Button object in Unity. Each button has:
AudioSource component.
- Two clips assigned: hover and click.
- Handled via Unity's EventSystem (IPointerEnterHandler and IPointerClickHandler).
Attached in:
- Main Menu
- Pause Panel
- Game Over & Complete Panels
- Storyline & Ending Screens
UIButtonsound.cs
 |
| UI Button Sound in Unity inspector |
B. Typing Sound (Storyline & Ending Scene)
In both StorylineManager.cs and EndingManager.cs, I created a coroutine for typing text using TextMeshProUGUI. To give players audio feedback, I played a typing sound during the loop.
IEnumerator TypeText(TextMeshProUGUI textElement, string fullText)
{
textElement.text = "";
audioSource.loop = true;
audioSource.clip = typingClip;
audioSource.Play();
foreach (char c in fullText)
{
textElement.text += c;
yield return new WaitForSeconds(typingSpeed);
}
audioSource.Stop();
}
 |
| Typing sound effect in Unity Inspector |
C. Emotion Collect Sound
Each emotion collectible has the PlaySoundOnHit.cs script attached. When player collides:
- Emotion count increases.
- Sound plays (pop/collect SFX).
- Emotion briefly reappears and "flies" to the UI (done without prefab, animator, or DOTween).
PlaySoundOnHit.cs
 |
| Attached on Unity Inspector |
D. Feedback on Damage (Visual + Sound)
1. Red Flash When Damaged
I created a full-screen Image in the Canvas (semi-transparent red), and used DamageFlashEffect.cs:
The image smoothly fades using Color.Lerp in Update() to create a red flash.
 |
| Red Flash Image Overlay in UI Canvas |
E. Player Movement Sound Effects
I created a PlayerSoundEffects.cs script attached to the player:
- Walk (looping sound when pressing left/right on ground).
- Jump (when pressing jump button).
- Land (when player touches ground again).'
 |
| Player Sound Effects assigned in Unity inspector |
FINAL TASK - SHADOWED-SELF SUBMISSION
Click HERE to view it on YouTube.
Here is our Shadowed-Self Game File in Google Drive link below.
Google Drive Link: https://drive.google.com/file/d/1jdlFhqm8WtUb8PdtSe9TX2SBx1Ow2qDW/view?usp=sharing
FEEDBACK
Week 3:
During Week 3, we presented our initial game concept and proposal to our lecturer. The central idea following the journey of a shadow child through a surreal, emotional world was praised for its narrative depth and symbolic resonance. However, we received feedback suggesting that our game mechanics needed to better reflect and support the storyline, and could benefit from more creativity. While the theme of light as both a threat and a potential source of healing was compelling, it wasn’t yet fully realized through gameplay. We were encouraged to collaborate more closely across different roles to ensure that the story, visuals, and mechanics developed in harmony.
Week 5:
During Week 5, we had revised our gameplay concept and presented our concept sketches of our game's characters design, background design, elements design and UI elements design which the feedback this time focused more on the visual presentation and cohesion of our art assets. While the backgrounds effectively conveyed mood and atmosphere, we were advised to improve visual consistency across elements and add more texture, depth, and dynamic use of shadows to enhance the overall aesthetic.
Week 10
After our presentation, Ms. Mia mentioned that our game mechanics are cute and really impressed her. However, she noted that the background tends to blend in with the characters, so she suggested either changing the background color tone or making the characters brighter to improve contrast. Overall, she really liked our game and felt it already looks like a complete prototype but just need a few small adjustments needed.
REFLECTION
Huey Yee:
Task 1: Game Design Document Proposal
Experience:
Working on the game design proposal was both challenging and rewarding.
Collaborating with Angel and Yuk Guan, we started by brainstorming
individual ideas, voting on the strongest concept, and refining it into
"Shadowed Self." I contributed by drafting the Introduction, Aim
& Objectives, Target Audiences, and mockups for Level 2. The process
required creativity, clear communication, and thoughtful decision-making as
we shaped the emotional and gameplay direction of our game.
Observation:
I noticed how effective group discussions and shared visual references were
in maintaining a consistent vision. Tools like our shared Pinterest board
helped everyone understand the game's tone, setting, and mechanics more
easily. Dividing tasks allowed each member to focus and bring out their
strengths, resulting in a well-rounded proposal.
Findings:
I learned that early planning and clear role distribution are key in game
development. Having a solid proposal document makes it easier to align
narrative, visuals, and mechanics. It also helped us identify potential
challenges, such as setting consistency and mechanic integration, early in
the process.
Experience:
In Task 2, I focused on developing art assets related to light obstacles and
protective elements for the game. Translating our concepts into visuals was
a new but exciting step, requiring attention to the game's emotional tone. I
worked to ensure that each visual matched the eerie yet soft atmosphere we
imagined, while maintaining clarity for gameplay.
Observation:
I observed that visual consistency plays a huge role in immersion. Minor
differences in style or color could shift the mood of a scene. Constant
feedback within the group helped refine the art and ensured it remained
faithful to the original concept. Sharing mockups helped others adjust their
designs to keep everything cohesive.
Findings:
Through this task, I discovered how visuals can deeply support storytelling.
Every asset, even something as simple as a light beam or shadow, carries
emotional weight. I also gained a better understanding of visual
communication and how it enhances player experience and gameplay clarity.
Task 3: Game Prototype
Experience:
During the development of the Shadowed-Self game prototype in Task 3, I was responsible for a significant portion of the character design, animation, and gameplay scripting. I explored Unity in more depth than ever before, including setting up animators, collision-based triggers, and visual/audio effects for elements like healing and collectibles. To overcome technical challenges, I actively sought help from online resources, especially ChatGPT for scripting logic and YouTube tutorials to understand Unity animation systems and user interface scripting. These platforms greatly accelerated my learning and made it possible for me to solve issues independently. I am also really grateful to work with amazing teammates like Angel and Yuk Guan. Both of them collaborated closely with me, shared feedback, and divided the design work effectively so we could move forward together in sync.
Observation:
I observed that using an iterative workflow helped a lot in the development process. As we built the prototype level by level, we were able to spot issues and refine our features, especially in terms of character transitions and collectible behaviour. We also realized how important communication and proper asset naming were to avoid confusion, particularly with multiple animations and prefabs. I also noticed that certain Unity features—like animator transitions and UI updates that can cause unexpected bugs if not handled carefully, and testing them often helped to reduce unnecessary debugging time later.
Findings:
Through Task 3, I learned the value of early planning and assigning clear responsibilities within the team. I also realized that visual feedback (like effects when collecting or healing) significantly improves player experience. Additionally, I found that debugging and polishing even a simple interaction can take more time than initially expected, especially when making it feel smooth and responsive. This task helped me grow not just technically but also in terms of teamwork and collaboration.
Final Task: Playable Game
Experience:
In the final playable version of Shadowed-Self, I continued working on scripting and polishing key features such as healing logic, scene transitions, damage systems, and the HP UI. I was able to fully implement features from earlier stages and expand them across multiple levels. I continued to rely on ChatGPT and YouTube to troubleshoot bugs and gain new insights, especially when developing scene management and animation control for multiple levels. I am very happy and thankful to work with teammates like Angel and Yuk Guan, who were always supportive, cooperative, and contributed equally to design, artwork, and testing. Our collaboration helped us successfully complete a playable game project with meaningful interaction and storytelling.
Observation:
From this task, I observed that final integration is often more complex than individual tasks. Even when individual features work perfectly in isolation, putting them together into a seamless experience requires extra attention to timing, compatibility, and performance. We also faced issues like audio layering, collision inconsistencies, and asset organization, which we resolved through communication and testing.
Also, player feedback became more crucial at this stage. We realized which features were enjoyable and which ones needed fine-tuning to enhance engagement.
Findings:
By the end of this task, I have become more confident in my ability to build a fully playable 2D game using Unity. I also understood the importance of collaboration, clear file structuring, and playtesting in delivering a polished game. The most valuable lesson I learned is that even with limited resources, great teamwork and a clear vision can lead to a successful and meaningful game experience.
Angel:
Task 1 & Task 2's Reflection:
Experience:
The ideation phase for Shadowed Self was one of the most creatively exciting parts of the project. Initially, each of us had very different ideas in terms of genre, theme, and mood. As we moved forward and shared inspirations, we explored a variety of mechanics and emotional narratives eventually landing on a surreal and symbolic game rooted in shadow, light, and identity. While the core concept leans toward a dark, dreamlike experience, we still wanted the gameplay to feel simple and intuitive, something approachable like Mario Kart, but with emotional weight.
This phase taught me the importance of not only aligning our ideas as a team, but also supporting each other’s strengths and being open to changes. Every iteration whether in story, mechanics, or visuals brought us closer to a clearer and more cohesive direction.
Observation:
As development continued, I realized that balancing gameplay with a meaningful narrative is far more complex than expected. Referring to Game Flow Theory, a well-designed game should touch on multiple psychological factors such as Sensation, Fantasy, Narrative, Challenge, Control, Curiosity, Surprise, and even Submission.
For Shadowed Self, the added challenge was embedding a moral narrative with the themes of fear, self-doubt, light vs. shadow, and self-discovery into the very mechanics of the game. We didn’t want the message to be spoon-fed; we wanted players to feel it. That meant every design choice whether it was level structure, asset motion, or how players collect pieces of themselves , had to support the overall theme naturally.
Findings:
This project helped me understand that the deepest impact comes when gameplay and story work together seamlessly. A game that’s only fun but lacks depth can feel hollow. On the other hand, a game that’s rich in meaning but lacks playability may fail to hold a player’s attention.Through feedback sessions and iterative improvements, I’ve learned that mechanics should carry meaning, not just function. From animating light fragments to refining background transitions in Unity, every asset became part of the story and that integration made the game feel more alive.In short, Shadowed Self taught me not to treat story and mechanics as separate lanes, but to design them as two parts of one emotional journey. I’ve gained a deeper appreciation for the creative process in game development, and I’m excited to carry this mindset into future projects.
Task 3: Game Prototype
Experience:
My experience throughout this project—from the initial proposal phase to developing a working prototype has been incredibly rewarding and eye-opening. Even though it’s just a prototype, the process felt surreal and exciting. I truly enjoyed every step of the journey, especially seeing our ideas gradually come to life in Unity. Since I had no prior background in Unity or coding, I relied heavily on YouTube tutorials and ChatGPT for guidance during scripting. It was a steep learning curve, but each time something worked successfully like an animation triggering correctly or a collectible functioning as expected it gave me a huge sense of satisfaction and confidence. This project made me realize that with enough persistence and support, I can learn new skills, even from scratch.
I am extremely grateful to my teammates, Huey Yee and Yuk Guan. Their support was invaluable. Whenever I faced issues like bugs, coding errors, or crashes, they were always there to help me troubleshoot and fix the problems patiently. Their encouragement really kept me going.
Observation:
Through this project, I observed that game development, while challenging, becomes much more manageable with time, practice, and teamwork. At first glance, certain tasks like animating or scripting seem intimidating, but after getting used to the Unity interface and experimenting a bit, things start to make more sense.
One key observation was that there’s often a big difference between our original ideas in the proposal and the actual implementation. For example, we imagined the mystery box as a simple object in the beginning, but during development, we realized it needed extra effects like an opening animation, sound, and interaction logic to feel complete and satisfying to players. Similarly, small details like the light beam animation were initially overlooked but became crucial for gameplay clarity and atmosphere.
Findings:
From this project, I discovered several important things about game development is iterative: What you plan at the start will almost always evolve. New ideas, obstacles, and improvements naturally appear as you start building. Flexibility and creative problem-solving are essential. Also, small details make a big difference such as effects, animations can significantly enhance the player experience. Adding things like animation to the mystery box or visual cues for collectibles made the game feel more alive. I learned more about Unity and coding through hands-on practice than I ever would from theory alone. Testing, failing, and trying again helped solidify my understanding.
Online resources like YouTube and ChatGPT played a huge role in helping me understand scripting and overcome technical issues. Knowing how to search for solutions is just as important as knowing how to code.Working with teammates who support and help each other makes a huge difference. The success of this project was only possible because of strong collaboration, communication, and trust within the team.
Final Task: Playable Game
Yuk Guan:
Task 1 & Task 2's Reflection
Experience:
Working on Shadowed Self from the early idea stage to the final art and animation was a very fun and meaningful experience. I had the chance to come up with the game concept, design characters, and create animations that matched our game’s theme. Even though it was challenging at times—especially when the walk cycle didn’t feel right at first—I enjoyed learning how to improve my work. I also liked working with my teammates, and it felt great to see how each of our parts came together to form one complete game idea.
Observation:
Throughout the project, I noticed how important it is for everything to be connected—story, visuals, and gameplay. At the beginning, our idea was strong, but the mechanics didn’t fully match the emotions we wanted to show. After receiving feedback, we saw how small things like adding textures, adjusting UI colors, or improving movement could make a big difference. I also saw how helpful it is to review and test things often, like how I had to redo the walk animation after studying real animation examples online.
Findings:
From this project, I learned that game development is not just about drawing nice characters or making cool effects—it’s about how everything works together to give players a full experience. I found that planning, researching, and fixing small mistakes early can help avoid bigger problems later. I also learned that collaboration is very important. By sharing ideas and giving feedback to each other, we made the game feel more complete and polished. This project helped me grow in both design and teamwork skills.
Task 3: Game Prototype
Experience
For Task 3, my main goal was to build the basic game UI and make sure the player could interact with everything smoothly. I started with creating the pause menu, game over screen, level complete panel, and emotion counter. I learned how to manage different UI panels inside the Canvas and switch them on/off using scripts. It was quite fun figuring out how to properly use Unity’s Button onClick system and link them to my UIManager.cs. Setting up the HP system also gave me a better understanding of how to use sprites to visually represent player health. I also really enjoyed creating the logic behind restarting the level, pausing the game with Escape key, and updating the HP image according to how much damage the player took.
Observations
One thing I observed while working was that even small features like a restart button or emotion count needed proper scripting and connection through Unity Inspector. Just adding the button visually in Canvas is not enough — it needs backend logic to function correctly. I also noticed how easy it was to miss small things like forgetting to assign an AudioSource or prefab in the Inspector, which caused a few bugs at first. I also realized the importance of managing Time.timeScale when pausing or resuming the game — without that, animations and physics kept running even when paused.
Findings
I found out that using a singleton pattern in UIManager.cs and HPManager.cs really helped to access them from other scripts easily. It kept my code neat and reusable. I also discovered how sprite arrays can be used to reflect different HP states visually — like when I made the red glowing HP image for when the player is low on health. This made the game feel more polished. Overall, I learned how important UI is to the player experience — it's not just for decoration; it gives players feedback and control over the game.
Final Task: Playable Game
Experience
During the final project phase, I focused more on adding polish and player feedback. I added typing sound effects in both the storyline and ending scenes, which made the narration feel more alive. I also implemented button hover and click sounds to every single button in the game — even the ones in storyline and pause menu. On top of that, I worked on damage feedback with camera shake and red flash effect whenever HP drops, which added a lot of intensity to the game. I also added emotion collect sound and made the emotion fly up to the counter bar — all with just code and without using animator or prefab, which I’m really proud of.
Observations
What I observed during this stage was how much small sounds and effects could improve the "game feel." Without sound and visual feedback, pressing a button or taking damage felt empty. But once I added the sound effects, it immediately made everything feel more responsive. Also, working with coroutines for the typing animation made me more comfortable using IEnumerator, especially when combining it with audio playback. I also noticed how critical it was to have clean organization in my scripts, since everything was getting more complex.
Findings
I found out that everything in Unity can be enhanced with just scripting — I didn’t need Animator or DOTween for most of the features I implemented. By writing my own custom scripts for audio, typing, camera shake, and screen flash, I could control exactly how things behaved. I also learned that it's better to write reusable components like UIButtonSound.cs or PlayerSoundEffects.cs, so I can apply them to multiple buttons or characters without repeating myself. In the end, I realized that feedback systems (audio, visual, vibration) are just as important as gameplay mechanics — they complete the experience.
Comments
Post a Comment