Creating a health bar

Questions
#1

Hello!

I’m about to build a health bar for a game I’m building, and have a rough idea of what I should/can do, but wanted to see if there might be a better/easier way.

My idea is using a clipping mask, so that I have one mask, and a rectangle that would move horizontal as the health goes up and down. Which would make the rectangle hide the part that is overflowing, thus making it look like the life-meter is smaller or full depending on life-stats

Something similar to this link:

Can that be considered an idea to be good enough, or are there better known ways to accomplish a health bar?

#2

Hi,

The way to do a health bar depends on what you want it to look like. If you go for a flat UI you can do it very simple by just scaling a rectangle.

Do you have an image reference of what you are aiming for?

1 Like
#3

Hi,

Yes that makes sense. I don’t have anything written in stone, but something like:

So I’ll give the scaling rectangle a shot and see how it goes, it made a lot if sense (specially since the entire deisgn is just flat,so it would fit in

#4

Cool. Start there and go back to it later if you need to.

1 Like
#5

Check out https://github.com/subsoap/xp for one way to do progress bars with clipping.

4 Likes