Graphics refresh 3: Unit banners

Last time I spoke about the squeakiest wheel being the terrain graphics, and how big a difference it makes to improve them even by small amounts.

Now the squeaky wheels became:

  1. GUI graphics: unpleasant, uninviting
  2. Useless AI: no “game” to play

Why UX matters in 4X games

The best GUIs and HUDs in games normally appear in fast-paced games – FPS’s especially. The need to keep information clear and simple when the player is reacting to sudden changes forces a kind of Natural Selection upon games: the better GUIs tend to survive.

4X games (like Civilization series) tend to spend their development budget elsewhere, and have simpler GUI. Civ4 was the first where the GUI wasn’t ugly, and it was very effective at showing data clearly. Civ5 was the first to have a truly attractive and appealling interface, with lovely glow effects, nice buttons, rounded metal finishes everywhere. But still lets you down in a lot of places – the wrong information surfaced, critical information hidden (e.g. what the **** are the AI civilizations doing? Why is diplomacy so incomprehensible?)

One of my worst ever experiences in official Civilization games is the complete mess they made – for several games in a row – of the unit movement:

If you choose a tile that takes multiple turns to reach, the game chooses the “best” route for you.

But if an enemy appears right next to the route, the game doesn’t change the route, nor warn you. Unless you notice and cancel it before the GUI auto-selects that unit, you’re dead.

The game won’t allow you to interrupt a pre-made route once it starts moving. So your turn starts just in time for you to watch your Settler walk into an enemy and kill itself…

…that’s an example of poor UX. But, worse, in a 4X game that can be a game-losing mistake. Not because the player made a bad decision, but because the game’s overall UX betrayed them. That’s exactly the kind of thing I iron out right now, from the earliest builds, spending lots of time making sure it’s good and that it stays that way.

GUI Graphics

One of my core goals with this project is to achieve a very good UX experience. It should be:

  1. Simple / Clean
  2. Intuitive
  3. Not frustrating
  4. Highly Effective

To save time, I’ve been using GUI’s with no artistic/graphical niceness – just raw, simple, layout. I worked hard to decide what was the critical amount of data, and how to lay it out so that it took up minimal space – but was large enough to be easily readable. After many revisions, I came up with these three variants to choose from:

Screen Shot 2016-06-03 at 15.59.56

Unlike traditional Civ games, where the info on a unit is hard to read or hard to find, you simply float your mouse over a unit and get the critical detail you need:

  • Attack
  • Defence
  • Movement remaining (blue bar)
  • Unit type
  • Pretty picture (the green triangle was a placeholder for a unit portrait image)

My favourite was the top one, but I felt that it hid the VERY important attack / defence numbers too much, especially for new players. I want it to be obvious to them how to play, not to be surprised by lots of numbers and data they “didn’t notice”. The middle one was most readably, but took up too much space. The bottom one was the best compromise (as a short-term solution!) between readability, simplicity, and info.

In game, this became:

Screen Shot 2016-06-03 at 15.55.19

(white rectangle is placeholder for portrait-image, and the blue-bar has become “movement” instead of “health”. Health is now implicit: like Civ4 and Civ5, your attack and defence strength scale down as you take damage)

To save time, and to keep things consistent, I then re-used this box as the “currently selected unit” box in the top-left of screen:

Screen Shot 2016-06-03 at 15.55.36

It doesn’t look like much, but when designing GUIs the simple thing is often twice as hard as making something complicated. For the in-game popup / hover box, I decided to remove the next/previous buttons, as this box would be used on enemies as well as your own units, and it should be as small + visually simple as possible. To that end, it should have NO interaction (no buttons!).

Fine. That’s where we were. And I had come to hate it.

I’d spent all this effort on the layout, and choosing the info needed, and pruning it away to the minimum necessary. But I was getting sick of its ugly, default-Unity-UI graphics.

Another problem: Promotions

While my “simple” layout was fine for core unit-data, it had no way of showing Promotions.

In a traditional Civ game, you’d give up at this point and slap-on some buttons or icons, add a GUI that overflows text so that you can’t read anything, (Civ4, I’m glaring at you), etc. How bad can it get? Let’s look at Master of Mana. This is a “beginner level” unit, near the start of the game:

Screen Shot 2016-06-03 at 16.16.00 aLYhQHi

First image shows the part that lists only the promotions, second image shows how much of the screen real-estate this consumes!

Or how about a Hero unit, about halfway through the game?

