Hello. This little post is basically to show off a few HUD elements, and hopefully I can expand upon it later. Making sure the player can access important stats quickly, with a single glance of the eye is very important when designing a HUD. Deciding which stats get prime real estate as permanent residents of the screen may seem straightforward, but believe it or not, there's even more limited space to place those elements than one would realize. Furthermore, designing the elements to "pop" and be obvious to everyone is also a concern (and one which I can actually handle without having to hire an asset artist right away!). So, for a little more insight (and a cute little video of our HUD in action), click onward....
Design
This is pretty much what the HUD looks like now. Most games produce a HUD which give you the most relevant information to what you need on a single axis, so that your eye can glance by it quickly and read that data. Typically, this information is along the top (or bottom) of the screen, and read horizontally. Originally, our HUD placed some of this data (specifically, the current item mapped to each respective button) in the opposite corner of the screen, but this proved to be annoying to read all in one shot. That besides, the above placement of the loadout part of the HUD (seen in the upper-right) just seemed to "look better".
Part of the problem this introduced was that the original HP bar, which was a strict 1-to-1 representation of bars to hit points, was too wide to allow the loadout to be in the position it is now. In order to alleviate that problem, some way to change the visual representation of the HP data needed to be coded in.
This was the first attempt at representing more hit points than we had screen real estate for. My idea originally was to have pink bars to contrast against the blue ones, and increase the color contrast as well so that they stood out against the blue bars. Before, I had simply swapped the blue bars' color channels, and unfortunately that was virtually indistinguishable from the other parts of the health bar. Even with the higher color contrast, it's kinda hard to get a "quick" read on just how many hit points you have, which is especially important in big boss fights where you'll tend to lose tons of HP very quickly.
So, we moved on to this design. The pink bars were given 2x the width, and a large bevel. However, the bevel kinda made the bars stand out a little too much, in my opinion, and didn't match the glossy motif of the rest of this part of the HUD. Later on, I changed the graphics to reflect the other bars on the screen, and the final result is the image you see at the top of this article.
Colored Bars
The MP meter was actually the first attempt at making color bars other than the default blue ones to be displayed on the HUD. As a result, there wasn't any real reference to help decide on how MP bars should be colored to best fit in. Several options were quickly made. The first couple tries were a simple color channel swap, which didn't stand out very well. The third try attempted to adjust some of the saturation and levels on the bar to provide a "richer" green, but proved to be distracting as it stands out in front of the HP. Finally, we eventually decided on design #4, which swaps the green and blue color channels and adjusts the hue by a value of 30. The result are bars that are distinguishable from the HP bars without being distracting.
Placement
This was one of the very earliest HUD designs used. There is a simple hit point counter, and a dummied-out loadout HUD which we used to see how it would look being placed on different parts of the screen.
The Loadout
Designing the Loadout was originally supposed to simply be a small icon with the current field item you could use with the item key. However, it evolved into a design similar to the one you see here on the left, as I thought it would be useful to display this information on the screen at all times. However, in games which use a similar loadout hud to this (TLoZ, LTTP), at least one slot is almost practically useless, as it already has a visual representation on the screen (the player). Thus, for the current design, the weapon slot was left out. This also freed some horizontal space on the HUD.
Video
Finally, video of the multi-bar HUD in action. Representations are as follows:
No comments:
Post a Comment