GladiEATers Dev Blog #6 - Battle UI Evolution

The Evolution of the Battle Scene UI

In this blog, we’ll be taking you through the changes and improvements that the UI in our battle scene has gone through, to allow you to make your most tactically informed decisions as the world’s best Combat Chef.

Take One – March 2023 – All Upfront

This screenshot is from the first build that we took to a conference, March 2023 W.A.S.D. in London. We had all our UI drawn up, and we were really quite happy with the character and colours of our UI. However… watching people play, we felt they were overwhelmed by the sheer amount of text on screen. That bar was also so thick that we couldn’t quite fit the GladiEATers on the field. The GladiEATers names were also a first attempt at just telling the player whatever they needed to know, but ultimately our GladiEATers should speak for themselves.

Take Two – July 2023 – Icon Cramming

Fast forward to Develop Brighton, July 2023, we brought this version of our battle scene with a few interesting solutions to our problems in take one.

Firstly, we drastically reduced the text overload by encapsulating abilities in cool, unique icons. This not only made the interface less overwhelming but also provided a sneak peak into the GladiEATers' powers before they were cast… and we only had to draw 3 ability icons for every GladiEATer in the game!! /lol

Secondly, we brought in the Combat Chefs as physical presences within the CAL osseum. Their animated reactions added a touch of life to the battlefield, and their introduction allowed us to do away with the corner icons. A few final details were the removal of the GladiEATer name plates, spreading them out better, adding health bar section indicators, zooming out on the CAL osseum artwork, adding colour to key parts to the text and greying out the non-targets when targeting an ability.

All was well --- until a new issue emerged! New players didn’t not know what to click! The icons were central but not as central as the big interactable buttons we had previously. How did we fix this? Well….

Take Three – September 2023 – Space Optimisation & Colour Control

… colour swaps! By eliminating the visually catching bright gold and light brown from the majority of the menu, we keep the colour, and player focus, on the interactable objects. Our ability icons grew in size, became more interactive with hover and click states, and displayed their descriptions on hover.

Taking this to W.A.S.D. x IGN in September 2023, players were doing what we wanted them to easily – success!

Next, we made optimal use of the corner space left vacant by removing the portrait corner boxes by spreading out the Timeline. The Timeline received a sleek transparent black backing to allow more of the CAL osseum artwork to shine through. An arrow and tiny name label also now indicated who’s turn it was.

In the bottom left corner, we introduced a sprite, name, and health bar for the GladiEATer currently taking their turn, mirroring the same for the target GladiEATer in the right corner. This maintained the cherished symmetry from the earlier version.

To assist players with colour