Screen Shot 2016-06-03 at 16.19.47

We have a problem…

Back to the drawing board: what’s in a HUD?

Trawling Google Images we get the HUDs for a variety of strategy games. I chose to focuse on RTS’s, since the “real time” aspect generally forces their design teams to put extra effort into the HUD. Here we have League of Legends, a modded Evochron Legends, Age of Empires, Empire Earth, Battlezone 98.

We see some common themes. Generally, the RTS’s stick the HUD along the bottom of the screen, where you get width. This allows for more text – sentences, descriptions, etc – and it’s also great for variable numbers of buttons, as you can fit many of them. Unfortunately this works quite poorly with a modern monitor, which these days are often sold as widescreen, 16:9 etc, so that movies look good.

The more extreme ones try and push the HUD downwards, so that the bit along the bottom is very thin, and more space is taken at the sides. This makes them more FPS-like: keeping the circular area of the screena around the center as clear as possible, as distraction-free, so the player can see the main game area.

But what did the earliest FPS and RTS do, when they were truly constrained for screen space? Well…


Do not click to zoom! That is a full size screenshot. 320×240 pixels, oh yeah, baby! The same space as an original iPhone 1, but published on PC in 1992, it’s Dune 2, the world’s first successful RTS.

And what did Civ5 use?



Although they got it wrong. The sidebars in Civ5 are attached to left and right of screen, and ignore the actual size of your monitor. The “end-turn” button is on the extreme right, the “choose research” button ditto … but the 4-5 choices of Research you have to select are on the extreme left. This is not good UI design: interactive dialogs should always be in the center, or at least close to where the user’s mouse cursor is/was at the time the interaction started.

(which is why the Choose Research and Choose Production buttons are particularly embarassing: the designer knows that after clicking that button you HAVE to see the choice of research, but they’ve forced you to move across the full width of the screen)

Civ4 had pseudo-sidebars (look at the early screenshots above, with the Unit Promotions). But because they took up so much space, and monitors were smaller and lower resolution ten years ago (when Civ4 came out), they made it have a transparent background. In the mid and late game, this often creates an unreadable mess of colour and light:


Let’s not do that.

My solution: Banners

I had an idea that I want to change the GUI as the game progresses. When you start the game, it’s all animal-skins and crude brush strokes. When your research takes your civ into the Classical Era, it becomes Grecian statues, fluted Roman columns, etc. It’s too early to build all that in (I don’t have a tech-tree yet!), but it gave me the idea to pick things that exist in every era, but have unique look and feel in each.

Click each image – especially the red one, the thumbnail generation in WordPress has hidden most of the real image.

Putting together some ideas I got from banners I liked and disliked, I came up with this, the new UI for Growth of Ages:

Screen Shot 2016-05-29 at 23.21.27

There were a couple of things I particularly liked, right from the start. Firstly, putting a coloured ribbon over the top allows me to visually show which player owns which unit in a very clear and obvious manner. I also liked how striking the “parchment like” background colour was – it stands out very strongly against the game-world, making it easier to distinguish between them. This is the opposite of Civ4’s horrible mess of transparency and colour.

I played around with it a bit, further customized it to make the two versions: the popup Infomatic, and the Currently Selected Unit Details, and got this:

Screen Shot 2016-06-03 at 17.00.32

Changes to note:

  1. I used the small area at top to put the actual player-name who owns the Civilization
  2. I’ve added official “unit generic type” names to each unit, so those are now used automatically
  3. There is a LOT of space for the Attack and Defence. I needed room to write them as “1.4 / 2.0” each time the unit loses a little health
  4. I had this huge space at the bottom, so I decided to put a big logo of the unit’s type (Melee, Ranged, Recon, etc)
  5. I made the selected-unit graphic more distintive. The triangle-shape at bottom works great as a way of also pointing to the unit that the popover is for! (I originally put it there because war-banners were often pointed-bottomed)
  6. I have a huge amount of space to extend the text-area downwards if a unit develops “too many” promotions and bonus effects over time
  7. I tried many, many places to put the movement allowance, and moves remaining, but they all looked terrible and broke the visual layout, while also being unclear. So I cheated, took the lazy route, and put it off the bottom edge of the banner. Shame on me!

PS: …

I said last time that I was changing the way heights are handled; I did, I have, it’s done. But it’s taken so long writing up the UX changes that I don’t have time to explain that yet. And I’ve been working on a big AI update – making them actually defend their cities, and start to strategise about how they play! Next week, perhaps…