AuthorTopic: Player hud for space-ish game  (Read 2985 times)

Offline oxysoft

  • 0001
  • *
  • Posts: 39
  • Karma: +0/-0
    • View Profile

Player hud for space-ish game

on: November 17, 2015, 10:09:51 pm
I started with this small hud and I think it came out pretty good, but I came to realize that it needs to be be bigger for the game I'm making (hp needs to be quite visible and attract the eye because death is permanent in this game)



so I made it bigger but the hp bar I had just didn't cut it anymore so I started trying a bunch of different patterns but none of them looked too nice



Any suggestions? c+c on the rest of the hud as a whole is appreciated as well. The orange bar is weapon cooldown and green is exp, and the square window on the left will contain a view of the player.
« Last Edit: November 17, 2015, 10:13:38 pm by oxysoft »

Offline eishiya

  • 0100
  • ***
  • Posts: 1256
  • Karma: +2/-0
    • http://pixeljoint.com/p/28889.htm
    • View Profile
    • Webcomic: Black Dram

Re: Player hud for space-ish game

Reply #1 on: November 17, 2015, 10:29:28 pm
I think part of the problem is that the colours are rather harsh.
The helix form of the HP bar is a neat idea, but doesn't read well at 1x because the dark red blends with the black, because of how bright the lighter red is. I think with different colours this could be very effective. Perhaps a less-bright red, with a slightly darker and purplish colour for the back part of the helix?

Edit: Here's a version with the colours on all three bars modified (made less intense), and a little highlight added on the two smaller bars for some extra interest:

I don't know how important each bar is, or how this part of the HUD looks in context of the rest of the game, so I don't know how well it would work, but I hope it gives you some ideas!
« Last Edit: November 17, 2015, 10:56:36 pm by eishiya »

Offline Seiseki

  • 0011
  • **
  • Posts: 915
  • Karma: +1/-0
  • Starmancer
    • OminuxGames
    • http://pixeljoint.com/p/35207.htm
    • StarmancerGame
    • View Profile
    • Starmancer Patreon

Re: Player hud for space-ish game

Reply #2 on: November 17, 2015, 10:48:54 pm
Oh, now I see the helix part, I thought it was just warning stripes.

Offline oxysoft

  • 0001
  • *
  • Posts: 39
  • Karma: +0/-0
    • View Profile

Re: Player hud for space-ish game

Reply #3 on: November 17, 2015, 11:24:34 pm
I think part of the problem is that the colours are rather harsh.
The helix form of the HP bar is a neat idea, but doesn't read well at 1x because the dark red blends with the black, because of how bright the lighter red is. I think with different colours this could be very effective. Perhaps a less-bright red, with a slightly darker and purplish colour for the back part of the helix?

Edit: Here's a version with the colours on all three bars modified (made less intense), and a little highlight added on the two smaller bars for some extra interest:

I don't know how important each bar is, or how this part of the HUD looks in context of the rest of the game, so I don't know how well it would work, but I hope it gives you some ideas!

That does look quite nice but the colors feel a bit washed out compared to the rest of the game, where I try to keep the colors as poppy as possible without being eye burning. It might just work that way though, maybe it'll create a better contrast with the game and make it easier to see the HUD. Here is a semi-old screenshot with your edit on top, to get a feel



Not bad

By the way, that hp bar wasn't even meant to be a helix, and I didn't see it that way until you said it  :)

Offline eishiya

  • 0100
  • ***
  • Posts: 1256
  • Karma: +2/-0
    • http://pixeljoint.com/p/28889.htm
    • View Profile
    • Webcomic: Black Dram

Re: Player hud for space-ish game

Reply #4 on: November 18, 2015, 12:00:19 am
I don't think it's out of place, it actually matches the red on the character pretty well, which makes for a nice visual connection between them and their HP.
If you want to make the HP bar more vibrant without going back into eye-burn territory, try using orange instead of red, maybe make it "glow" (have yellow fading out to red instead of solid red).

Offline oxysoft

  • 0001
  • *
  • Posts: 39
  • Karma: +0/-0
    • View Profile

