Planning [5th March]
Before starting the design, I wanted to get some inspiration, so I made a mood board. I knew that I wanted the health to be hearts/individuals as it would fit the dungeon crawler theme more instead of a bar.
Initial Heart Design
I created a new Aseprite file with the size being 18×18. This size is small, but it allows for cohesive pixel art. I then created the outline of the heart with the colour #66193b.
I then filled in the heart with a high saturation colour #ec407a, then I added in midtone with the colour #ad1457 , and shadows with #880e4f.
I then proceeded to add in the highlights of the heart with the concentration of brightness being in the middle of the heart #FF9cbd, this gives dimension to the sprite. I then broke up the highlight with a colour similar to the midtones I used previously #F06292, which gave it the gem-look I desired.
I created a new layer called ‘Sparkles’; this is where the bright highlights (#FFF3d5) of the heart will be. This will also help set me up for when I want to begin animating.
Colour Experimentation [8th March]
I knew that I wanted to explore other colours for this design as I felt like the Pink palette wouldn’t fit in with this game’s dungeon setting. So, I created four mock-ups of the game screen to test out three other palettes, as colours have context. I applied these different palettes using gradient maps so the values of the colours wouldn’t change.
Group Feedback
- ‘I like pink best, but for the games theme, the grey/blue makes the most sense’ – Xane
- ‘I like the red and pink, but the red is less unique’ – Myself
- ‘I think the red or pink looks best’ – EJay
Personally, I like the pink or red, but I did debate on the grey/blue. As our verticle slice will be the depression branch, the grey/blue would fit the theming better. Xane agreed with me on this. But I thought deeper; if we were making the full game, the grey hearts wouldn’t match other branches like anger or bargaining. So I asked again about it. We concluded that we could use the grey/blue to represent empty hearts and the red or pink as full hearts.
These are the concepts of a half-full health bar, We decided the max health for the player would be 5 hearts as well. After viewing this, the majority preferred the red health bar concept (right) compared to the pink (left) as it fit the environment and player the best.
Full HUD Mockups [12th – 21st March]
As shown before I only added the hearts UI to the HUD, but I knew we had plans to add other aspects to the game’s interface so I wanted to plan the layout to fit all of these in and centre their designs around complementing each other. Therefore I wanted to make a few mockups of the HUD’s layout.
Key Information from GDD
Referencing back to Anna’s GDD, I needed to keep in mind the few attributes of the UI/HUD that she wanted for Lament.
Key Factors I must Include:
- Minimalistic Design including flourishes like runic patterns or glowing borders
- Font similar to the title style
- Icons for resources
- Red for hearts
- green for Terra shards
- white for Terra souls
- The hearts, resource counter and equipped weapon should be shown in the top left.
- Minimap if included must be in the top right
Response
For our verticle slice, we will only be having the sword as the weapon option, therefore the equipped weapon icon isn’t a high priority to include.
A resource counter is very common in dungeon crawlers.
I must keep in mind the designs of Terrashards and Terrasouls from the GDD when creating the icons for the HUD to represent the count the player has.
First Mock-up
The first mock-up included key factors such as the heart display, minimap, resource counter and the cooldown for the dash. However, it doesn’t match the design guidelines set out by the GDD like the colours of the hearts. Also looking back, we were only supposed to have three hearts but based on the gameplay we have, five would make the game more enjoyable than three. I also feel as though the minimap doesn’t make sense to be there, as the HUD seems to all be squished in the top left.
Second Mock-up
I darkened the hearts display to try and get a deeper red colour, but it made the empty hearts begin to blend in with the background so I will need to tweak that again. I changed the cool down colour but I feel like it’s too similar to the background as well. The resources are now the right colours according to the GDD and look much better, however, I am trying to work out where the number counter should be. I also changed the container to a gold colour rather than purple and replaced the minimap with a representation of the realm the player is currently in. This will help the player remember where they are currently in the game.
Colour Redesign [16th March]
When placing it in the context of the game, the colours didn’t fit the existing palette. I then sat on this design for a while to think of a solution. Colours can appear different depending on the surrounding colours, this is called colour context. I knew I needed to tweak the colours so I utilised gradient maps to experiment. I made the palettes of both heart types closer together as the different hues were making the UI an eyesore. These were the two colour redesigns I made and their palettes.
Full Heart
Empty Heart
After I did this I created another mock-up of them in the scene but with the additional aspects of the HUD as well for contextual experimentation.