How To Get a HUD in Game Design

by Jogolumo on September 6, 2012

If you’ve ever made a game, you’ll be familiar with the thirty thousand iterations of the HUD through which you inevitably travel. This happened with Kumo Lumo and the HUD changes reflect many of the varations that the actual game went through.

This first set of images show our very first designs. The black and white version was created before we actually had the game even remotely playable. The colour image to it’s right shows the first HUD we implemented in a playable version of the game. Both of these images show the presence of several special weather powers, an idea that we moved on from because the amount of work to get two or even three special powers really honed seemed like trouble. Plus we were already discovering usability issues with having several important buttons on the HUD. We may return to some of these ideas in future, but in a new form that solves the problems we discovered earlier on.

At the bottom of this first image we can see our first ‘finished’ HUD. At that point everything was displayed as numbers and  uncapped numeric counters felt like the right direction in which to go.

This version of the game was based on a single, procedurally generated level, replayed indefinitely. At this point we realised we were on to something good!

Reworking the HUD and the mechanics that lay behind them was a task and a half. We decided to go for capped resource limits represented by meters instead of numeric values (see the next image set, below). This gave a better relative description of how well you were doing – a full gauge means a lot more that the number 125. Capping the limits also meant that the game retained a better dynamic of tension and safety. With an uncapped water limit you could just fill up to several hundred drops of water, which meant you didn’t really need to protect Lumo from damage or use your judgement about what to rain on. The capped limit is meant to the game was less exploitable and hold the player in a more interesting gameplay scenario.

Another factor from this era was the desire to put a live count of the remaining challenge objectives on the HUD. You can see some early iterations of that feature in the examples above. This proved to be an important addition. The constant feedback of what you had to do and how close you were to success made the game a far more robust and understandable experience.

Digging deeper – oh look, we found a problem!

The live challenge counter also unearthed a further problem. If you had to save six whales to complete the level, then most of the other mechanics felt irrelevant. We tried to solve this by making it so the more things you rained on, the better star rating you got at the end of the level. This was fine if you were the designer and actually KNEW all this, but players had no clue so we can’t really blame them for not caring as much.

To solve this we created the World Happiness Gauge. The premise is simple, the more stuff you rain on, the more forests you grow, whales you save, bad-guys you fry and Grumbleebees you gobble up the happier the world gets. Make the world super-happy and you get 3 stars at the conclusion of the challenge. This meant that everything you did in the game now made sense. You might still need to save those six whales, but every city you grew, mountain you raised and volcano you blew to smithereens helped save the world and earn those stars!

The World happiness gauge went through a LOT of development as we tried to balance the game feedback with a sense of narrative balance. We focussed on the world face because seeing the little guy smile as you made him happy has the right emotional and narrative context for the game. We want you to save the world. If you won’t do it for us, do it for him!

Ready to Launch

And this is where we ended up. The world happiness gauge is bright and colourful. The lightning and rain gauges became circular, saving lots of space and looking like buttons and which both function as buttons too – you can rain by tapping the rain gauge OR by tapping Lumo himself. The gauges increase in length as you upgrade them and the button icons also indicate how well you have upgraded your powers. Importantly you can also see instantly how much gold you have found since it is the only numeric counter on the screen (Score having been plugged into the World Happiness gauge as the only meaningful metric of success across a given level).

Is it the final ever version? Of course not. Kumo Lumo will certainly be updated as  features and mechanics are improved, based on the player feedback we get as we go on. With the Beta test in full swing the first changes are already starting to come into focus!

{ 1 comment… read it below or add one }

Sara October 17, 2012 at 1:16 am

so, maybe I’m slow, or maybe was just far too excited to get into the game already that I missed something, but I had NO clue what those “puzzle pieces” by the face meant and/or how to get. 3 star rating until reading this blog post. (holy long sentence, batman!) aaaaaanyway, I’m SO loving this game! thanks for your hard work to make it come to be!


Leave a Comment

Previous post:

Next post: