Games Development - Task 3: Game Prototype

⭐ 11/6/2024 - 25/6/2025 (Week 8 - Week 10)

🎀 Yan Zhi Xuan | 0369425

💜 Games Development | Bachelor of Design (Hons) in Creative Media | Taylor's University

📚 Task 3: Game Prototype

TABLE OF CONTENTS /ᐠ - ˕ •マ ⋆｡°✩

1. Lectures

2. Instructions

3. Task 3: Game Prototype

4. Feedback

5. Reflections

1. LECTURES ⊹ ࣪ ˖₊˚⋆˙⟡

Week 8

Fig. 1.1 player attack - sprite sheet and rigging version.

Document Tutorial: player attack - spriteSheetVersion.docx

Document Tutorial: player attack - rigging version.docx

Player Attack Setup (Sprite Sheet + Rigging Version)

1. Add a Sword

Import or draw your sword sprite.
Drag the sword under the hand bone in your rig (e.g., fingerL or handL) as a child object.
This keeps the sword aligned with the character's movement and rotation.

2. Create an Attack Point

Right-click in the Hierarchy and choose Create Empty (or use Ctrl + Shift + N).
Rename the new empty GameObject as AttackPoint.
Drag it under the sword object as a child — this will be used for hit detection or damage range.

3. Why AttackPoint?

You can use AttackPoint as the origin for raycasting, colliders, or area-of-effect checks during the attack animation.
It helps separate logic from visuals (sword sprite vs. actual hitbox).

Week 9

Fig. 1.2 Player Attack & Input Handling Setting.

Tutoria Videos: playerAttack.mkv and change input handling setting.mkv

How to Change Input Handling Setting for Player Attack

Open Input Handling Settings:

Go to Edit > Project Settings > Player. Scroll down to the Configuration section.

Locate “Active Input Handling”: You will see three options:

Input Manager (Old) – uses Input.GetButton, Input.GetKey, etc.
Input System Package (New) – uses InputAction and bindings.
Both – enables compatibility with both systems.

Select the Input Option You Use:

If your PlayerAttack.cs uses Input.GetButtonDown("Fire1"), choose: ✅ Input Manager or ✅ Both (recommended if you’re transitioning to the new system)
Restart Unity to Apply Changes: After changing the setting, Unity will prompt a restart. Click Yes to confirm.

Week 10

Fig. 1.3 Array Sample Code.

✅ How It Works:

fruits[]: holds your strings (like "apple", "orange").
mytext[]: holds references to your TextMeshProUGUI text fields.
In Start(), it loops through the array and: Logs each fruit name. Sets each UI text element to display the corresponding fruit name.

Notes: You need to assign values to fruits[] and link the TMP_Text[] elements in the Inspector. Make sure you have 3 TextMeshProUGUI elements in your scene and drag them into mytext[].

Week 11-13

Tutoria Videos:

2. INSTRUCTIONS ⊹ ࣪ ˖₊˚⋆˙⟡

Fig. 2.1 Module Information Booklet - Games Development.

Task 3: Game Prototype (Week 08–10, 20%):

Develop a working prototype using Unity (grey boxing allowed)
Focus on core mechanics: movement, enemies, level logic
Submit: Video walkthrough, E-portfolio post

3. TASK 3: GAME PROTOTYPE ⊹ ࣪ ˖₊˚⋆˙⟡

Yan Zhi Xuan (me)

Further Refinement of Character Design

Fig. 3.1 Drawing Process in Procreate.

During Week 10, I continued refining the character designs by experimenting with different visual styles, particularly comparing versions with and without outlines. Initially, I used Adobe Illustrator to create the characters, but I later switched to Procreate, which made the process of redrawing and recoloring much more efficient and intuitive. This transition allowed me to focus more on achieving a painterly texture and adjusting the color tones to better match the game’s background art style. With this new workflow, it also became easier for me to continue developing the sprite sheet animations, as Procreate supports frame-based animation and more flexible brush control suited for my style.

Drawing Process Videos:

Fig. 3.2 Drawing Process of Main Character: Subject #02.

Drawing Process - Main Character

The design process for Subject #02 involved a thoughtful evolution in both style and color treatment to better integrate with the game’s visual atmosphere. Initially, the character was drawn with clean vector lines and flat colors—simple shapes defining the body, cloak, and star motifs. This early design emphasized clarity and recognizability, using grayscale tones with subtle teal accents on the sleeves.

