Devlog 5: UI / Polish

Welcome to another Devlog 😊. Here we’ll be going over the upgrades to the UI (namely the player health), and the title screen, high scores page, and player death screen. Let’s get to it!

Player Health

Even if hearts weren’t a ubiquitous representation for player health within video games, it would still be a given that I’ve be using them here because of their relevance to the overall theme of the game and visual design of the enemies. I created a sprite sheet animation for the beating heart, as well as a single sprite for the broken hearts used to represent lost health. You can see the beating heart animation below. One criticism I have of the animation is that the shape of the heard is quite…chaotic. I’d prefer a smoother animation where the shape of the outline does not change between frames, apart from getting smaller or larger.

Game Screens

I designed the title text and colour slightly differently between the title, high scores, and death screens, with the intention to get feedback about which screen users liked the most. Can you guess which one people preferred?

Title screen

It’s about time my game had a title screen to let players begin playing, view the high scores, or exit.  I made the title highlight slightly duller than what you'll see on the high score screen. It's also slightly right-aligned, which I quickly decided is no good at all. Never fear, that will not make its way into the final build. I'm not sold on blue for highlighting - you'll see a later example with a red highlight which I much prefer.

High scores

Ignore the warning on the bottom of the screen! You can see that the text highlight on this page is more vibrant, and the option selection highlight is now red. I think this is much better, but the option highlight might be more consistent with the overall design if it is the same colour as the title text highlight.

As for the score implementation: score is based on how many skeletons and elderly enemies have been hugged. Skeletons are worth 1, with grandma being worth 20. When the player is finally killed or exits the game, they will be brought to this page if they earned a high score. Then, they can enter their name and be immortalized for ALL TIME.

Death

If the player dies without achieving a high score, they will end up on this page. The title text uses the same colour scheme as the high scores page, but with a smaller font size. The Option select uses a different hover colour as well, which I actually quite like. It's a toss up for me between this hover colour, and the neon red highlight from the game title text. The sad face is unlikely to exist in the final version, however the purpose of the emote will need to be filled by something else. I want the player to know that they have died (hence the screen), but I want them to feel like the game isn’t rubbing it in. Maybe some encouragement would work here?Or, it could be that the presence of the cute pixel skeletons in 'heart mode' is enough to keep things feeling light and positive.

In case it wasn't obvious enough already, the overwhelming consensus was that the text size and colour on the high scores page was the most appealing. Multiple players also suggested shifting the text higher on the screen, which makes sense given the amount of screen space not being utilised. 

Future plans

There is still so much to do! In terms of additional polish, it's imperative that I finish implementing visual feedback for player health loss, such as the player being knocked backwards. In terms of my UI, I want to include a visual indicator of where the granny is when she is off screen (perhaps a small icon), so that players have an easier time facing the correct direction while she isn't visible. I also need to refine the player and enemy movement animations so they don't look like they're gliding everywhere. Phew! Let's see how much I manage :). Thanks again for reading this update, and I'll see you soon.