DeVRAND

A lightweight programming blog for distraction-free reading.

The UI from KISS to Polished

2018-08-19

Unfortunately, KISS does not stand for the American rock band here, but for the super important phrase, “Keep it simple, stupid”. It has been a major part of the design philosophy of Arena - aim for the minimal-viable-game and get it out there. Getting real feedback from players and acting accordingly is going to do way more good than perfecting every detail in the game first and releasing only after the death of the Universe. In this post, I will be showing the very first version of the UI with emphasis on functionality, which then improved aesthetically over time.

First Version - Functionality Over Appearance

This post will be driven by images for obvious reasons. Looking back at the first version of the UI makes me cringe hard - it is looking absolutely awful! Extra kudos to everyone who bought the game right after release. I really, really wouldn’t have done that.

Arena First Menu

The rectangular buttons are rocking some very awkward shadows, the colors create a huge mess out of the scene, and the logo is very uninteresting.

Arena First Matchmaking

I have chosen the matchmaking screen as it features all three button types: default, checkboxes, and pseudo-numbers. What they have in common is an on-hover effect so they have at least some responsiveness.

Pseudo-numbers have been implemented in the dumbest possible way - when the cursor is more to the left when they are clicked, their value decreases. If it is more to the right, it goes up. The plus and minus signs are concatenated to their original text for simplicity. “{value} bots” would always become “- {value} bots +”.

Checkboxes work the same way - text concatenation. The format is “{text} [x]” when checked, “{text} [ ]” otherwise. While this solution is painful to look at, it is easy to implement, and requires no extra sprites for the different button types.

Second Version - The Rectangular Look Must Go

After realizing how bad the UI looked, I have redrawn all the buttons, the title, and changed up the background on the main screen for a more thematic look.

Arena Second Menu

Buttons are still color-coded, but it hardly adds any value - should have been removed. The title has dropped the ugly green colors and has become absolutely lit.

Arena Second Matchmaking

It is so great to have the rectangular buttons gone! There is still no distinction between different button types though.

Third Version - Polishing Begins

Arena Third Menu

Color-coding is no more. I might introduce it again if it starts making any sense to do so - right now I do not feel like that. Slightly improved their previous look: more metallic, more 3D and no dithering.

However, that is not where the real upgrade is. Button types have finally received a unique look!

Arena Third Matchmaking

They not only look unique now, but their responsiveness has also improved. As seen below on the score selector, pseudo-number buttons light up in the proper direction on hover.

Arena Third Matchmaking With Responsiveness

It has been rather difficult to distinguish checkbox statuses when there were too many of them in a grid before. Not anymore!

Arena Third Matchmaking With Responsiveness

Finally, clicking on the new buttons will result in a fancy particle effect too. :)

Fourth Version

Coming soon. :)

Back to all posts