Chimera is a turn-based RPG where battle a three-headed creature that not only damages you physically but can also alter your mental state by saying specific things or performing certain actions. The difficulty of performing different actions is dependent on what mental state you are in.

Before I joined the Chimera team, I was presented with their initial UI drafts. Most of the information displayed seemed routine for this type of game (player health, enemy health, mana). However, I was really intrigued by the mental state meter and had many questions as to what sort of information it was meant to portray to the players.

This is a screenshot that the team sent me to show me the UI they were using at the time.

The mental state mechanic was meant to be parallel to the players' willpower and would be divided into three different states: disheartened, determined, and certain. Depending on which state the player is currently in, the actions that they take will cost either more or less mana to perform.

My first draft for the mental state UI was experimenting with the idea of having a wizard icon with a flame embedded into its hat. The idea was that the flame would change in color and intensity when switching between the different states. The feedback from the rest of the team was that they wanted the players to have a better idea as to how close they were to changing states. While the concept for the flame could have been adapted to address this issue, we felt that it would be best to look at alternatives that wouldn’t be as time-consuming to implement and would work well with our limited time frame.

This is a draft of the mental state UI being represented as a flame inside of a wizard hat.

After thinking about the information that we wanted to portray to the players, I felt that the best approach would be to use a meter subdivided into three different sections. To make it more visually interesting, I thought that a radial bar with a needle (similar to a compass or speedometer) would work well for displaying the information we were hoping to show.

This GIF is taken from Unity. It took me a while to figure out how to make the needle follow the fill of the radial bar, but it came out looking pretty good at the end.

The top portion (V.1) is the first draft that I made of the mental state UI being represented by a radial bar. I created that in Photoshop. For the bottom section (V.2) I wanted a cleaner look, so I decided to create a vector version by using Affinity Designer.

Once the mental state UI was finalized, it was time to work on the rest of the UI for the project. Through conversation with the team, we decided that instead of having a single health bar for the entire Chimera, it would be better if we had one for each of its different heads (lion, goat, dragon), as each could affect the player in different ways.

Preliminary sketches of chimera head icons from different angles.

This draft of the health bars was heavily inspired by an anime show I watch called Sword Art Online. I really like the illusion of depth that the curved bars provide. While these type of bars would work best in a 3D game where they can wrap around a character, I still like the idea of experimenting with them in 2D games.

Created bars and icons for the player character and each of the heads belonging to the Chimera

  • Role UI Designer

  • For PC

  • Date October 2018 – December 2018

  • Type UI Design

  • Made With Unity

Up Next: