The UI is one of the first things I started to work on before Super Combat Squadron even had a name.

The original development title we used internally was simply "Swat Game" despite the fact that the game did not feature Swat teams in any capacity. Even now the folder I keep my development assets in is called "Swat".

The earliest screenshot I can show you. At this point in time, there was no game, there was no code, Super Combat Squadron was nothing but an idea. The idea of hotkeys didn't exist yet, neither did a minimap. The hud was concepted out over top of a screenshot from AW.

In the bottom right you can see a small button for 'Move, Attack, Hold, and Patrol' commands, but this element would be dropped in later versions.

The next version after that. It looks the same over all, but here we've added the idea of a Minimap, the panel readout of information on the unit you are selecting has been expanded to represent the effects of the terrain on its stats, and already the MAHP button is gone, replaced by the Build menu. (now given a B hotkey)

No code existed still as of yet.

Above is the first major milestone in Super Combat Squadron development. AW background was thrown out. The idea of having 'Commanders' was finally given representation, and their ability to have abilities, shown by the atomic bomb with the Q hotkey. I tossed together a quick temp sprite based off of the Fire Emblem sprite heads and for the first time we conceived of having a much larger screen-space as things had started to become very cluttered.

Things moved rapidly at this point. The sprite art was deemed too small and thrown out in favor of the large sprites we'd eventually adopt. Nell from AW was used as a placeholder to judge the size of character sprites, and ideas such as a Day/Night cycle clock were experimented with at the top, and how many powers a CO would have, similar to a hero you would see in a MOBA game like League or Dota.

The Minimap has grown enormously but now we're struggling to find places for all the information that needs to be read out to the player at any given moment.

Starting to look familiar now isn't it? The Temp CO is moved to the right side, the information read-out stays relatively unchanged from this point onward however the Minimap square proves to be too small for practical purposes.

'Experience' points are tested out for the CO. as well as you saw in the previous design. No solid place for these has yet been figured out, and the name plate under the hero is still temp.

And now we've finally reached today. In concept art, we have our own nice font for things but that is as of yet not implemented in-engine. The CO is missing an experience bar, and a plaque with their name on it. The Minimap has grown ever larger. The Build button still exists in the bottom left but as of now it serves no purpose, building is done by clicking on the structure itself.

It's almost due for another strong evaluation again. We want to target both PC and Mobile markets so its important to consider things like 'When you only have a single finger to click, you cant do things like hotkeys, control groups, precise hitboxes for selecting things, or all sorts of fancy controls that the PC can.

Thing's that are unsatisfactory about the current HUD for me:

• The CO's name has no place anywhere, and perhaps the CO image is too large as it is now?
• They aren't shown here but I would like to have a bar along the bottom middle showing off the various CO abilities (yet unimplemented) and in the same location will likely be where CO. experience will be shown. 
• Just as important as your own CO is the CO's of your enemies and allies. Popular MOBA place thumbnails of them in places like along the top bar or lined up on the left, which are both places to consider.
• In every HUD version but the current, the number and types of units you have fielded show on the left, a feature I'd like to see implemented again, but the code is just not quite there yet. It In the same place should be read-outs on how many flags and building structures you posses as well. 

What do you think? The GUI is far from complete or perfect, and every version tweaks it slightly. Perhaps the Minimap will move to the bottom left corner and the info readout will become lengthwise again? Only the future will tell.

Designing a Commander

Hey everyone, today I'm going to take you through the process I use to make the game's Commanding Officers.

As always, the first step is gather references. You might feel like you have enough creative juice in your head to do it from imagination alone, but it still helps. Once you have an idea in your mind, it's time to draw!

To the left is my first drawing. I did it entirely in black then masked out details afterwards, though the masking part isn't necessary. It's very important your character have a recognizable silhouette, as he or she will be among many other COs and you need to be able to recognize the character at a glance without wondering if something is an arm or a gun or a leg or something.

On the right is my second pass, now that I have the character design in mind, I go about drawing the silhouette for the actual game sprite. I draw at a much larger size than will actually be in game and reduce its size in the next step.

Now that I have the larger design, I shrink the artwork to match the same general size and shape as the other CO I've completed already, so that he fits on the HUD. At this stage I tweaked the silhouette slightly, adjusting his belt higher and fixing the pointy waist.

Color time! I slice off the parts that won't fit in the HUD and block out the general shapes and colors he will eventually use. The design is still in flux at this point, and I decide he looks better in a rain coat-ish jacket and adjust the design to match. The head is too small however compared to the other CO, and I adjust it larger as I add more details.

Almost done now. I polish the overall design and add team colored elements to it. I feel like he suffers too much from 'blueberry head' at this point the way his hat makes his head feel divorced from the rest of the design, which I fix in the final version.


 Last stage, final copy. The hat is unified, his saluting hand is cleaned up, armband shrunk, clothing folds shrunk, medals added and parts from the original design are re-implemented, like the design of his lower pockets.


I did experiment a great deal during this process, such as the shoulder straps from the original design, but they just didn't pan out looking nice compared to the original design.