Am I doing this right?

 

Task: UI: Health and Aether bar with player avatar icon

As a project manager who used to have digital drawing as a hobby, I have been waiting for the right opportunity to help out my team with some art. During this week’s sprint, that is exactly what I did. While both artists in my team are working on tasks that take many hours to complete, I thought I’d help out with UI, a smaller feature that doesn’t take too many hours, which allows me to have time to work on project management…stuff…. Like you know… planning….

It was yesterday that I completed one of the UI components which is health and aether bar including and already existing player avatar icon (made by the lead artist that I simply pasted in) (See picture below).  The aether bar is drained with the main player attack, which is important to display for the player to keep track off. It is also important for the player to know when he/she is about to die – therefore a health bar is needed for our game.

Update: The second (blue) bar represents player’s main attack which is a laser beam of color blue/teal. This is the reason why the bar has same color. So the player can easily distinguish which bar is connected to what. The red bar is player’s health, which is red with some effects. Red is usually associated with health (heart and blood being red), which is why I chose to colorize the health bar red as base color. The different effects are mostly there for adding a better look instead of it being plain and boring. (At least in this case I thought that the effects made the bars look better)

Another reason I chose to add effects on the health bar specifically, is because of one of our backgrounds (there are three checkpoints with three different background colors) being red-ish. So having the background colors as a background when designing the bars, helped to visualize which colors were fit for the background and didn’t “melt together”. So the orange stripe in the middle is there to distinguish the red (bar) from red (background).

There are many ways one can design bars, and I chose going with a simple design, because it suits our game style (being quite plain and simple). I also haven’t drawn UI before, only character design/animals, so I didn’t want to complicate too much.

 

I started with google searching health bars to acquire some inspiration. The task was done with Photoshop, where I started with placing the player avatar (sky ship) at the top left corner as a starting point and then testing different brushes and colors to start with the bars. (The grey background behind the ship was pretty random but will come in handy when… never mind, don’t want to spoil) When the bar corners were there and colors filled, I experimented with different affects for each bar (for example gradient overlay, pattern overlay, outer glow and so on…) and then applied the one’s I thought were suitable and nice-looking.

Since our level will have three checkpoints with its respective sky colors, I had to test the health and “aether” bar colors in those three different backgrounds. This factor led to changes that in the end resulted in a not-exactly-satisfying compromise to fit all the “skies”.

This asset is one of my three tasks with deadline being Friday, before our weekly sprint reviews. I managed to complete two of them, where the task in description is one of them.