[h1]The Evolution of the Battle Scene UI[/h1] In this blog, we’ll be taking you through the changes and improvements that the [b]UI[/b] in our battle scene has gone through, to allow you to make your most tactically informed decisions as the world’s best [i]Combat Chef[/i]. [img]{STEAM_CLAN_IMAGE}/43162105/899f283be744f9ebe3cefb7a44aa35ac33e5410a.png[/img] [h3]Take One – March 2023 – All Upfront[/h3] This screenshot is from the [b]first build[/b] that we took to a conference, [u]March 2023 W.A.S.D.[/u] in [i]London[/i]. 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 [b]text [/b]on screen. That bar was also [i][b]so thick[/b][/i] that we couldn’t quite fit the [b]GladiEATers[/b] on the field. The [b]GladiEATers [/b]names were also a first attempt at just telling the player whatever they needed to know, but ultimately our [b]GladiEATers [/b][u][i]should [/i][/u]speak for themselves. [img]{STEAM_CLAN_IMAGE}/43162105/52d8584fa56349bb6328ff726ed1da5524a9abb2.png[/img] [img]{STEAM_CLAN_IMAGE}/43162105/899f283be744f9ebe3cefb7a44aa35ac33e5410a.png[/img] [h3]Take Two – July 2023 – Icon Cramming [/h3] Fast forward to [i]Develop Brighton[/i], July 2023, we brought this version of our battle scene with a few interesting solutions to our problems in take one. [u]Firstly[/u], we drastically reduced the text overload by encapsulating abilities in [i]cool[/i], [i]unique [/i][i][b]icons[/b][/i]. This not only made the interface less overwhelming but also provided a sneak peak into the [b]GladiEATers[/b]' powers before they were cast… and we only had to draw [u]3 ability icons for every GladiEATer in the game[/u]!! [i]/lol[/i] [img]{STEAM_CLAN_IMAGE}/43162105/bb997818242dc7fbac34d7692ca116f1e5215a39.png[/img] [u]Secondly[/u], we brought in the [i]Combat Chefs[/i] as physical presences within the [i]CAL[/i]osseum. Their animated reactions added [b]a touch of life to the battlefield[/b], and their introduction allowed us to do away with the corner icons. A few final details were the removal of the [b]GladiEATer [/b][i]name plates[/i], spreading them out better, adding [i]health bar section indicators[/i], [i]zooming out[/i] on the [i]CAL[/i]osseum artwork, adding [i]colour [/i]to key parts to the text and[i] greying out the non-targets[/i] when targeting an ability. All was well --- until a new issue emerged! [b]New players didn’t not know what to click[/b]! The icons were central but not as central as the big interactable buttons we had previously. How did we fix this? Well…. [img]{STEAM_CLAN_IMAGE}/43162105/899f283be744f9ebe3cefb7a44aa35ac33e5410a.png[/img] [h3]Take Three – September 2023 – Space Optimisation & Colour Control[/h3] … [u][b]colour swaps[/b][/u]! By [b]eliminating[/b] the visually catching bright gold and light brown from the majority of the menu, we keep the colour, and player focus, on the [b]interactable objects[/b]. Our ability icons [i]grew in size[/i], became more interactive with hover and click states, and [u]displayed their descriptions on [i]hover[/i][/u]. [img]{STEAM_CLAN_IMAGE}/43162105/9c2bbd6c87e7ba5e7e0f0e666c750d9cb3b78d3e.png[/img] Taking this to [i]W.A.S.D. x IGN[/i] in September 2023, players were doing what we wanted them to easily – [b]success[/b]! Next, we made optimal use of the corner space left vacant by removing the portrait corner boxes by [b][i]spreading out the Timeline[/i][/b]. The Timeline received a [i]sleek transparent black backing[/i] to allow more of the [i]CAL[/i]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 [b]sprite[/b], [b]name[/b], and [b]health bar[/b] for the [b]GladiEATer[/b] currently taking their turn, [i]mirroring the same[/i] for the [i]target [/i][b]GladiEATer [/b]in the right corner. [u]This maintained the cherished symmetry from the earlier version[/u]. To assist players with [b]colour blindness[/b], we added [b]meanie [/b]and [b]friendly symbols[/b] to [b]GladiEATers [/b]on the Timeline and positioned [b]friendly GladiEATers above[/b] and [b]enemies below[/b]. [img]{STEAM_CLAN_IMAGE}/43162105/3e1645ad451b8d41b3dcdef4eca7b31305757748.png[/img] We didn't stop there! Another massive improvement was the [i]nifty pop-up[/i] that showcased [b]GladiEATer abilities[/b], [b]power[/b], [b]speed[/b], and a[i]ny debuffs or buffs affecting them[/i]. This allowed the player [u]total strategic awareness available at their mousetips[/u]. [img]{STEAM_CLAN_IMAGE}/43162105/c514d923ef7512f44a40a03ac57938204e6b1934.png[/img] [img]{STEAM_CLAN_IMAGE}/43162105/899f283be744f9ebe3cefb7a44aa35ac33e5410a.png[/img] [h3](Not) Concluding Remarks[/h3] And that’s where we are for now! The battle scene has gotten [b]a lot clearer[/b] over time. But the journey is far from over. With more [i]tinkering [/i]and more [i]vital player feedback[/i], [u]from the best community ever[/u], will push us even further in the right direction. Sooo stay tuned and be sure to give us more and more feedback :) [img]{STEAM_CLAN_IMAGE}/43162105/51df9c54e9b8f632e6d810794bcc98c15c708b34.gif[/img]