Feedback How should I improve this health bar?

[MrProg]

Hello! It's nice to be back on the forums, most importantly because I am in need of some quick feedback on my health bar. In the gif below you can see how it is now, I'm wondering what I could add to spice it up a bit or maybe you think it's fine. I'm also lost on how to display loss of health, such as a regular bar declines with less health but how should I approach that with this design? Thanks in advance for any help!

EDIT: Alright, the gif lagged so much I'm just going to link to the .gifv instead.

EDIT 2: So I've added a few more elements as well as made the HUD a bit less floaty. The main center bar is the HP, the left and right blocks are abilities, with cooldown bars underneath each, and the little bar under them all is the experience progress.

 

[Snail Man]

It looks pretty good right now (I do like the smooth view following a lot), but you could instead consider having the edges of the screen tint more and more red as you get more damaged. There's really nothing wrong with it now, it's just that if there really is only one HUD element, I always try to find a way to hide it so there's no HUD at all.

 

[MrProg]

It looks pretty good right now (I do like the smooth view following a lot), but you could instead consider having the edges of the screen tint more and more red as you get more damaged. There's really nothing wrong with it now, it's just that if there really is only one HUD element, I always try to find a way to hide it so there's no HUD at all.

Oh there will be many more elements, I just started that's the reason why there is only one right now But the red tinting could still work just as a little subtle effect along with the health bar. Thanks!

 

[Snail Man]

No problem! Yeah, if there's going to be an HUD anyway than that is fine, I just like to keep things clean if possible

 

[BLang]

You should consider what other HUD elements are going to look like, and how they'll all look on the screen together.

Are they all going to be floaty like the health bar? Having a bunch of HUD elements flying around the screen could get pretty distracting...
If you're going to make them static instead, how is that gonna mesh with the floaty health bar? Is it gonna look weird when everything is static except for the healthbar?

Just a couple things to consider before you move on with adding more elements to the HUD.

That said, I do love the way the health bar looks right now, and I vote you keep it simple and minimal!

 

[RangerX]

Something I like to do (and I do it in my current game in the making) is a dynamic HUD with its element appearing on screen only when needed.
Per example, here are some rules of my HUD in The Life Ruby:

- When I am idle for 4 seconds, all the HUD elements appear.
- If I lose health, the gauge appear on screen for 5 seconds.
- If I am low heath (25% or less) the health gauge always stays on screen.
- When the player is beside something that need a key, the HUD element related to keys appear on screen.
- The air gauge appears only when underwater.
- When I collect Pearls, the pearls element in the HUD appear for 5 seconds.

and so on. Basically most of the time you play the game "HUD free" but its there when you actually need it.

 

[MrProg]

You should consider what other HUD elements are going to look like, and how they'll all look on the screen together.

Are they all going to be floaty like the health bar? Having a bunch of HUD elements flying around the screen could get pretty distracting...
If you're going to make them static instead, how is that gonna mesh with the floaty health bar? Is it gonna look weird when everything is static except for the healthbar?

Just a couple things to consider before you move on with adding more elements to the HUD.

That said, I do love the way the health bar looks right now, and I vote you keep it simple and minimal!

Yeah I did consider it possibly being distracting and I've decided to just have them all float for now, but if it gets too bad then I'll just alter the floating to a very subtle amount. I have started adding a couple more elements and they seem to fit so far but we'll see as more get added

Something I like to do (and I do it in my current game in the making) is a dynamic HUD with its element appearing on screen only when needed.
Per example, here are some rules of my HUD in The Life Ruby:

- When I am idle for 4 seconds, all the HUD elements appear.
- If I lose health, the gauge appear on screen for 5 seconds.
- If I am low heath (25% or less) the health gauge always stays on screen.
- When the player is beside something that need a key, the HUD element related to keys appear on screen.
- The air gauge appears only when underwater.
- When I collect Pearls, the pearls element in the HUD appear for 5 seconds.

