AotBK — UI & UX Design
Introduction
Arena of the Bored Kings is a first-person, fantasy, split screen, arena duel where two combatants battle to the end for two ‘bored’ kings’ enjoyment, or rather, to sate their boredom. The world is whimsical medieval fantasy with vibrant colours, followed by grim undertones and humour. It’s this duality that I think really breathes personality into the game, as evidenced by the writing, so the visual style had to match the experience the players would be expecting, so I, the only designer on the team, had the task of designing and implementing the main menu and level to match that level of expectation, backed up by the principles and reason of game design.
The Book
Before we settled on ‘The Book’ as our main menu, we went through a few different iterations of what it was meant to be: a tally board in the arena undercroft, a standard main menu UI that looked over the arena, and a wizard’s book (in the two aforementioned locations). After testing all three different approaches I deemed the wizard’s book the most appealing due to its subtle tie-in to the narrative (the wizard scheming both kings into fighting each other), and its unique approach to the main menu.
This was because I wanted to give the players the opportunity to feel like the scheming wizard flicking through the pages, choosing the fighters, then pitting them against each other; making them feel like they’re the ones who are pitting the two unfortunate souls against each other. This was because we wanted to reinforce replayability, versing your friends over and over, and not directly making the players feel like the combatants removes that sense of desperation because after the match is over they can go straight back to being the overlord that sends two more into the fray.
Additionally, the previous two menus failed for their own respective reasons. The plain main menu worked but it wasn’t interesting enough, which may sound silly until you think about how first impressions matter the most. We considered adding in an AI match where it would display the combat and visual effects, but that would have drawn too much time away from other crucial things, like ensuring the game was feature complete. So then we could have just left it at a static screen overlooking a static arena, but we felt that we wanted to give the best first impression possible, so we moved onto the pseudo tally board.
The tally board, although representing personality, was just not representing the personality of our game. It was dark, grey, and felt like just a brick wall (which it was). This idea was then switched to a book overlooking the arena, but the lack of detail in the environment and the effort it took to switch out the background every time the level was iterated was too time-consuming, so we moved it to the undercroft, where it was its own level that could be changed to represent however we thought it would look completely independent of the rest of the game.
Button Placement
As I was designing the menu to be entirely set within the pages of this book, it only made sense for the buttons to represent different chapters in the book, especially the character descriptions section. The buttons on the main menu represent the three main interactions the players will have with the main menu: ‘Play’, ‘Archives’, and ‘Options’. Beyond these, if the players venture into the archives then they will be met with a series of buttons that look like chapters from an actual book that will take them to their respective pages, I even went to the effort of giving them page numbers even though they are.
Since the aforementioned interactions are the most significant choices the players will be making, I chose a ‘banner’ look for them. This keeps up with the medieval fantasy theme and also reinforces the buttons representing chapter titles because, as banners are used to signify a title, this makes the words pop out of the screen and, as there is no clutter other than the banners and logo, this makes the main menu a clean and easy to navigate user interface.
The last detail that I designed in regards to the buttons was the method of going back or returning. I could have easily placed it somewhere on the page but that lacked creativity and flavour, something this book was founded on. My first thought was to place it in the bottom-left corner, like turning the page back, but that would often get in the way of other UI. So finally I decided on the ‘bookmark’ approach, which, as it is familiar for anyone who’s read a book before, helps you find the page you left it on. This approach in no way hinders the content on the pages and holds the flavour of ‘returning to your last page because you left a bookmark on it’, which doesn’t break away from the book-feeling’.
A lot of my inspiration was formed from a few GDC talks I had watched on how to create an immersive user interface, primarily one by the name of ‘Hearthstone: How to Create an Immersive User Interface’ by Derek Sakamoto. The part that truly stuck out to me in regards to this game was about ‘finding your seed’, something that can represent your game with everything connecting to it in one way or another, making it memorable. In the end, our seed was the book, like Hearthstone’s is the box.
The Particle Effects
When turning the pages in the book on the main menu it is apparent that they don’t bend as normal pages would, and even still, the words disappear when the transition begins and reappear when it ends. This is a jarring effect that breaks the suspension of disbelief that this is a real wizard’s book. This issue was occurring due to a lack of time to implement page physics with text that bends with them, so a workaround was devised that can fix the janky transition.
(Unfortunately, the screenshot for this is unavailable as it had been broken in the latest build from optimization changes.)
By embracing the disappearing text I could twist it around and make the book feel more magical like you would expect from a wizard’s book. So I insinuated that this wizard’s tome can conjure up words from thin air by adding in a particle effect that spans that entirety of the page while the page turns, hiding the janky transition by making it look like that the particles are magic that summons written words. This also fills in the blanks for another issue we had: seemingly turning one page at the time but getting a different result depending on which button you clicked.
By adding this ‘magic’ effect the book felt otherworldly, that anything it does is believable purely because ‘magic’. Fortunately, since that was our goal from the beginning, this design decision tied all the previous design decisions together in producing a wizard’s tome that felt like it was a mysterious arcane artefact that has access to infinite knowledge, i.e it has an entire archive on each character in it.
Conclusion
I designed the location, user interface, and user experience around a mysterious and magical wizard’s tome that is to be the seed of our game and represent our game as a whole; A first impression to insinuate to the players all the content that stems beyond the first page they see, and a main menu that contextually ties all the game together in one clever user interface that is intuitive and flavoursome. The ‘wizard’s tome’ embraces its flaws and ultimately realizes the vision of Arena of the Bored Kings as a main menu.
