Dev Blog #2 -The UI
|
This week I wanted to talk about our UI, which mainly consists of the health and aether bars.  When we thought about how we would design the UI we wanted to do it “portrait style”, but since the player avatar is a ship and not a person we chose to portray the bow of the ship along with its figurehead. Because we needed to do a lot of work during the last sprint and we only have one artist on the team, I was assigned to help him out. So following the direction of my lead artist I got to work. I added a compass and a rudder to further push the nautical theme, and cogwheels for a slight hint of steampunk as we had discussed beforehand. The first iteration I came up with is the image above, heavily based on the sketches that Carl (lead artist) had already made. After presenting my work to the entire team, we adjusted the UI together. The main issues were clarity and visibility. Since the UI is such a small part of the screen, the health bar and aether bar should be clearly visible even if you only see it out of the corner of your eye as you focus on shooting the enemies in front of you. To remedy this I made the resource bars wider and upped the exposure of them to give them a glow, as well as lowering the exposure of the ship and mermaid figurehead, as seen below.  Already there’s a clear improvement. Now we spotted another issue, however. It needs to be clearer where the end of the resource bars are so you can clearly see how much health and aether you have remaining. This was a quick fix, I just added a divider.  At this point not everyone was satisfied with the fact that we had a figurehead included, as it was an unnecessary element cluttering the limited space, and distracted from what was important for the player to see -the resource bars. So for the following iteration I removed the figurehead.  This is how we ended up with the final version, (something that the team agreed on was good enough for now anyway!) which is what is currently implemented in the game. Personally I think it works pretty well, though I am not completely satisfied with the “dividers” at the end of the resource bars. This might be something I will change in the future. Every decision made during this design process aimed not only to further cement our aesthetic, and to compliment the setting (mentioned in my previous post), but also to provide clarity for the player in the heat of battle without unnecessary features. Looking at the UI by itself as this, one might think it seems very simple and one dimensional, but you have to remember that most detailing I could have done would have been lost once the image is scaled down and implemented into the game. Extra work that ends up not adding any value to the player is a bad idea, as I’m sure we all have learned by now. The last image I’ll provide for this week shows how the UI is broken down into layers in order for our programmer to properly layer the different elements and make the resource bars slide in response to the player taking damage or consuming their aether.   |