Week 12 - Week 14
Wong Khye Qing / 0361000
Games Development/ Bachelor of Design (Hons) in Creative Media
Final Project
Games Development/ Bachelor of Design (Hons) in Creative Media
Final Project
Instructions
Final Recap on Task 3
What have been done for this Task 3:
- Imported Sprites into the scene
- Integration of Player movements (Idle, Walk, Jump, Die)
- Integration of Health System
- Usage of Parallax Effect for backgrounds
- Introduction of Traps like Spike that Damage health
- Integration Health UI
- Cheat code for Health (H & E Key)
- Refined Character Movements
- Combat Mechanics
- Collectables Completion
- FX, Music and Sounds Integration
What is the things that needed to be wrapped up for Final Task:
- Completion of each levels Design and Mechanics
- Enemy Introduction with complete mechanics
- Completed Game UI (Menu, Pause)
- Refined Character Movements
- Cinemachine and Polygon Collider 2D (Camera Boundary)
- Combat Mechanics
- Collectables Completion
Final Project
With constant updates and modification of the game elements and resource throughout the production of this game, these are the finalized game elements that will be covered in this documentation:
- Characters Update
- Enemy Update
- Scene Hierarchy
- Scripts
- Game Controls
- Scenes & Levels
- Collectables
- Music & Sound
Characters Update
Fig 1.0 Sprite Animations that Made It to the Final Game
With constant updates and modification of the game elements and resource throughout the production of this
Fig 1.1 Hurt Animation Changes, Previous vs Current
With constant updates and modification of the game elements and resource throughout the production of this
Fig 1.2 Duck Animation Removal
With constant updates and modification of the game elements and resource throughout the production of this
Enemy Updates
Fig 2.1 Enemy Idle Animation
Enemy will be on idling during cooldown during attack. The animation shows that as if the enemy is breathing, as it was vengeful towards the player with rage. Through minor animation details we can see that the enemy has angry expression in between.
Fig 2.2 Enemy Hurt & Attack Animation
Enemy that got hurt will be overlaid with red in order to act as an obvious visual feedback to the players. Then the enemy will also open its mouth to attack by shooting out projectiles to the players.
Fig 2.3 Enemy Death Animation
Enemy that received enough damages will die and triggers the death animation. The enemy will rust to death and disappear for the scene. Minor details of doors becoming dysfunctional can also be seen.
Scene Hierarchy
Fig 3.1 Menu Scene Hierarchy
- Consisted UI Canvas that will be the structure for the interface with buttons in it to launch the tutorial level and start the game.
- A transition overlay has also been placed to initiate page transition animation by using Masking.
Fig 3.2 Tutorial Scene Hierarchy
Fig 3.3 Level 1 Scene Hierarchy
Fig 3.4 Level 2 Scene Hierarchy
- Instruction 3D text imported to show game instructions and tips without the interference of 2D UI Canvas.
- Camera integrated with Cinemachine to allow it to follow Player smoothly, camera moving parameter was bound with a Polygon collider (Camera Bound) to not display the outer game bound
- UI Canvas displayed the player Hearts or Life and forms interface
- Game Over Overlay that will be overlaying the canvas if player losses all the hearts, allowing players to retry or go back to menu
- Grid that houses the Platform, Midground and Background, allowing easy customization of grid tiles and allow players to walk on the platform
- Player consisted of Player Controller and Health System scripts to enable the player to function properly and also to shoot projectiles
- Blob as a collectible to enable attacking power for players
- Enemy will be shooting projectiles and damage player’s health
- Paper as a necessary collectable that activates the portal to next level upon collection
- Metronome that allow users to heal health to max health
Fig 3.5 Final Level Scene Hierarchy
- Game End Overlay will be overlaying showing that the game has ended and players can stay back for the music or just go back to the Menu
- Multiple Enemies to fight. Multiple Blob and Metronome to collect.
Scripts
Core
- MusicControl [Control music volume and delay for overlays such as Game Over Overlay]
- ParallaxCamera [Defining the position for camera]
- MaskTransition [Control animation for page transition]
- PlayerController [Control movements such as walking, jumping, making sure player jump once]
- Projectiles [Control the shooting speed and amount of inflicted damage to player]
- EnemyHealth [Managing the enemy health and damage received to play different sprite states]
- EnemyAttack [Controls the attack speed, damage and cooldown for the enemy attack]
- HealthSystem [Manage the player health amount, ensures animations get play well when inflicted with damage]
- HealthTest [Cheat code for player heal and receive damage]
- ParallaxBackground [Component that controls the parent of platforms and background]
- ParallaxLayer [Declaring the each layers for parallax effect]
- Spikes [Manage the damage inflicted to players and plays game over overlay]
- EnemyProjectile [Manage the projectiles that shoot at the player, the damage and speed]
- MenuController [Manage the launch of the Main Menu and directory to Tutorial Scene]
- Health [Manage the UI for player health indicating the hearts left]
- CutoutMaskUI [Mange the inverted mask effect for the page transition canvas]
- ButtonTextColorChanger [Change the state of text color when being pressed]
- Blob [Ensure that item is collected by player when collided, grant attack ability]
- Metronome [Manage and grant player max health upon collected]
- Collectable [Manage the Paper collectable to activate the portal]
- Portal [Ensuring portal will transport player to next level]
- PortalAlt [Ensuring portal when deploy the Game End Canvas]
VolumeText [In charge of volume for UI menu]nemy will be on idling during cooldown during attack. The animation shows that as if the enemy is breathing, as it was vengeful towards the player with rage. Through minor animation details we can see that the enemy has angry expression in betwee
- Move Left [“A” Key]
- Move Right [“D” key]
- Jump [“Spacebar” Key]
- Attack [Left Click on Mouse]
- Heal and [“H” Key]
- Inflict Damage ["E" key]
Scene & Levels
Fig 4.0 Menu Scene, UI Canvas
- Start Button
Fig 4.1 Tutorial Scene, Game Scene
- Game instructions and tips
- Blob for collection
The point of this level is to ensure that players get used to the game mechanics and the ensuring that they understand how attack and collectables work. There will be instructions and tips given in text, to guide the players through the levels.
Fig 4.2 Health Canvas, UI Canvas
The players health will be reflected in this canvas that will be the main screen of the different levels. any health damage or healed will be reflected right here in order to be a visual feedback for the players to be mindful of their gameplay and also collectables available.
The rounded corners for the canvas were intentional and made to be different and provide a different experience of rather being just a right-angled corners. It almost gave out a retro gaming vibe in old televisions.
Fig 4.3 Game Over Canvas, UI Canvas
- Retry Button
- Main Menu Button
Once the player is has 0 lives, it will be game over. Then they will be redirected to this screen where
Fig 4.4 Game End Canvas, UI Canvas
- Main Menu Button
The Overlay will be overlaying to congratulate players in completing the game and prompting them to go back to the Main Menu
Fig 4.5 Level 1 Scene, Game Scene
- Blob (Collectable)
- Dangerous Lockers
- Spikes
- Paper Note
- Portal
This level consisted of enemies that the players will need to attack by collecting the blob to have attacking abilities. Avoid the spikes to avoid retrying the level. Players will need to collect the paper note in order to activate the portal to go to next level.
This level was meant to be a warm up from the tutorial level, players might still not get used to the mechanics of the game, so there will easier platforms to traverse and jump. The level will still be straightforward and easy to understand.
Fig 4.6 Level 2 Scene, Game Scene
- Metronome
- Blob (Collectable)
- Dangerous Lockers
- Spikes
- Paper Note
- Portal
This level consisted of more tricky platforms that require more precise jumps due to the distance of platform for the jump. Even more enemies will be placed to be obstacles for the players to attack. Fortunately, there will be chance for the player, being that they were able to collect the Metronome to get their full health back
The color of this stage has also became colourful than the previous two levels to indicate the progress of this level. Besides, activation of the portal still requires the paper note.
Fig 4.6 Final Level Scene, Game Scene
- Metronome
- Blob (Collectable)
- Dangerous Lockers
- Paper Note
- Portal
With the warmup from the 3 previous levels, it is the final level, where Mark will confront his fears and finish the level. This level consisted of more tricky level design that required players to platform while attack the enemy and avoid projectiles. This level is also straightforward, being that it is to just get to the portal and end the game.
Chances were also given by multiple Metronome in order to get full health along the way. The color of this stage was intentionally made to be gray to be more dull than the previous 3 levels to create tension and stress for Mark that is on the journey to conquering his fear. With the intense environment Mark will persevere and conquer his fear!
Music and Sound Effects
- Slow beat: Main Menu
- Slow pacing music: Tutorial,
- Medium pacing music: Level 1 & Level 2
- Fast pace: Final Level
- Sad music: Game Over Overlay
- Fast pace cheerful music: Game End Overlay
- Main Character
- Jumping
- Hurt (Damage)
- Heal
- Firing projectiles
- Enemies
- Projectile shooting
- Items
- Item Collection (Blob, Metronome and Paper note)
- Environment
- Projectiles hitting the wall
- Projectiles hitting the player
- Portal activation
Learning Materials
These are a few learning materials that I can find from Youtube to also aid in my scripting journey of the game. They have given some hints and ideas towards some of my game direction. Some of their approach might be able to be understood well and grasp.
The Scoreboard
This is a list that of what I have accomplished and the problems that I have solved along the way of this task:
- Configured and implemented player movements (walking, no double jumping)
- Implemented Health system that enable heal and death
- Added in cheat codes for getting healed and damaged
- Enemy has been added to shoot projectiles with cooldown and inflicts damage
- Completed 4 Levels includes, Tutorial, Level 1, Level 2 and Final Task
- 3 Overlays, Game Over, Game End, Health UI Overlay
- Smooth transition between each page transition by having inverted mask circle
- Multiple sound effects added as Audio feedback
- Created the sprites for Character and Enemy with animations
- Integrated different pacing music for different levels to match the difficulty and hierarchy
- Color Changing scenes has been modified by changing saturation of each levels
- Item Collection animation added for visual feedback of item collection
- Usage of portals to go to the next level by collection of a collectable
Final Submission
Presentation Video
Fig 5.0 Final Presentation Video, YouTube
Fig 5.1 Game Walkthrough without Commentary, YouTube
Fig 5.2 Game Uploaded, Netlify
Fig 5.3 Final Game Document, PDF
Fig 5.4 Game WebGL File, WebGL
Fig 5.5 Game Uploaded, Netlify
Reflection
It's a long journey for this assignment, from creating the sprite and scripting the game. It has been a fruitful journey where I could have the freedom to decide on the game theme that I wanted and create it. I have learnt a lot for the C# script that I was so afraid to touch, being that it was difficult, scripting C# has been a daunting task for me, but I took it as a learning opportunity in order to give myself a chance to explore more rather than just stuck doing the same type of coding. From the previous sentence, you can slightly see that it has some slight resemblance to the game. I just would like myself to be like Mark, being able to conquer his fear by having multiple fail attempts through his journey but still able to get up no matter what and beat his fear. There have been some ups and downs for this course, but I would like thank Mr Razif for giving me a lot of chances to different opportunities for the production of this game and also thank him for the guidance and encouragements along the way.
Finally, I would like to highlight that it is very important to have multiple backup during scripting and coding. Thanks for the headsup Mr Razif!