Midnight Hunter UI Design
- 2018 July 18 Wednesday
- 2 min. read (484 words)
- Visual Style
- Pages
- In-game
- Weapon Tree
- Map
- References
Midnight Hunter is a hack and slash action game set in modern times for PC. By day, you go to work. By night, you hunt demons. The concept is similar to the Supernatural TV show.
Visual Style
Midnight Hunter takes place at night, so black is an obvious primary color. I accent with purple, because it is also associated with night time. I choose blood red as my other secondary color to represent gore and the twilight hour. Drawing inspiration from Gothic architecture, the buttons will have pointy edges.
Page Map
I noticed there are 3 large groups of UI pages. The first group contains pages related to single player gameplay: map, ability trees, in-game, journal, items, crafting, etc. The second group contains pages related to multiplayer. Finally, the game settings often need lots of pages.
In-game
Putting the camera over-the-shoulder of the character makes it feel like first-person. It puts the player inside the world. The HP bar is parallelogram shaped, because the pointy edges fit with the horror theme.
The HP and ability bar are put near the top, because enemies tend to be on the top half of the screen. Players can then quickly glance between the enemy and their HP. Many games follow this layout, most notable being the Dark Souls series.
Weapon Tree
The tabs can be cycled through. Console games often do this to reduce the learning curve. If all options were shown, the player would need to consider all options, then decide which one to pick. With the cycle method, the player only considers one option at a time.
All weapon skill trees will have the same layout as shown here. Enforcing a similar structure will make learning other trees easier. For example, the left child will always be a damage ability.
Parallelogram bars are also used to summarize the weapons stats. We show bars instead of numbers because bars make it easier to compare weapons. If a weapon does 15 damage and another does 73 damage, how many times better is it? With a bar we can see the proportions directly and tell if a weapon does 2, 3, or 4 times more damage than another weapon.
Map
Twilight time is where the sun is slightly below the horizon. I picked this time for its magical feeling. The map marks all current quests. A color coded key is added to help the player prioritize and evaluate their next move.
The ring is an image of the reward. Player's care about the reward. Showing the quest giver's face or an environment would not have as much meaning.