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 (think Vicious Mockery from D&D) 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.

UI Design

The mental state mechanic was meant to be representative of the player’s 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.

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 this initial attempt was that our team wanted the players to have a better idea as to how close they were to changing states. While the concept of 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.

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.

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.

This GIF on the right 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 I think it came out looking pretty good in the end!

A needle pointing at three different states. Similar to a compass.

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.

I started off by sketching out some icons for each of the different heads, and then went ahead and made vector versions of each. Below is a draft of the icons connect to curved health bars inspired by the ones seen in the show Sword Art Online.

Here is a screenshot is showing the final version of the UI after the game was completed. 

Role: UI Designer
Platform: PC
Made with: Unity