Java-Gaming.org Hi !
Featured games (90)
games approved by the League of Dukes
Games in Showcase (754)
Games in Android Showcase (229)
games submitted by our members
Games in WIP (842)
games currently in development
News: Read the Java Gaming Resources, or peek at the official Java tutorials
 
    Home     Help   Search   Login   Register   
Pages: [1]
  ignore  |  Print  
  Comments & feedback on this health-bars?  (Read 2556 times)
0 Members and 1 Guest are viewing this topic.
Offline buddyBro
« Posted 2018-01-23 16:11:26 »

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 Smiley

Click to Play


Offline zngga
« Reply #1 - Posted 2018-01-23 16:32:34 »

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.

My code never has bugs... it just develops unexpected features!
Offline buddyBro
« Reply #2 - Posted 2018-01-23 16:48:33 »

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

Click to Play


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

Click to Play


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.
Games published by our own members! Check 'em out!
Legends of Yore - The Casual Retro Roguelike
Offline VaTTeRGeR
« Reply #3 - Posted 2018-01-23 17:49:46 »

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.
Offline buddyBro
« Reply #4 - Posted 2018-01-24 16:19:07 »

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.

Click to Play


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

Click to Play


To be honest, i don't like any of the one's i've tried out so far Smiley

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"?
Offline buddyBro
« Reply #5 - Posted 2018-01-24 16:56:48 »

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

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?

Click to Play


side note, it seems the size tags don't work: [size=5pt]why isn't this font size 5?[/size]
Offline Abuse

JGO Ninja


Medals: 64


falling into the abyss of reality


« Reply #6 - Posted 2018-01-24 17:42:08 »

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.
Offline buddyBro
« Reply #7 - Posted 2018-01-24 18:22:07 »

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.
Offline zngga
« Reply #8 - Posted 2018-01-25 15:35:41 »

Click to Play


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.

My code never has bugs... it just develops unexpected features!
Offline buddyBro
« Reply #9 - Posted 2018-01-25 15:47:02 »

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

White

Click to Play


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

Click to Play


Black

Click to Play


Halfway between white and bar's fill color

Click to Play
Games published by our own members! Check 'em out!
Legends of Yore - The Casual Retro Roguelike
Offline Stampler
« Reply #10 - Posted 2018-01-26 07:32:11 »

I like this the most:

Quote
Click to Play

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  Grin)

Don't dream big, dream realistic.
beemelonstudio: Website | Twitter | Instagram
Offline princec

« JGO Spiffy Duke »


Medals: 1030
Projects: 3
Exp: 20 years


Eh? Who? What? ... Me?


« Reply #11 - Posted 2018-01-26 09:56:22 »

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

Cas Smiley

Offline buddyBro
« Reply #12 - Posted 2018-01-26 15:22:41 »

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
Click to Play
Offline princec

« JGO Spiffy Duke »


Medals: 1030
Projects: 3
Exp: 20 years


Eh? Who? What? ... Me?


« Reply #13 - Posted 2018-01-26 15:44:45 »

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 Smiley

Offline buddyBro
« Reply #14 - Posted 2018-01-26 15:58:10 »

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

black
Click to Play


thick external border
Click to Play


thick internal and external border
Click to Play
Offline zngga
« Reply #15 - Posted 2018-01-31 01:38:25 »

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

My code never has bugs... it just develops unexpected features!
Offline princec

« JGO Spiffy Duke »


Medals: 1030
Projects: 3
Exp: 20 years


Eh? Who? What? ... Me?


« Reply #16 - Posted 2018-01-31 09:25:08 »

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

Cas Smiley

Offline buddyBro
« Reply #17 - Posted 2018-02-01 16:29:12 »

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
Offline zngga
« Reply #18 - Posted 2018-02-01 16:57:53 »

The second one, for sure.

My code never has bugs... it just develops unexpected features!
Pages: [1]
  ignore  |  Print  
 
 

 
DesertCoockie (33 views)
2018-05-13 18:23:11

nelsongames (75 views)
2018-04-24 18:15:36

nelsongames (70 views)
2018-04-24 18:14:32

ivj94 (752 views)
2018-03-24 14:47:39

ivj94 (82 views)
2018-03-24 14:46:31

ivj94 (622 views)
2018-03-24 14:43:53

Solater (98 views)
2018-03-17 05:04:08

nelsongames (179 views)
2018-03-05 17:56:34

Gornova (405 views)
2018-03-02 22:15:33

buddyBro (1065 views)
2018-02-28 16:59:18
Java Gaming Resources
by philfrei
2017-12-05 19:38:37

Java Gaming Resources
by philfrei
2017-12-05 19:37:39

Java Gaming Resources
by philfrei
2017-12-05 19:36:10

Java Gaming Resources
by philfrei
2017-12-05 19:33:10

List of Learning Resources
by elect
2017-03-13 14:05:44

List of Learning Resources
by elect
2017-03-13 14:04:45

SF/X Libraries
by philfrei
2017-03-02 08:45:19

SF/X Libraries
by philfrei
2017-03-02 08:44:05
java-gaming.org is not responsible for the content posted by its members, including references to external websites, and other references that may or may not have a relation with our primarily gaming and game production oriented community. inquiries and complaints can be sent via email to the info‑account of the company managing the website of java‑gaming.org
Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines | Managed by Enhanced Four Valid XHTML 1.0! Valid CSS!