The combat interface required much more consideration than the more general user interface features. Mostly because it needs to clearly convey more information and that informations must be clear to the player for them to understand the combat system.


  • I made a few more iterations on my earlier UI design for the player energy (health) bar. Eventually deciding on segments of 5 split up, as this was the easiest to read.
  • I made icons for each action the player can take: Attack, Heavy Attack and Defend. When shown the icons without context, everyone shown was able to correctly identify what each one symbolised.
  • There’s a simple ‘Combat’ pop-up box, which I added smaller sword icons to.
  • In similar small boxes are the words that will pop up during combat to determine the outcome of a round.
  • Buttons for the player to select an attack option were made from the initial icons, with two versions of different opacity to indicate what was being selected.
Screen Shot 2018-05-31 at 09.24.54
Marauder (Attack, Heavy Attack, Defend)
Screen Shot 2018-05-31 at 09.23.59
Player (Attack, Heavy Attack, Defend)

I also created poses for the player character and the enemy characters, for each of the three actions they can take. Selecting an action will trigger the characters to change to the corresponding pose.


Combat Start
Combat – Player Attack (Hit)

After creating the individual assets I began to arrange them together to create screen mock ups for what the combat event might look like in game. I think over all this visual design for the combat works well.

With the combat visuals designed and the combat mock-up built I can more easily work on and move forward with the combat coding with James.