Re: Player hud for space-ish game

Reply #5 on: November 18, 2015, 03:46:13 am
Okay so I realized that I needed to display the player name somewhere, therefore I have squished the hp bar again and added a new panel



I decided to try and use all three of the reds for the helix itself and it does allow for a much better defined shape but I don't know what to set the background as (for the helix)

edit: maybe something like this

« Last Edit: November 18, 2015, 03:57:15 am by oxysoft »

Offline eishiya

  • 0100
  • ***
  • Posts: 1256
  • Karma: +2/-0
    • http://pixeljoint.com/p/28889.htm
    • View Profile
    • Webcomic: Black Dram

Re: Player hud for space-ish game

Reply #6 on: November 18, 2015, 04:03:43 am
I think the old helix was better. The new one looks more like a helix, but it's more distracting compared to the simple flat shapes of the old one. This one might also make it harder to see one's HP level, since it's so skinny. The bright red is the only clearly visible part so it's the part that'll be conveying the important information (how much HP the player has), so it should be as close to being a solid bar as possible, while still being interesting.

The text is very hard to read. I think if you make it all the highlight colour, it'll be more legible. I think it might also look better to have the name be on the left rather than centred, since everything else in this part of the HUD is aligned to the left.

Offline oxysoft

  • 0001
  • *
  • Posts: 39
  • Karma: +0/-0
    • View Profile

Re: Player hud for space-ish game

Reply #7 on: November 18, 2015, 05:54:34 am
Okay so I sat down and really studied things. I ditched the helix idea and went with simple ticks for the HP. Every single column of that bar is clearly visible and will convey the most information. I went a step further and realized that by setting it up such that the first and last columns end on a bright tick, adding another degree of precision. The cooldown bar has cool new pattern which I think fits nicely and I also tried something else for the exp bar. I also made it so that the empty bars have the same pattern as the filled version. Finally, I switched up the font and and colors of the text.



I'm not sure if the colors are good, although I think they should be (I shouldn't do art with Flux enabled   :'()

Offline eishiya

  • 0100
  • ***
  • Posts: 1256
  • Karma: +2/-0
    • http://pixeljoint.com/p/28889.htm
    • View Profile
    • Webcomic: Black Dram

Re: Player hud for space-ish game

Reply #8 on: November 18, 2015, 03:58:04 pm
The reason I don't use Flux at all is because I'm afraid it'll mess with my ability to work with colour and I don't want to have to turn it off every time I do anything xP

The text is definitely more readable now! I think a simpler O (without the corners filled, or with ALL corners filled) might be more readable, at the expense of stlishness, but I'm not sure.
I like the new HP bar. I feel like it might look better with the highlight only being 1px instead of 2, it looks rather pale as-is.
The exp bar (yellow?) works better with the diagonal stripes since precision isn't very important there. I don't think you need the dark brown in there though, it blends into the background. Or is it just there to serve as the boundaries for the empty version?
I think with the green bar being concave and with two segment sizes, you have too many textures going on in the HUD as a whole. It's good to rely on more than just colour and position to set things apart, but it's starting to look a bit noisy. I think the old, convex, simple segments worked better. Since the segments are wider than the ones in the HP bar, it would still have a distinct texture and thus be readable, without overcomplicating things.

Offline oxysoft

  • 0001
  • *
  • Posts: 39
  • Karma: +0/-0
    • View Profile

Re: Player hud for space-ish game

Reply #9 on: November 18, 2015, 06:21:49 pm
Oh yeah, I did forget to mention that I switched the exp bar and cooldown bar based on the logic that there would be less travel time for the eye to look at the cd bar if it was on the right. Thus, the exp bar is now placed on the left where eye travel time is highest. It's a very small difference in travel time but I think it's worth it :) Well, the cooldown bar isn't that much more important than the exp bar anyway, it's there for show more than anything. (it'll be a bullet hell type game, cooldowns are short and you just hold the joystick to shoot)

And yeah, now that I look at it from a fresh eye, it does look a bit crowded now. I'm probably going to revert to the old exp bar.