As development progressed, the second phase introduced an important step—testing character color variations directly within the game environment. The team experimented with contrast by introducing a shadow counterpart (a dark version of Subject #02) to explore visual balance and emotional tone. The main character’s colors were also brightened slightly to improve visibility against the background.

In the final stage, the character received a more refined and textured look. Soft gradients and subtle shading were added to give Subject #02 a more three-dimensional appearance while retaining the simplicity of its original form. The pastel tones became more luminous and atmospheric, allowing the character to harmonize beautifully with the softly lit, ethereal environment. This final version not only looks more polished but also feels more emotionally connected to the game world.

Fig. 3.3 Drawing Process of Ghost.

Drawing Process - Ghost

The design journey of the Ghost character began with a minimal and expressive 2D silhouette. The first version featured a simple sheet-like shape with flat colors and a thin black outline, giving it a clean and iconic ghost appearance. Its drooping eyes and slight frown subtly communicated melancholy, fitting well with its mysterious and haunting personality. However, this early version lacked the atmospheric depth needed to feel integrated into the game's environment.

In the second stage, the ghost was reimagined with soft textures and volumetric lighting. The outlines were removed to allow for a more organic blend with the background, and gentle shading was applied to give the body a cloudy, weightless feel. The facial features were retained but now glowed faintly, adding a supernatural quality.

The final version brought full refinement to the form and mood. The shape of the cloak became more natural and fluid, with additional folds and fluttering motion lines that suggest it's floating or drifting. The color was enhanced with subtle bluish-gray shadows, and its pink eyes appeared more luminescent. These changes gave the ghost a spectral elegance that not only elevated its presence but also allowed it to seamlessly fit within the game’s ethereal, dream-like world.

Fig. 3.4 Drawing Process of Malfunctioning Machine.

Drawing Process - Malfunctioning Machine

The Malfunctioning Machine character was designed to embody a corrupted, rogue robot—one that once served a purpose but now threatens the player. The initial concept was drawn with flat lines and basic shading, emphasizing its symmetrical, mechanical form with stitched seams and a single warning symbol on the face. This first version focused on readability and shape language, using a dark expression and minimal colors to suggest hostility.

In the second stage, the character was re-rendered with 3D-like volume. Metallic textures and soft shadows were added to the body, creating a more believable robotic surface. The facial display was updated with a glowing magenta swirl effect to replace the static eyes, visually representing its unstable programming.

The final version introduced polished finishes, smoother metallic highlights, and increased contrast. The head, limbs, and joints gained more detailed surface reflections, giving the character a weightier, more machine-like presence. The antenna, which once faded into the background, was darkened for visibility. Overall, these enhancements helped the Malfunctioning Machine better blend into the game's stylized sci-fi environment while standing out as a dynamic threat.

Fig. 3.5 Drawing Process of Monster Born from Failed Experiment.

Drawing Process - Monster Born from Failed Experiments

The development of the monster character—symbolizing a failed experiment—was guided by the goal of evoking unease and instability. In the initial drawing, the design featured sharp, jagged edges and minimal detailing, using flat lavender tones with bold red stitching over the mouth to suggest artificial assembly. As the design progressed, more details and depth were introduced to give the creature a fleshy, malformed appearance. In the second version, lighting and texturing were applied to the body, and the facial expression was intensified with glowing magenta eyes and softer shadows, enhancing its mutant quality.

The final version introduced nuanced improvements in shape language, texture, and color harmony. The body was refined with subtle gradients and highlights that added a soft, eerie glow, making it feel more alive yet unnatural. The eyes became more hypnotic, the silhouette more monstrous, and the surface gained a slight wetness to emphasize its grotesque, lab-born origins. The creature now fits more cohesively with the game’s ominous and mysterious environment, reinforcing its narrative as a product of twisted scientific failure.

Fig. 3.6 Drawing Process of Final Boss.

Drawing Process - Final Boss, Dr. XX

The creation of Dr. XX, the game’s final boss, involved a careful transformation from a sketchy, flat illustration into a fully rendered character with presence and menace. In the initial phase, the design leaned heavily on bold outlines and exaggerated features—such as his oversized mechanical arms, angular staff, and sharp beak-like mask—to emphasize his unnatural fusion of man and machine. This version served as a solid base for silhouette and proportion testing.

As the design progressed, the second stage focused on adding depth and atmosphere. The color palette was softened, and shading was introduced to define the folds in his lab coat, the texture of his robotic limbs, and the glassy gleam in his eyes. The gold halo and trident were toned down to better integrate with the icy, clinical environment of the boss arena.

In the final version, Dr. XX gained a more sinister and ethereal appearance through detailed rendering and lighting. His hair and coat became more translucent and layered, giving him a ghostly presence, while the robotic arms now appear weighty and powered, glowing with cold energy. This evolution elevated Dr. XX from a quirky scientist to a truly threatening antagonist—one that visually communicates his corrupted genius and finality as the game’s climactic foe.

Fig. 3.7 Initial Character Design VS Finalised Character Design.

In the transition from the initial to the finalised character designs, each figure underwent a significant visual enhancement, not only in rendering quality but also in mood and tone. However, there is still room for further refinement to fully harmonize the character designs with the background art style of the game. The current characters, while now more textured and detailed, still exhibit a stylistic gap from the softly illustrated and immersive environment seen in the game background. For example, the shading and material rendering of the characters—particularly Dr. XX and the ghostly figure—could benefit from more atmospheric lighting and painterly textures to reflect the eerie, slightly surreal mood of the level design. Integrating consistent brushwork, soft gradients, and color temperature aligned with the game's palette would create a stronger visual coherence. This adjustment would not only strengthen the narrative immersion but also enhance the overall player experience by making the characters feel like they truly belong in the same universe as the game's haunting, otherworldly environment.

Color Difference Between Initial and Finalised Characters:

One of the most noticeable improvements from the initial to the finalised character designs is the use of color. In the initial version, the characters were rendered in flat, solid colors with minimal shading, giving them a clean and cartoon-like appearance. While effective for early exploration, this style lacked the depth needed to integrate seamlessly into the game’s atmospheric background. In contrast, the finalised versions introduced a richer and more blended color palette. Soft gradients, textures, and subtle lighting effects were applied to create a sense of volume and realism. For example, Subject #02 transitioned from plain white and teal to a softer, more pastel tone with gentle shadows that reflect the ambient light of the environment. Similarly, the ghost character's stark white body was enhanced with a warmer hue and soft pink highlights around the eyes, making it feel more ethereal and haunting. These color adjustments help bridge the gap between the characters and the moody, painterly backdrop of the game world, resulting in a more cohesive and immersive visual experience.

Sprite Sheet Animation of Characters

Fig. 3.8 Sprite Sheet Animation of Main Character: Subject #02.

Idle: Subject #02 gently hovers in place with a subtle breathing animation, conveying a sense of calm awareness and readiness.
Walk: The character walks with both legs and arms swinging in a natural motion, adding liveliness to its movements while preserving its light, floating charm.
Jump: During the jump, Subject #02 lifts off the ground with arms slightly raised, maintaining a smooth and airy motion that reflects its soft, mystical nature.

Attack: The character performs a ranged attack by launching fire bullets, visually representing a magical projectile ability.

Fig. 3.9 Sprite Sheet Animation of Ghost.

Idle: The ghost slightly floats in place with gentle, effortless motion, giving it a calm and eerie presence.
Walk: It glides forward with a subtle, flowing movement—like fabric drifting in the wind—emphasizing its weightless, spectral form.
Attack: The ghost leans forward with narrowed eyes, suggesting it's channeling a ghostly curse or energy-based attack.
When Die: The body deflates and slowly collapses while fading upward, creating a visual effect of the ghost vanishing into thin air.

Fig. 3.10 Sprite Sheet Animation of Malfunctioning Machine.

Idle: The robot stands still with glowing eyes blinking, giving off a sense of being temporarily inactive or charging.
Walk: A mechanical step-by-step movement that feels stiff but deliberate, consistent with a malfunctioning machine.
Attack: A green electric spark or laser effect bursts from its hand, reflecting technological aggression.
When Die: The robot powers down with a brief stutter in movement and dimming of the eye lights, simulating a shutdown sequence.

Fig. 3.11 Sprite Sheet Animation of Monster Born from Failed Experiment.

Idle: The monster stands alert with a slight twitch in its body, giving it a restless and unstable appearance, emphasizing its unnatural origin.
Walk: It moves in a low, creeping posture with short, stomping steps that showcase its heavy and aggressive nature.
Attack: The monster lunges forward slightly with a snarl, claws outstretched and glowing eyes focused, indicating a brutal and instinct-driven strike.
When Die: Upon defeat, the creature collapses with a slump, its head dropping and body sinking as if drained of energy, reinforcing its tragic, malformed background.

Fig. 3.12 Sprite Sheet Animation of Final Boss.

Idle: Dr. XX stands with minimal movement, robotic arms behind him gently flexing, maintaining a calm but ominous presence.
Walk: A slow stride animation, giving off a feeling of confidence and authority, with robotic limbs moving in sync.
Attack: He strikes forward with the staff while his back arms slightly power up or shift, combining both magical and mechanical aggression.
When Die: The final boss lowers his head, and the glow from his limbs dims, signaling defeat as his tall form subtly collapses in place.

Yang Zhi Qing

Further Refinement of UI Design and Game Prototype

Fig. 3.13 Refined UI Elements.

The game’s UI elements feature a cohesive crystal and sci-fi aesthetic, including gem-like item icons, angular dialogue boxes, soft gradient buttons, and a stylized pause menu. The icons vary in shape and color, likely representing different collectables or abilities. Dialogue boxes display character names and lines with optional portraits, enhancing narrative immersion. Selection buttons use arrow indicators and clean formatting for in-game choices. The pause menu overlays a dark lab-themed background with gear motifs, showing item counts and navigation options, maintaining consistency with the game's experimental setting.

Fig. 3.14 Cover UI Page.

She also used Procreate to draw the Cover UI for our game.

Chin Tze Wei

Audio Design

Fig. 3.14 Audio Design, Story Flow and Script Design.

This layout presents a comprehensive overview of the game's narrative and audio structure, focusing on three main components: audio design, story flow, and script writing. The audio section outlines ambient sound choices and sci-fi-inspired effects to build tension and emotion. The story flow is divided into phases and branching paths, starting with a mysterious prologue and leading to two alternate endings based on player choices: "I am HER" and "I am NOT HER." Key dialogues are scripted across scenes—ranging from environmental storytelling to boss encounters—while monologues and memory logs support the deeper lore. A clue-based system tracks player exploration and determines which ending is unlocked, encouraging thorough engagement with in-game content to reveal the protagonist's true identity.

Game Development Stage 1 in Unity

Level 1

Fig. 3.15 Level 1.

Creating Level 1 of our 2D platformer in Unity was a fun and detailed process. We began by organizing the scene hierarchy into key components like the player, enemies, items, background, and UI elements. This made it easier to manage everything as the project scaled. The main character was imported with animation sprites, while the background was layered to create depth and atmosphere using parallax visuals.

The dialogue system was built using Unity’s Canvas, with TextMeshPro elements for character names and speech, plus a custom Dialogue Manager script that handles typing effects and portrait displays. We also set up the Level Manager and UI Controller to manage game flow and interactions.

All assets were neatly organized into folders like Animation, Scripts, UI, and Scenes to keep the workflow efficient. Testing was done frequently in Play Mode to fine-tune platform collisions, enemy logic, and player controls. Overall, building this level helped us blend gameplay, storytelling, and visual design into a polished experience.

⭐ Final Submission

Task 3 Prototype Walkthrough Video ·RE:SET·

YouTube Video: link

Fig. 3.16 Task 3 Prototype Walkthrough Video (Rough Level 1).

⭐ My Contribution (Yan Zhi Xuan)

4. FEEDBACK ⊹ ࣪ ˖₊˚⋆˙⟡

Week 8
No feedback given.

Week 9

For sprite sheet animation, it's very important that each frame (each image in the sprite sheet) is exactly the same size.

Week 10

Currently, the gameplay is quite simple, which may limit player engagement and replay value. To enhance the experience, it is important to introduce additional features that bring variety, challenge, and progression to the game. Adding these elements can deepen the mechanics, create more meaningful player interactions, and make the overall experience more memorable.

5. REFLECTIONS /ᐠ - ˕ •マ

This task was definitely the most technically demanding part of the module, but also one of the most rewarding and eye-opening experiences for me. It was the first time I truly stepped into the role of a game developer—not just planning or designing, but actually bringing gameplay mechanics to life through code and interaction.

Using Unity, we started building a working prototype of our game. Since we was still quite new to scripting in Unity, every line of code felt like both a challenge and a lesson. We had to figure out how to implement player movement, jumping, collisions, enemy AI, obstacles, and the game’s win/loss conditions. There were many times when the code didn’t work the way we intended. It was frustrating at first, but we came to understand that bugs and failures are part of the learning process.

Instead of giving up, we kept going. We referred to Unity documentation, watched YouTube tutorials, asked for help from friends, and reworked our logic until things made sense. Each time we debugged a problem or managed to get a mechanic working, we felt a genuine sense of accomplishment. It taught me patience and resilience. I learned to troubleshoot with intention, not panic—and most importantly, to test small things often before moving on to bigger steps.

Search This Blog

Yan Zhi Xuan (0369425)