Comments & feedback on this health-bars?

Newbie & Debugging Questions
#1

I’m working on a sandbox rpg kind of game. Still very early in development process to show much, I’ll create a post under WIP once it’s a bit more developed.

At the moment, I am working on the health bar (and other ui-bar-components). I don’t want a plane 1-color bar that shrinks as health decreases, because that wouldn’t visually indicate total health, just % health of maximum health. I know other games have vertical lines divide the health bar; as maximum health increases, the number of these lines increases, and the distance between them decreases. For example, Dota does this (

I wanted to try out something similar, and ended up with the below example. I’m not sure if it’s any good or just hard to read, and need some feedback :slight_smile:

#2

Are you planning on having them against a black / dark background? It is hard to tell where the bar ends on the left side because of how it fades, I like the fade though, maybe put a white border around the bar? See how in the Dota bars have about a pixel of black border around them. Helps them to stand out against various backgrounds.

#3

The background color changes. I made everything else black for those gify & screenshot to make it obvious what I was asking about, but in reality, the bars will be overlaid on top of the 3d rendered scene. Still though, I think ur right, the left-most points are “too” black.
Good idea. I avoided a border at first because I feared making the UI too obnoxious, but i definitely should try before deciding.

Here is what the background actually might look like

Here i adjust the darkest shade to be ~.25f rather than ~.02

Here it has a white border

And here it has a black border

Overall, the bordered one’s “pop out” too much, but would like others’ opinions.

#4

What are they supposed to represent? Stamina and Health?

They look like regular health bars with a fixed value range right now.

Definitely needs some cleverly designed border around it to increase the visibility/readability, i second what zngga said there.

The color gradient looks kinda boring and dull, it would look better with some more detail added to them, the DOTA bars are a good example with their 3d-ish looking shading around the rim of the health bar.

#5

Yes, the left is health & shield, the right are stamina and secondary stamina.
Yes, in the gifs, the range of values doesn’t change, just the percent changes. But in the game, as your character progresses, you could increase maximum health and such and then the rectangle chunks would change size. (in the below gifs, i’ve included a preview with 3 rects and a preview with 5 rects to show what i mean)

I’ve stuck with both ur advices and kept the white border. Here are 2 more attempts.

For this one, I had the life bar chunks stick to the right edge, rather than the left as previously.

And for this one, i’ve put the darker rects to the right and the lighter rects to the left.

To be honest, i don’t like any of the one’s i’ve tried out so far :slight_smile:

I want to avoid adding 3d affect to the bars. The short gifys don’t show it, but the game is meant to be set in wild planets, like James Cameron’s Avatar kind of planet, but maybe more barren. So your character is in some sort of suit, and the ui should feel “digital / electric / battery-like”?

#6

This is maybe my favorite? idk, is it? no one knows the truth :o

the rectangle chunks individually set color, the rightmost one becomes blacker and blacker as you take damage, until u’ve taken 1/num-rects of your health as damage, then the next one begins to darken. This seems kind of digital like?

side note, it seems the size tags don’t work: why isn’t this font size 5?

#7

Your UI design should stem from how the game is balanced.

Is the player going to be required to accurately read when the bar is nearly empty/full/at a precise level?
If so, the UI should give special emphasis to these states, or always present an accurate (possibly numerical) value.

Examples where precise reading is necessary:

Health bar, if health packs are sparse & over-healing is impossible.
Shield level, the there is significant mechanical difference between 0 and >0 (e.g. no damage bleed through ‘shield break’ state change)
Ammo clip when reloading destroys unspent ammo.
Golf swing’o’meter.
Combo-meter, when level determines if a special action is possible/impossible.
stamina meter, when level determines if a special action is possible/impossible.
etc etc

What your last video seems to place special emphasis upon is the 1/6th boundaries.
Partitioning a bar like this is usually done to indicate a significant mechanical change between boundaries.

#8

i’ve never thought of it like that, that’s very helpful. Currently, there’s no special change at any boundary. Even when shield reaches 0, there’s no change in mechanics; shield and life just regenerate differently (e.g. life regens slower, shield regens faster but only if you haven’t taken recent damage), and scale differently from stats / gear.

#9

I like this one a lot. I would add a line in between each rectangle though, so even when it is full you can see how many ‘stages’? you have.

#10

Yes that sounds like a good idea. Though I’m not sure if my implementation turned out that nicely.

White

Same color as background of each bar (i think this is my favorite?)

Black

Halfway between white and bar’s fill color

#11

I like this the most:

It looks very clean and displays the empty bar the best while still providing information on your maximum health (as long as you’re not dead all the time ;D)

#12

How about 50% alpha black border, 2px thick.

Cas :slight_smile:

#13

This one’s black with 50% alpha. pixel width, i’m not sure, as i’m providing coordinates in the [-1,1] space so that they scale with window size. Each line is 0.2% width of the screen

#14

Bit hard to make out at that size, but the borders look distinctly white to me, and not fat enough.
(Just my opinion, take it with a pinch of salt)

Cas :slight_smile:

#15

Oh my bad, i read ur first post as referring to the divider lines rather than the surrounding border :slight_smile:

black

thick external border

thick internal and external border

#16

I like the Thick external border version, but it would need additional padding between the different bars.

#17

What he said. You need about the same amount of space between the different UI elements as the thickness of the border.

Cas :slight_smile:

#18

Here I don’t change the distance between bars, but instead making the border consume space inwards rather than outwards.

Here I just put greater distance between the bars

#19

The second one, for sure.