STUDENT PROJECT
THE BLACK PARADE - HUD DESIGN
INTRODUCTION
Black Parade is a 2D side-scroller game that combines puzzle and story elements. The main mechanics revolve around staying in the light as much as possible to solve puzzles. Set in the Victorian era, the game immerses players in a historical setting, enhancing the gameplay experience with its atmospheric and period-appropriate visuals.
-
Platform : PC
-
Engine : Unity 2021.3.23f1
-
Game Genre : 2D Side Scrolling Platform
-
Game Theme : Gothic Victorian
-
Game Mood : Creepy Cartoonish
-
Art Style : Cute
PROJECT INFORMATION
For this project, we need to design a HUD for an imaginary game. The HUD will include the following elements : ​​
​
-
​Sanity Bar (Acts as a health bar for the player)
-
Inventory
-
Interactable Objects
-
Dialogues from NPCs
-
Light HUD (Acts as a warning if player is in light range)
This project is a solo project and the total duration to complete the entire project is three weeks.
MARKET RESEARCH
Upon taking Damage
•Blood frames the scene to show damage taken
•HUD to portray where the damage is coming from
GAME : ARK SURVIVAL EVOLVED
To kickstart this project, I did some market research for games with similar HUD to Black Parade to get a better understanding of how the HUD will look.
GAME : PERSONA 5
Interactable
•HUD shows interactable item when player is in range
Objective
-
Player objective is always shown to the player
GAME : POKEMON SCARLET AND VIOLET
NPC Dialogue
​​
•Non Interactable NPC dialogue are shown when player is in range of the NPC
•Interactable NPC dialogue have an > when in range
HUD Designs
After I was done with the market research, I came up with some HUD designs based on the moodboard that I have created. While designing the HUD elements, I also think of how the animation for each elements will look like when it's interacted / triggered.
FINAL DESIGN
SANITY BAR AND LIGHT HUD
There are multiple HUD feedbacks for the player when they are in darkness:
-
A red frame appears around the screen.
-
The sanity indicator shows a brain shaking and decreasing.
-
The character portrait changes.
-
The candle light transitions from max to medium to extinguished.
These feedback elements ensure that the player is aware they are in danger.
INTERACTABLE HUD
When the player is near an interactable object, a prompt UI pops up.
Upon pressing the prompt button, the interactable item will expand and move to the inventory.
This transition design ensures that the player is aware of what is being added to their inventory.
DIALOGUE HUD
The dialogue HUD is kept simple to avoid overcrowding the game scene. When the player is near an NPC with dialogue, a popup appears.
For longer dialogues, a prompt to continue the conversation will be provided.
Additionally, a subtle animation is added to the dialogue popup to make it more dynamic.
FINAL PRODUCT
Project Restropective
Here are the key takeaways that I have learnt from this project :
-
Adding subtle animations to each HUD significantly enhances the overall game feel. These small animations make the HUD and UI more engaging for the player.
-
Using contrasting colors for the HUD will help it stand out from the background, ensuring that essential information is easily visible.
-
It's better to start with ample feedback mechanisms for the player and gradually reduce them rather than the other way around. This approach ensures that the player is always aware of what is happening throughout the game.
-
Gathering playtest feedback is crucial to ensure that all necessary information is conveyed clearly and that players understand what is happening in the game at all times.