and so on. Basically most of the time you play the game "HUD free" but its there when you actually need it.

I really like that idea of a dynamic HUD and while not every element can be hidden in my setup, I can still use the idea with the currency and key counters. Possibly ammo counter as well. Thank you!

 

[Khao]

To be honest, I don't think a "floaty" HUD really works unless the HUD is actually composed of physical objects that are part of the game world, or at least try to emulate being so. I'm talking about stuff like the inside of the character's helmet in a FPS containing healthbar, or different gauges in the cockpit of a ship. To me, the whole point of making a HUD lag behind the camera is making it feel more like an object, and I'm not sure if that's what you're trying to go for in here.

When you have something abstract that only exists as part of the screen and is disconnected from everything else, it's probably best to make it move with the screen. Otherwise it feels kind of noisy and distracting.

It's your call, though. Maybe you'd rather find a way to make it feel a bit more natural.

 

[SnoutUp]

I too find floating HUD to be quite distracting. As far as displaying damage, it's always nice to have the part of the health bar which represents amount of damage become red and slide in or just fade. Some hud shake or scale bounce (quick increase of size & slower decrease) would bee nice.

 

[MrProg]

To be honest, I don't think a "floaty" HUD really works unless the HUD is actually composed of physical objects that are part of the game world, or at least try to emulate being so. I'm talking about stuff like the inside of the character's helmet in a FPS containing healthbar, or different gauges in the cockpit of a ship. To me, the whole point of making a HUD lag behind the camera is making it feel more like an object, and I'm not sure if that's what you're trying to go for in here.

When you have something abstract that only exists as part of the screen and is disconnected from everything else, it's probably best to make it move with the screen. Otherwise it feels kind of noisy and distracting.

It's your call, though. Maybe you'd rather find a way to make it feel a bit more natural.

I see what you mean now, with it feeling out of place in this type of game. For now I will just turn down the "floaty" feel a bit and see how that plays out but I can see it becoming a distraction now.

I too find floating HUD to be quite distracting. As far as displaying damage, it's always nice to have the part of the health bar which represents amount of damage become red and slide in or just fade. Some hud shake or scale bounce (quick increase of size & slower decrease) would bee nice.

Yeah, like I said before, for now I'm going to keep tuning it lower so that it's just subtle but might even keep it static eventually depending on how it goes. I like the HUD shake idea though, I'll definitely consider it

 

[Snail Man]

Aww, I liked the floaty feel

 

[MrProg]

Aww, I liked the floaty feel

Haha see this is why I can't decide, but maybe the safe way to go is make it an option to turn it on or off

 

[Snail Man]

Well, it might not work so well with a larger/more crowded HUD. I'd finalize the HUD design before making any decisions.

 

[bdmarvel]

It might be worth taking some time to design the complete HUD at the beginning so you'll know how everything fits together. You can still tweak it as you go, and the individual elements don't have to do anything yet, but having something there as a placeholder or mockup of the whole HUD will give a much better feel for how distracting it can be, how easy it is to get the information you need at a glance, etc. If you plan on adding a lot of HUD elements later, I suggest at least getting the basic layout for them done now. It could save you a lot of time and effort reworking things later if you realize the HUD you've been piecing together needs drastic changes.

 

[Yal]

As for displaying HP loss, I prefer when the HP bar shows a 'ghost' of the previous value (in a noticeably different color) that slowly drains until it's the same as the current HP value - this displays your current HP so you know whether you're in danger or not, and by the use of the ghost, you also know exactly how dangerous the thing that just hurt you was. Some games gradually drain the 'current HP' value to get a smoother effect instead of using this 'ghost', and that's just annoying because you might take heavy blows without even realizing it, so the HUD basically hides information from you with this approach; it goes against its only purpose of existing.

 

[Snail Man]

One cool effect I've seen is where the "ghost" stays for maybe half a second, then physically falls away or crumbles away.

 

[The Green Dev]

Well the game is square and pixelated so why isn't the health bar like that too?