Project Terminal – The Fatigue Meter

Last week I took on the responsibility of creating the HUD for the game. In this post I will showcase the fatigue meter and explain how I’ve been thinking when designing it.

Our character will be able to sprint when moving through the game world. While sprinting a fatigue meter will gradually be filling up. When it is filled you will start breathing heavily which makes you more likely to alert the guards in the near vicinity of you.

For starters, I will post my very first version of the fatigue meter to give you a clear view of the process.

I lacked of inspiration and did’t have a clear vision of what I wanted the bar to look like, so I threw this together very quickly. I showed it to my group and got tons of feedback on how to take it further. The first problem they pointed out was that it was too dark and therefor difficult to read. Second, it didn’t fit together with the light, rounded style of the rest of my HUD. After some more work and lots of helpful tips, it turned into the finished version of today.

This is what the fatigue meter looks like at the moment when it’s full:

If the meter is empty, it will look like this:

Now, to explain why it functions the way it does. Some games have stamina bars which are full and gradually decrease whenever you sprint, but we are going to have it work the other way around. This is because we do not use the characters stamina as a resource. More so, we want to use her fatigue as a status effect that you want to avoid getting.

I have made the aesthetic choices of having the bar fill up from the left to the right. This feels the most natural especially to us in the west, because we read from the left. Having it be the other way around would feel disorienting. I also made two icons on each side of the bar just to add extra clarity to what function it serves in the game. To be even more clear I used the color transition from green to yellow to red, to indicate that filling the meter is not good. The style of the bar itself is inspired from comic books, with the white framing, black borders and the dot pattern. The rest of the HUD follows this style as well so everything looks nice and cohesive when displayed together on screen. I have also put a paper texture over everything to give it more of the comic book feel. This isn’t very visible in these samples however, so I might have to make a few adjustments for the finished product.