Evolution of the GUI – Part 1

Hey everybody!

I know we have been a little quiet since we’re working on the new beta release! It’s going to be fuckin’ badass, I promise. Until then, we are going to tide you over with some inside looks into the development of Cairn. The first area we’re starting with is the GUI.¬†Over the next several days I’ll be writing about the change of our GUI from the bare bones version, to the super slick version we have now.

The picture featured below is the first iteration of the GUI. Look below the image for descriptions on each part of the GUI.

GUI Version 1

First version of the GUI

1) The first box is our mini-map. This particular iteration of the mini-map has a funny story behind it.

All the builds before this one had a running mini-map that showed terrain and other features. When Adam sent the build the screenshot was taken in, the rest of the team saw what you see. We thought the ‘new’ mini-map sucked and Adam was losing his shit, but didn’t want to rile up the crazy genius with our concern. Once we got on Skype and demoed the new features we realized that Adam could see the real mini-map on his Mac, but the rest of us PC users saw this shitshow of a mini-map. Thankfully this was fixed in the next build.

2) The area here is where the unit stats are displayed such as HP, Armor, Wards, Damage Type, etc.

3) The bar and the input button are mainly debugging tools. We enter commands to spawn units here since our landmarks aren’t spawning units quite yet.

4) This section of the GUI holds all the commands for the units, their stances and the special attacks for the Slayers.

5) Our Glory/Infamy part of the GUI (known within the team as ‘Glorfamy’). It’s one of the unique aspects of Cairn that makes it different from other RTS/Tower Defense games and something I’ll elaborate on in a later post.


A few builds later we arrived on this iteration of the GUI. This one definitely touts some improvements over the last one. As before, check below the screenshot for the GUI descriptions.

Version 2 of the GUI

GUI Version 2

1) It’s fixed! This is the correct mini-map, the one Adam saw and the rest of us did not. This iteration actually renders the terrain, as opposed to the blank box with dots.

2) The unit stat box, and this one has actual stats in it! None of these are finalized, but you can see how the Praetorian might give Robocop a run for his money.

3) Our command box and input button. It’s showing the command I typed in to spawn the Praetorian unit for the first player.

4) Unit Stance/Slayer controls. The buttons allow the user to select the units’ different stances and use each of the Slayer’s special abilities. For the Praetorian Eruption and Furnace Rush are definitely my favorites. And someone needs to run spell check because ‘Pheonix’ is not how you spell¬†Phoenix.

5) Glory/Infamy box with fancy new Center Alignment! Left-justified is sooooo not cool anymore.

6) A new addition to this GUI and one of my favorite aspects of it. These four buttons allow the player to make units lineup in any of those formations. This feature reminds me a lot of commands in Dragon Force (one of my favorite games for the Sega Saturn), and it gives the player much more flexibility and tactical command of their troops.

7) The second new addition to the GUI, the Command Log. The Command Log is mainly a debugging tool for Adam and I to see combat damage and everything that goes with it. It serves two significant purposes, the first is allowing us to find errors within unit programming (damage dealt, factoring in armor, etc), the other is balancing of units. The balancing of units is crucial and the Command Log helps us pinpoint if a status effect is kicking units’ asses by being applied too much, or is too weak because each iteration deals too little damage.

Before I wrap up this iteration on Evolution of the GUI, I’m going to present three images for you readers to look at. Each of these images are rough concepts drawn up by Mr. Rodrigo Petunio himself. He gave these to us so we could decide on the style of the GUI and where we wanted to take it.

Which of these concepts do you like the best? Let us know in the comments below and I’ll tell you which one we decided on in the next article!


GUI Concept 1

GUI Concept 1

GUI Concept 2

GUI Concept 2

GUI Concept 3

GUI Concept 3

2 thoughts on “Evolution of the GUI – Part 1

    • Hey, thanks man. We liked concept 1 the best too.

      I think Ryan wants to come back to part 2 at some point (and the visual style we finally went with). One of the things that really stressed us out about was the design aspect of the GUI, that it had to be pretty, but not too pretty, that it shouldn’t overshadow what you saw in the screen, etc.

      There’s also the part about seeing that particular concept in other games. This was sort of a conscious decision on our part. Not modern games though, but rather take a cue from RTS classics, particularly Tiberian Sun, which is still a favorite of mine and Warcraft 2, which is was Adam’s golden standard.

      Anyways, thank you for the post!. Man, we just never get people commenting here.

Leave a Reply to Jake Cancel reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>