Yung Siew Weng / 0339847
Game Development /
Bachelor of Design (Hons) in Creative Media
Final Task / Playable Game
Final Task
MODULE INFORMATION
Game Development - Final Task : Playable Game
INSTRUCTION
We are required to integrate with our art asset to game development and produce a fully functional and playable game.
EXPLORATION
Before start to develop into this final project, I had redefined some of the issue that occurred during my development in Task 3 and wish to settle and debug them on this assignment.
#To Do List
- Onboarding Scene [Start + Intro]
- Tutorial Scene
- Gameplay
- HUD Design
- Respawn
- Character Movement & Animation
- Level 2 @ Rolling Boulders
- Level 3 @ Failing Animation
- Level 4 @ Game Mechanism
- Frost Fight
- Sound Effect & BGMs
- Menu
- Pause Menu
- GameOver
- Victory Screen
01. Onboarding Scene [Start + Intro]
As I had the idea to animate each layer of the start screen, I saved the .PNG files separately to create animations in the Unity Panel. Before diving into animating the start screen, I focused on connecting the start screen to the Guide screen with a button.
I had forgotten how to activate a button in Unity, so I researched it again and discovered that going to UI > Button allows you to create a button easily. However, when I created the button, I encountered an issue where the canvas was larger than the original panel. After some additional research, I found the solution.
Fig 1.1 Canvas Issue
#Solution :
Under the Canvas’ Inspector, change the render mode to “Screen Space - Camera”, and then drag the main camera to the Render Camera option.
<-- imma breakline -->
Continuing with the development, I focused on enhancing user interaction by making the button functional and adding minor animations for a more engaging experience.
Fig 1.2 Start Screen with Animation
<-- imma breakline -->
To enhance the typing effect on the screen after developing the start screen and implementing the story screen before transitioning to the guide screen, I initially considered using images instead of direct text implementation in Unity. However, I found a more effective solution by utilising TextMeshPro's Font Asset Creator tool.
Fig 1.3 TextMeshPro Issue
#Solution :
1. Go to window > TextMeshPro > Font Assets Creator
2. Drag & drop desired font file into the "Source Font File"
3. Click on the "Generate Font Atlas" button to generate text properties
<-- imma breakline -->
I having intention to create a frame overlay transition when the player clicks the "Start" button instead of dissolving to the next scene. After some exploration and discussing with Mr. Razif, I found that the quickest solution was to create the next scene within the same scene as the start screen using a Canvas. So, I recreated the frame and Ui in the canvas of the start screen and apply a script to make the button to navigate to the overlay screen once been clicked :
Fig 1.4 Start > Frame Overlay Transition
#Script :
public Canvas canvasToShow;
public void PlayGame()
{
if (canvasToShow != null)
{
canvasToShow.gameObject.SetActive(true);
}
}
<-- imma breakline -->
Fig 1.5 Onboarding Screen Outcome
Throughout the development, the real challenge was to ensure smooth transitions between canvases or scenes. The best solution was to use Canvas > UI elements rather than directly using GameObjects. This approach significantly improved the experience by allowing seamless transitions. However, another challenge arose with the background music - to implement a delay before the music starts as I intended to add some animations before entering the next screen.
To solve this, I implemented the following script to handle the delayed playback of background music :
private void Start()
{
if (SceneManager.GetActiveScene().name == "01 Start")
{
StartCoroutine(PlayMusicWithDelay(1f)); // Delay of seconds for Scene 1
}
else
{
PlayMusic();
}
}
02. Tutorial Scene
Moving forward with the Guide Screen development, I saved the images from Figma where the assets were created under Task 2. During this process, I encountered an issue where the long background image placed in the panel appeared very blurry. This issue was also noted by one of my peers :
Fig 2.1 Image Blurry Issue
#Solution :
1. Change Filter Mode to "Point (no filter)"
2. Adjust the Max Size to ensure it matches or exceeds the image dimensions.
3. Change Compression to "High Quality"
4. Remember to click "Apply"
<-- imma breakline -->
After implementing the tutorial guide page and making structural adjustments, the outcome of the tutorial page is shown below (Fig 2.2). Notably, the screen includes a "skip" button to allow players to bypass the tutorial if they choose to enhances the flow and accessibility of the game for players who prefer to jump directly into the action.
Fig 2.2 Tutorial Guide Outcome
The tutorial effectively teaches players the basic controls needed to navigate the game, as shown in Figure 1.6 including :
- Movement Guidance (left and right)
- Press "space" to jump
- Jump over to collect nuts (resources)
- Press "x" to attack the boss
03. Level 01 @ Spring
During my development journey, I experienced a bug where the character couldn't jump after a "game over," significantly affecting the overall gameplay experience. Mr. Razif provided a tutorial on this specific issue which requested by other peers was instrumental in helping me debug it.
Fig 3.1 Jumping Bug
#Solution :
Initialise gravityModified to false in the original state & Write a script to check and modify gravity if it hasn't been modified yet :
if (!gravityModified)
{
originalGravity = Physics2D.gravity;
Physics2D.gravity *= gravityModifier;
gravityModified = true;
}
<-- imma breakline -->
Continuing my journey, I moved into the development of the HUD (Heads-Up Display). During this process, I encountered an issue where the UI Health bar couldn't be filled or scaled up as per the tutorial session. To resolve this, I reached out to Mr. Razif for assistance.
Aside from that, considering that the HUD frame would be very messy to display on the screen, I decided to simplify the design. I removed the frame and kept only the essential elements: the life system and the HP bar.
Fig 3.2 HUD Canvas Issue
#Solution :
Apply the HUD assets to the Canvas > UI instead of using a sprite.
<-- imma breakline -->
After resolving the UI issue, I proceeded to develop the scripts for the HP bar and the Life bar, following the tutorial provided by Mr. Razif. In the tutorial, Mr. Razif demonstrated the script with `myhp = 100f`, where the HP decreases from 100f to 0f. However, in my implementation, I modified it to start from 0f and increase to 100f for my mana bar.
Fig 3.3 Outcome of Mana Bar Interaction
<-- imma breakline -->
Continuing with the player life HUD development, following Mr. Razif's tutorial made the creation process easier. However, I encountered an issue where the player's life would not decrement after restarting the game following a game over.
Fig 3.4 Player Life HUD
#Solution :
Add
PlayerController.mylife = maxLives;
under void Start ()
<-- imma breakline -->
After solving all the issues, the outcome of level 1 was produced :
Fig 3.5 Outcome @ Level 1
04. Level 02 @ Summer
Next, moving to Level 2, the main challenge I faced during development was enabling the character to climb ladders and interact with rolling boulders.
Based on Task 3, I encountered difficulties with the rolling boulders. When set as "kinematic," the boulders remained stationary but didn't roll down. When set as "dynamic," they fell immediately without player interaction, when the game scene start. With Mr. Razif's help, I noticed that the use of conditional statements able to control the body type effectively.
Fig 4.1 Rolling Boulders issue
#Solution :
Used conditional statements to switch between "kinematic" and "dynamic" based on player interaction.
private void OnCollisionEnter2D(Collision2D collision)
{
if (collision.gameObject.name == "Character")
{
rb.bodyType = RigidbodyType2D.Dynamic;
}
}
<-- imma breakline -->
Aside from that, I had tried numerous of attempts but still struggling on how to make the character able to climb the ladder. There were times that I tend to give up the game experience on climbing but, thanks Mr. Razif on helping me to solve my climbing issue.
Fig 4.2 Ladder Climbing
#Solution :
Fig 4.3 Script
<-- imma breakline -->
After resolving these main difficulties, the gameplay for Level 2 was ready for showcasing :
Fig 4.4 Outcome @ Level 2
05. Level 03 @ Autumn
Throughout the development journey, I noticed that the falling experience wasn't very smooth, particularly in Level 3. The stackable boxes should fall directly off the screen when dropped, but they were behaving illogically. After discussing the issue with Mr. Razif, I figured that the problem was due to the position of the collider.
Fig 5.1 Player Falling Collider
#Solution :
Lower the box collider so that the object/player will fall out of the screen
<-- imma breakline -->
Apart from the challenges in Level 2, I encountered an issue in Level 4 with the falling leaves animation. After several attempts, I realized that the concept of falling leaves acting as spikes felt out of place. Consulting with my peers confirmed this, as they found it strange but suggested keeping it, as my efforts on this. However, after some consideration, I decided to remove this feature to avoid a lackluster experience. Despite my attachment to the idea, I concluded it was best to omit it.
Fig 5.2 Leaf Particular Attempt
// THIS IS A DESIGN PROCESS. 😭
<-- imma breakline -->
Then, there were no much stuff for me to amend in the level 3, as I really pleased with how the stackable box feature turned out, and the outcome for level 3 was showed below under Fig 5.3 :
Fig 5.3 Outcome @ Level 3
06. Level 04 @ Winter + Boss
Continuing to the final level @ Level 4, I spent considerable time refining this stage due to its initially disjointed concept and lack of connection to the final boss. Originally, the idea was for players to collect keys to activate a door and trigger the boss encounter. However, this approach felt redundant and required an additional scene to show the boss fight.
To streamline the experience, I decided to merge both ideas. When players enter Level 4, they are immediately confronted with the boss, Frost, creating a direct and engaging final battle. And, considering that players might have minimal lives left upon reaching this stage, I added collectible life items instead of nuts, ensuring they have a chance to restore health and continue the fight to provide a balanced challenge and a more coherent gameplay experience.
Fig 6.1 Game Platform Modifications #Attempt
<-- imma breakline -->
Then, I implemented the game design into Unity and making it functional. The main challenge I faced was enabling the player to attack. Since I had designed Nuttie, the character, is a squirrel who collects nuts, so his weapon should be nuts that he can throw nuts to attack the boss, Frost. But, I facing difficulties on scripting it to make my code functional. With the help of my peers, I resolved the issue of using the keypad to activate the firepoint :
Fig 6.2 Player Attack
#Solution :
Created a "Firepoint" under the character, from which the nut is fired. Fig 6.3 is the code snippet used to ensures that when the attack button is pressed, Nuttie throws a nut from the specified firepoint, effectively allowing him to attack Frost.
Fig 6.3 Script
<-- imma breakline -->
Next, I needed to solve the challenge of incorporating environmental hazards to make the gameplay engaging without being overly complex. After trying various ideas for environmental hazards, I realised that the primary challenge should be the boss, Frost, rather than adding multiple complicated elements. I wanted to create a game that was approachable for non-gamers, like myself. I decided to focus on Frost as the main challenge while incorporating moving platforms to add difficulty to collecting restore lives (collectible items) to keep the game engaging yet simple.
So, I moved the focus to Frost and I having an intention to make the boss to aim the position of Nuttie to trigger the attack function, and when the player arrive specific position and will only trigger the attack function, I did some research and solved the issue :
Fig 6.4 Frost Attack
#Concept :
if the playerYposotion is lower than -2.0, the Frost will shoot once 3f.
<-- imma breakline -->
And, yeap! The Level 04 had been finalised and the outcome was showed below (Fig 6.5) :
Fig 6.5 Outcome @ Level 4
07. Other Scenes (Chike Guide, Pause, GameOver, Victory)
To enhance the gameplay experience, I created additional screens such as a Pause Screen, Game Over Screen, and Victory Screen to make the game more user-friendly.
Since I having intention to use Chike as the guide throughout the game, I included a "Chike Guide" for all four levels. This inclusion aimed to integrate Chike's presence into the game, aligning with the story base of Nuttie and Chike's journey, which originated from my previous concept of Nuttopia - <Nuttie's Eternal Season>.
Fig 7.1 Chike Guide @ Level 1
Fig 7.2 Chike Guide @ Level 2
Fig 7.3 Chike Guide @ Level 3
Fig 7.4 Chike Guide @ Level 4
<-- imma breakline -->
#Game Over Screen
The Game Over screen appears when the player loses all lives, offering options to restart the level or return to the main menu :
The graphics were inspired by the concept of "Nuttie's Eternal Season", where Nuttie feels bored and has a "mess" in his head, conveying a sense of tiredness or the urge to give up. This ties into the "Game Over" screen, reflecting the connection between the state of mind and the game's outcome.
<-- imma breakline -->
Lastly, the Victory screen is shown when the player successfully completes a level. It provides options to replay the level or return to the main menu, enhancing the overall user experience.
Fig 7.7 Victory (Win) Screen
The graphic here showcases the idea of "Proud of you," inspired by a frame in the previously created comic. It conveys a sweet message of family love and pride. In the context of the game, Nuttie, as the hero who saves Nuttopia, is praised by PAPA, a resident of Nuttopia, reinforcing the theme of victory and familial support.
<-- imma breakline -->
#Pause Menu
Aside from that, the pause menu screen was created to give players time to strategise and take breaks :
Fig 7.5 Pause Menu Screen
This screen allows the player to resume the game, restart the level, or quit to the main menu. Additionally, the graphics were designed to showcase Chike picking up nuts, with the nuts rolling to illustrate the concept of loading and waiting, similar to the idea of three dots indicating a process in progress.
08. Sound
The most important aspect to bring a game to life is implementing sound effects (SFX) and background music (BGM). Selecting suitable BGM was challenging, so I chose a soundtrack that is soft yet adventurous, avoiding horror or intense beats.
For sound effects, I added SFX for the game over and victory screens to enhance engagement. I also included SFX for character movements like jumping, attacking (throwing nuts), and collecting items (nuts and life).
I implemented these using an "AudioManager" script, ensuring the audio enhances the gameplay experience :
Fig 8.1 Script
//Outcome showed under #Final Outcome Submission
#Final Outcome Submission
After completing the development of Nuttopia, I deployed the WebGL build to Netlify to make the game playable online. This process ensures that the game is accessible through a web browser, allowing players to experience Nuttopia directly from a shared link :
Fig 9.1 Final Nuttopia Game Deploy, Proof
Netlify Link : https://nuttopia.netlify.app/
Fig 9.2 Final Game Design Document
Fig 9.3 Final Video Presentation
Fig 9.4 Final Game Walkthrough
REFLECTION
Throughout this task, I’m pleased that I maintained a clear direction from start to finish. My goal was to create an accessible game for people like me who aren’t avid gamers. I constantly reminded myself that if I couldn’t pass my own game, what would be the point of making it? This clear direction simplified my development process and kept me aligned with my concept and style.
I deeply felt the truth in the saying, "fantasy is wonderful, but reality is harsh." For instance, my initial idea of using falling leaves as spikes in the autumn scene seemed creative, but after some usability testing, it became clear that it led to a frustrating gameplay experience. Players didn’t enjoy suddenly dying due to leaves. Despite spending three days researching and developing this concept, it didn’t fit the game’s overall design. Replacing leaves with falling weapons wouldn’t match the character’s setting either. This experience reinforced that the design process is about learning and accepting that sometimes, the best choice is to remove an idea that doesn’t work.
Coding this seemingly simple platform game required numerous iterations to ensure functionality. The most frustrating moments often involved elusive bugs in Unity. Sometimes, restarting Unity miraculously resolved these issues, reminding me that persistence in debugging is essential. The entire journey was about troubleshooting, refining the game to be engaging, and bringing my imagination to life.
While this module was one I avoided for a long time, I’m proud to have completed it. Although the game might be simple or buggy to experienced gamers, for someone like me who doesn’t usually play games, it’s an accomplishment. This is my first game, and I’m delighted to have added to my Nuttie series. I’m proud of what I’ve achieved. ✌️
Comments
Post a Comment