Valentines - Hearts

Valentines is coming up and you know that hearts will be involved.  Let's dive into how they can be used in games to show how much health you have.



How to Display Health

There's so many ways you can display how your player is running low on health points.  Do you want to have hearts, a bar, numbers, big heart that fills up, or not show anything at all and have the player rely on memory?

For a lot of older games like Legend or Zelda and current indie games, hearts are one of the best ways to show when you're going to die.  You could show the players face or something, but hearts are pretty universal in what they mean.

There's no explanation needed, most people will understand that is your life and you don't want it to go down.  You can display it in any way you want, but as long as you have a heart in it, people will figure it out quick.

How I draw hearts

This has always be a difficult thing for me for some reason.  I try to make stuff for the HUD as crisp, clean and symmetric as possible, but hearts are hard for me to get perfect.  I've opted to make them linear instead of curvy in this tutorial.

1. make a square
2. rotate it to make a diamond
3. cut the top off
4. cut out the center part of the top so it resembles a heart

1. add a gradient
2. add a smaller gradient in the center and draw a line through it
3. cut out the bottom part of the smaller gradient
4. ctrl+drag the bottom edge of the smaller gradient so it's curved

1. make a grey gradient frame (it's easiest to expand the fill of the heart by a few pixels)
2. inset the grey frame and make a new lighter gradient
3. do it again and make a lighter gradient, now it has more dimension
4. add some small details to make it a little more interesting, like spots of very light color and dark colors.  I also added another gradient over the heart with a hint of blue so it looks like the frame is causing a shadow to appear

Got Questions? Suggestions? Improvements? Ask me anything

Tweet