Green Warden: Week 5 – HUD
|
This is the fifth week we are working with the space shooter project and we are in the middle of our fourth sprint. This week I have mostly been working on icons and such for the HUD (heads-up display). The icons for the HUD include player character/dryad life bar, player character inventory, skill icon (available/cooling down), enemy and plant unit life bars and sidebar art. The only thing related to the HUD we had before this week was the sidebar art, which Nayomi made a while ago. I decided to make an effort to make the rest of the HUD as similar to her design as possible.
In her design, the borders look like wooden sticks or branches that twist around themselves a little. The leaf on the side has the same patterns as the rest of the designs in the game and the cards have the plant units that Eva made. I first made a health bar for the player character. I made two different versions because I could not decide which one I liked the best. The first one has the same branch as the border in the sidebar art and similar leaves. Each leaf is a health point. There are six of them for now, but this can be modified fairly easily so that there are more or less. We still do not have an actual game that we can try out and balance, so we do not know how much health the dryad, the plant units and the enemies will have.
The second version of the dryad health bar I did had the same branch as a base, but had flowers instead of leaves to mark each health point. I was worried the green leaves of the previous design would not show very well against the background, which will also be mostly green. Since the dryad’s health is something the player needs to be aware of all the time it is important that they can see it with nothing but a quick glance.
The complementary color of green is pink/red, so that was a natural choice to make the health bar stand out more (plus health bars are usually in that color range). The dryad has a pink flower as a decoration on their head so I made each mark on the health bar the same kind of flower, to make it all more consistent. Next I made health bars for the plant units and enemies. They needed to be smaller, since they will be floating above plant units and enemies as they and the screen move around. I had the same issue here that we do not know how much health the enemies and plant units will have, so I had to be flexible. I made the enemy and plant unit lifebars a lot more simple than the dryad’s lifebar. This was both so that they would not clutter up the screen too much and also so that I could make many different versions without it taking too much time.
I first made the biggest version of a plant unit lifebar with eight bars of health. Then I made each step of the bar, from full to only one health point left. Then I made a smaller version, a lifebar with seven bars of health. And then I just kept going until I had made one that only had two health. I put them all together in a sprite sheet. For the enemy lifebars, I simply adjusted the hue on the plant unit lifebars to make them purple instead of green. Done!
 |
