LIEW XIAO HUI / 0353121
BACHELOR OF DESIGN (HONOURS) IN CREATIVE MEDIA / GAME DEVELOPMENT
Final Project: Playable Game
JUMPLINK
Instructions
Final Project: Playable Game
Feedback
For this task, we are required to further develop the prototype from the previous assignment by integrating art assets into the game and producing a fully functional and playable version.
Progress
I continued working on the Level 01 map, experimenting with different wall tilesets and building designs to create a more varied street layout.
Figure 1.1 - 1.4 Progress screenshot.
I also designed additional wood tilesets with various angles, positions, and sizes to allow for greater flexibility when building the map.
Figure 2.1, 2.2 Progress screenshot.
With the new art assets, I was able to create buildings and streets with more varied styles and designs that better align with the steampunk theme.
Figure 3.1 - 3.5 Progress screenshot.
However, when pushing my changes to GitHub, I encountered conflicts because another team member had updated Level 01 at the same time. My local Unity scene appeared empty, which was stressful as I had invested significant time in designing the buildings.
Figure 4.1 - 4.6 Progress screenshot.
Eins eventually helped resolve the issue, but some tilesets were missing, causing the Level 01 map to display in pink. Attempts to fix this with ChatGPT’s guidance didn’t work, so I manually rebuilt the missing sections using my progress screenshots as references.
Figure 5.1 - 5.4 Progress screenshot.
Once the issue was resolved, I continued expanding Level 01 with more buildings and varied terrain, assigning lights to each lamp tile for ambiance.
Figure 6.1 - 6.7 Progress screenshot.
After Eins completed the dialogue feature, I added NPCs to the map and attached the necessary scripts. This allowed me to create interactive NPC dialogues where the player’s choices influence the outcome, though Eins was still finalizing the choices at this stage.
Figure 7.1 - 7.4 Progress screenshot.
Lastly, I added the background buildings I had previously drawn, adjusting their opacity and details to enhance depth.
Figure 8.1 Progress screenshot.
Since most of Level 01’s map was completed during Week 10, I focused on finishing the remaining sections in Week 13 as I had been busy with other module assignments. I continued developing the buildings, planning for Level 01 to end shortly after the NPC dialogues to avoid making the level too long. I added a few more buildings after the NPC interaction, intending for players to transition to Level 2 from there.
Figure 9.1 - 9.6 Progress screenshot.
While testing the game, I discovered that players could jump onto the rooftops and bypass the intended path, which would cause them to miss the key. I initially tried using pipes in the opaque layer to block players from jumping to the rooftops, but it looked awkward in the design. Instead, I adjusted certain tiles to opaque, adding colliders to prevent players from skipping the intended path.
Figure 10.1 Progress screenshot.
I also tested Level 02, which was built by Jzeshin, and noticed it was highly interactive with multiple movable platforms controlled by beacons. To align with this, I moved the last part of my buildings further back and inserted a patrolling robot and beacon interaction in between.
Figure 11.1, 11.2, 11.3 Progress screenshot.
Once the player triggers the beacon, a platform rises to form a path to the next area. At the final part of the street, I added a large turret to increase the difficulty for Level 01.
Figure 12.1, 12.2 Progress screenshot.
During class discussions, Jzeshin and I realized the central clock tower and the machine at its top (which players must destroy to save the citizens) were not yet created. Jzeshin volunteered to build the clock tower while I designed the machine. I searched Pinterest for visual references of machines and suitable color palettes. Using these ideas, I sketched the machine outline in Pixelorama, refining its shape, height, and width across layers.
Figure 13.1, 13.2, 13.3 Progress screenshot.
Initially, I used the same colors as the beacon for consistency, but the result didn’t match the overall game theme, so further adjustments were needed.
Figure 13.4, 13.5 Progress screenshot.
As Eins completed the development of the checkpoint and death point features, I proceeded to implement them into Level 01. With these mechanics in place, I could restrict the lower sections of the map, ensuring that if a player accidentally falls off the map, they would respawn at the previous checkpoint. This not only prevents unintended exploration but also helps conceal certain level design tricks used to structure the platforms and environment.
Figure 14.1, 14.2, 14.3 Progress screenshot.
Additionally, I asked Lia for help animating the steam effects. I had already prepared the sprite sheet for the steam but wasn’t sure how to properly animate it in Unity. After Lia helped me animate the steam, I placed it into the scene.
Figure 15.1 Progress screenshot.
However, I noticed the steam and turret appeared blurry and didn’t match the crisp look of my original design. Upon closer inspection, I realized the sprite was not properly sliced, and the sprite sheet settings, such as Pixels Per Unit, Wrap Mode, and Filter Mode had not been configured correctly. I adjusted these settings, re-sliced the sprite, and re-applied it into Level 01, which significantly improved its clarity and made the street environment feel more dynamic and alive.
Figure 16.1, 16.2 Progress screenshot.
While testing, I found the checkpoint and deathpoint weren’t working. After discussing with Eins, we found that additional scripts needed to be attached to the UI canvas.
Next, I focused on finalizing the machine assets. I decided to adjust the machine’s color scheme using visual references from Pinterest for inspiration. After experimenting with various color combinations, I settled on a darker brown for the machine body, complemented by a green and blue hourglass section, with yellow sand inside. This combination provided a strong contrast against the machine’s body and also harmonized well with the overall color palette of the game.
Figure 17.1 - 17.5 Progress screenshot.
To bring the machine to life, I added a simple animation to the sand, making it flow continuously to visually represent the ongoing extraction of time from the city’s citizens.
Figure 17.6, 17.7 Progress screenshot.
Once the machine was completed, I revisited Level 01 to run further tests and identify areas for refinement. During testing, I noticed the steam animation was moving too quickly, so I adjusted its animation speed to create a more natural effect.
Figure 18.1, 18.2 Progress screenshot.
Additionally, I animated several gears within the level to rotate continuously. Eins had created a gear prefab that allowed me to easily swap static gear tiles with rotating ones by simply replacing the tile in Unity, automating the rotation process. I strategically selected certain gears to animate while leaving others static to add variation and visual interest.
Figure 19.1 - 19.4 Progress screenshot.
Lastly, I realized that some decaying clocks, essential for replenishing the player’s Time Gauge (which acts as their life) were missing from key areas of the level. To guide player movement and ensure they follow the intended path, I placed these decaying clocks along the main route. This placement also prevented players from wandering off-path or climbing onto unintended areas like the tops of buildings.
Figure 20.1, 20.2 Progress screenshot.
I noticed that our home menu lacked a central clock tower design, which was a key element of the game. Since it should be the main visual, I created the clock tower in Pixelorama using various Pinterest references. To distinguish it from the street buildings, I designed unique wall tiles and a special clock asset with green and dark green smudged areas adding a magical feel to it. The windows were also colored green to match the tower’s overall design.
Figure 21.1 - 21.6 Progress screenshot.
After completing the design for the Central Clock Tower, I was also assigned to create the health bar for the final boss, the steampunk dragon, which Eins was developing. I wanted the dragon’s health bar to have a distinct design that would allow players to immediately differentiate it from the player’s Time Gauge. To achieve this, I referred to visual references on Pinterest and also studied the dragon assets that Jzeshin had illustrated.
Figure 22.1, 22.2, 22.3 Progress screenshot.
Inspired by Jzeshin’s art style, I incorporated dragon wings on the top left and right corners of the health bar and added dragon tails curling around the bottom right corner. To further align with the game’s steampunk aesthetic and the dragon’s design, I designed a gear-shaped frame for the area where the dragon sprite would be displayed. For color differentiation, I made the dragon’s health bar brown to contrast with the player’s Time Gauge, which is in red to represent humanity. This visual distinction helps players easily identify the two gauges during gameplay.
Figure 23.1, 23.7 Progress screenshot.
Next, I redesigned the home menu by animating and placing the clock tower into the scene, rearranging the terrain and buildings, and adding decorative elements like gears, steam, streetlights, and decaying clocks. I also darkened the tiles so that the game title and start button stood out.
Figure 24.1 - 24.8 Progress screenshot.
Then, I noticed that the design for Level 3, which takes place inside the Central Clock Tower, felt somewhat empty in the background. To improve its visual depth and realism, I decided to add additional elements like pipes, rearrange the position of lights, and adjust the size of the windows to better match the setting.
Figure 25.1 - 25.4 Progress screenshot.
I also created an animated clock sprite sheet based on the clock tower design I had previously drawn. After importing it into Unity, I animated the clock and placed it in the scene as a background element behind the machine, ensuring it visually aligned with the exterior design of the Central Clock Tower.
Figure 26.1, 26.2, 26.3 Progress screenshot.
In addition, I worked on enhancing the atmosphere by experimenting with Unity’s particle system. Specifically, I wanted to add particles near the top of the clock tower, where the machine is located. I felt that the existing sand animation alone was not enough to represent the idea of time being collected from the citizens. Therefore, I experimented with various particle settings to achieve an effect where particles would float from the outside and gather towards the hourglass, symbolizing the absorption of time.
Figure 27.1 Progress screenshot.
Meanwhile, Eins was working on connecting the levels together but wasn’t certain how Level 01 should transition to the next. After discussing with him about how he envisioned the level transition, I created a sewer and ladder for the player to descend, providing a logical exit point. Eins would later implement the auto-navigation system to handle the player’s movement into the next area.
Figure 28.1 Progress screenshot.
I also realized that the background characters I had drawn were missing from both Level 01 and Level 02 scenes. So, I began adding these characters into the maps and created idle animations using the sprite sheet I had prepared earlier.
Figure 29.1 Progress screenshot.
However, I wasn’t sure how to make the background characters patrol or walk across certain areas. To solve this, I asked Lia for assistance in animating their patrol paths. Once she completed the patrol animations, I incorporated these moving background characters into various parts of the map to make the environment feel livelier.
Figure 29.2, 29.3, 29.4 Progress screenshot.
After completing all the parts I was responsible for, I shifted my focus to finishing the e-portfolio that I had previously left pending.
Final Playable Game
Unity Project File - Google Drive
GitHub - Link
Itch.io - Play Game
Week 15
The overall game design and gameplay are well-executed and enjoyable. It’s impressive that the team managed to complete all of this within just 14 weeks. However, if the game is intended for commercial release, it would require further refinement, particularly in enhancing the game art and overall design quality.
Comments
Post a Comment