UI Development - Developing the General HUD - Lifebars

For work on the health bar, or the general assortment of information on the main HUD, i was first looking into similar types of layouts as games like Transistor, where the information is centered and at the bottom of the screen. I thought this would work well as a way to contain a lot of the information in one space so that the rest of the screen could be focused on the game, and that the isometric intention of our game was similar to this.

SO, the idea here was, we have a character portrait, so the player knows their character and gets a nice mugshot while playing, this could also perhaps change expressions when low on health (sadly due to our lack of being able to transition elements of the UI this wasn't possible).

Then you've got the life bar, playing around with a lot of shape usage here and the result was a nice pastel and very simplistic style, but i think it captures the lighter hearted nature of our game better. I also wanted the UI to match our game in terms of colour scheme's so i stuck with very autumn colours for the bulk of it, and used other colours to give clear indication of health values (after all recognisability is also vital, the player must understand what they are looking at)

Finally since i wanted everything to be contained within this unit of GUI, i included icons for buttons to menu's the player might want to access, things like settings, quest log, character details and inventory were the plans early on.

Looking at other UI work for reference, the key with a lot of UI's seems to be in the fine tuning, the basic shape work is no more complicated than some of the things i'm producing, but the small details, shading and effects all provide a subtle level of quality to a good UI.

After some testing with what this would look like in game, due to the angle of our game, the center wasn't as viable as i would have liked for putting the UI there, since it would overlap with the character placement, additionally, although the stacked up UI may have been compact, it was slightly cumbersome in effect, so the decision became to go back to more traditional placements of the UI elements (using the corners).

Taking the best of what i had, i updated the life bar to be more clean and work more as an element that could be repositioned if need be, luckily we were able to have a life bar that shrunk inwards, however my custom colours were something that was not going to work, so i had to adjust the design to have clear arrows so that the colour of the in game health bar would be visible through my GUI elements.

Later on in development, as our combat fleshed itself out more, a stamina bar was worked into the design, so i re purposed the health bar for additional use as a stamina bar, the heart was replaced with lungs, so that the key icon is indicative of the purpose of the bar. similarly i opted to go for a more green colour scheme, the green is meant to tie the bar to the idea of energy, whilst also being synergistic with the autumn tones in the health bar.

This bar will be slightly smaller than health simply due to the fact that we want the players to focus more on their current health in priority.

Finally as a late addition, to give some definition to the enemies, i altered the life bar so that the enemies as well would have custom health indicators, the red tones are of course meant to symbolise the aggression towards the player, and the skull (while cliche) gives a clear idea that the owner is a threat, a simple adjustment overall but it conveys the need of an opposing health bar.

Overall the health bar was an enjoyable piece to refine, it was primarily testing my usage of shapes and the conveyance of what the bar was and the current state of it, i think i managed to both create something that stands out but also meshes well with the rest of the project.