AuthorTopic: Health Bar  (Read 6653 times)

Offline Selassin

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

Health Bar

on: November 19, 2013, 04:43:35 pm
 Now I'm trying to make a health bar, I plan to make it so that every 5 hit point will add more cracks and there'll be 3 different crack effects. But I don't have any idea about how to break things. I imagine this health bar as a glass(inside the metal thing, red part), so it'll crack like one. Any idea about how can I crack it? I just draw black lines but that was ugly...

Offline jams0988

  • 0010
  • *
  • Posts: 346
  • Karma: +0/-1
    • View Profile

Re: Health Bar

Reply #1 on: November 19, 2013, 08:14:42 pm
If you don't know how to draw something, then just look at what you want to draw!

Beginners always make the mistake of drawing with symbols. Circles for eyes, lines for a mouth, oval for a head, without paying attention to what they're trying to draw actually LOOKS like. Of course a black crack looks bad, hahah! Cracks in glass wouldn't be black! ;)
Now, take a look at the picture. What color should your cracks be?
(If you need to, use the color picker in your art program - the cracks won't be pure white, either, even if it might look like they are to your naked eye!)

If you want to draw something, study a reference, and COPY EXACTLY WHAT YOU SEE, and try to figure out WHY what you're studying looks the way it does. That's how you draw! Good luck! =)

Offline Selassin

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

Re: Health Bar

Reply #2 on: November 20, 2013, 03:26:25 pm
Gray/white is not good either, any other ideas? I mean, what am I doing wrong?

Offline tehwexxl0rz

  • 0010
  • *
  • Posts: 446
  • Karma: +0/-0
  • Swing the bat.
    • ianwexl0rz
    • https://pixeljoint.com/p/15996.htm
    • View Profile
    • Ian Wexler | Game Developer

Re: Health Bar

Reply #3 on: November 20, 2013, 04:13:42 pm
Before you continue, I think it's important to ask yourself what it is you are trying to communicate with the image.

What is the player looking at? A red square? What does it represent?

In the case of Doom's famous health indicator (an avatar that appears increasingly beat-up as you take damage) the meaning is clear. The avatar is YOU and losing health is bad, because look at your messed up face! It illustrates your physical status in a completely literal way. However in the case of this red square, you are representing something ABSTRACT in a completely literal way, sacrificing the readability of a traditional meter. Is there a good reason?

Offline Charlieton

  • 0010
  • *
  • Posts: 167
  • Karma: +1/-0
  • awkward dancer
    • View Profile

Re: Health Bar

Reply #4 on: November 20, 2013, 04:54:09 pm
Adding to what wex just wrote, you could reinforce the symbolism in your health bar by shaping it like a heart instead of a block. A glass heart getting more cracks in it as you take damage would be a pretty clear message, I think.
Det skulle vara lätt för mig att säga att jag inte gillar dig, men det gör jag; tror jag

Offline Selassin

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

Re: Health Bar

Reply #5 on: November 20, 2013, 07:06:55 pm
 Well, there is no reason behind this, I just draw what I want at that time. Actually I love complex things, but there is no point if player don't understand anything.

 I've created 2 alternative health indicator, first one is plus sign, does this look good?

 Second one, like Charlieton suggests:

Offline Letmethink

  • 0001
  • *
  • Posts: 40
  • Karma: +0/-1
  • Lol!
    • View Profile

Re: Health Bar

Reply #6 on: November 20, 2013, 08:32:58 pm
Second one, like Charlieton suggests:

I have a feeling they meant like this:

I can't be bothered to make a signature. Seriously, who has time to write these things? I have stuff to do, games to make, and you expect me to write a big, long signature?  I'm not your slave. You can't tell me what to do, so no, I WON'T write a signature.

Oh, wait...

Offline r4c7

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

Re: Health Bar

Reply #7 on: November 20, 2013, 10:40:52 pm
Gray/white is not good either, any other ideas? I mean, what am I doing wrong?
I actually think this works, you just need to blend the colors more. I did a quick edit here.

Offline Rylan

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

Re: Health Bar

Reply #8 on: November 21, 2013, 03:37:49 am
The problem is that these grey lines are too thick and thus too pronounced. In the example photos, they are very thin and only appear on the sharp edges. More pronounced would be the shadow visible through the cracks, and would have more justification to be wider and thicker. Additionally, it is true that plastics return white light as white (metals return coloured light), however this refractive plastic is specifically designed to return coloured light. You have both inner reflections (red) and outer reflections (white). I would suggest to do cracks either dark red with (slightly) pink highlights on edges, or do them the way that r4c7 suggested, which is similar but with tighter cracks with no room (holes) between them. Also in r4c7's example the grey is variably mixed with red, giving a bit of irregularity as well a feeling of subpixel precision.
Dropbox can be used for image hosting; just add ' ?dl=1 ' to the link that the Share button gives.

Offline Tidbit

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

Re: Health Bar

Reply #9 on: November 21, 2013, 06:10:25 am
Oi!
So, I saw this thread like 30-40mins ago, right? So, being the crazy college kid I am, I thought that 12:20am would be a fantastic time to whip up a little sprite sheet for you to help demonstrate a more proper technique for showing cracks and how light reacts to them in a three dimensional space  :D.

The thing to remember with pixel art is that you're always working with a three dimensional shape, it has depth which your light source interacts with and results in something look like what I have above. I was going to make these 32x32 but some how they got cut down to 20x20 which is a weird size. Anyways, if you take a look at frames two and three which I believe are the best (frame four is a bit iffy but works out) you can see that I have the highlights under the crack line, this helps fool the eye that there's a nice pixelly crack in that there gem stone.
Unfortunately, it is 1:09 am  and I'm having trouble getting my brain to crap out an explanation better than that. So long as you take away the idea that you're working with something 3D in a 2D environment, you'll be okay  :).