Art Direction of Spirit Siege - Part 1: Before Kickstarter

Note: This is Part 1 of a two-part post about the evolution of Spirit Siege's art direction. If you'd like to jump ahead, here is Part 2.

Art direction is what enables a team of individuals with their own strengths, weaknesses, and artistic styles to ship a unified product. It is the process of getting the team aligned around a vision, a clear goal of what we're all aiming for, why we're aiming for it, and how we're going to achieve it. Done well, it contains the decisions that make a thousand others.

When I joined the team about a year ago, the game looked something like this:

And this was the UI style guide and look & feel concept art:

Accordingly, one of my early versions of the UI art came out like this:

This was clearly an improvement over what we had before (programmer art), but still wasn't really working.

The Three Most Difficult Problems:
1. Noise
With a board full of units all shooting at each other, spawning and dying, and special attack animations, the playing field got really noisy really fast. To communicate the important information clearly, we needed to be very deliberate about what we were showing and how. Units on the board need to communicate these things, in order of importance:

1. what team am I on? (team color)
2. what do I do? (character art)
3. how soon am I going to die? (health indicator)
4. what type of terrain am I on? (the ground underneath)

I was convinced that there was a better way to communicate that information than a tinted tile and floating health bar on each and every unit, but I didn't know how yet.

2. Flatness
We kept hearing the same feedback from mentors and industry vets: it looks too flat. There isn't enough depth for visual interest. Clearly 3D characters are out because they would be too labor-intensive, but have you considered a 3D environment?

Yes, in fact, we did briefly consider a 3D environment, but rejected the idea on the premise that people do better work in the medium they love, and no one on our art team even particularly likes 3D. Instead, we started thinking in terms of the visual cues to depth, overlap in particular (the others are: relative size, top to bottom composition, linear perspective, and atmospheric perspective.)

3. "It doesn't feel like us."
A mentor of the art team gave us the critique that she'd more-or-less seen this game already. Metal and gems are really generic fantasy tropes, and this game didn't really feel like us, like our team. It didn't feel unique. On the one hand, that is super-great and useful feedback to hear, especially early enough in the process to do something about it. On the other hand, it presents a really interesting and squishy problem, because what does that mean? It's so subjective, even if we all knew it was true.

Finding the Solution
I went about trying to fix those problems by exploring a bunch of new scary ideas and resolutely throwing out anything that didn't work.

While we were still looking at a top-down perspective, I did some exploratory work to improve the unit base tiles, trying to solve for the noisy board in isolation. This gave me a much better understanding of the constraints and was the ground work for some ideas that carried over into later designs.

Then I did a radical new mockup of the board in 3/4 perspective, turning the flat round and hex shapes from the previous thumbnail sheet into 3-dimensional objects called plinths.

Given the new perspective, I went on to explore some other options for health indicators, determined to find something more elegant than floating HUD health bars on every unit.

Back in the game space, I added some forced perspective on the board to create an even stronger feeling of depth, and mocked that up with three different options for health indicators: bars, hearts, and plinth tops.

Adding perspective was a pretty radical change, and the amount of overlap was difficult to adjust to at first. Isometric perspective would create less overlap, so we also tried that. The game designers assured me that creating new fun maps for isometric would be easy, should we decide to go that route. This round also marked the first baby steps toward placing the game board in an environment.

Roughing in dimensional crystals in the same perspective as the units made it a lot easier to visualize the final direction. Even my super sloppy scribble for pine trees was an improvement on the forest terrain, previously represented by a cluster of birch with a very ambiguous silhouette. By then, the scene was established enough for me to start evaluating alternatives to health bars, starting with the version where the plinths sunk into the ground and shrunk in diameter as the units lost health.

This was a polish pass on crystals and terrain. I added the breaking sequence back in for the new dimensional crystals, and converted the mountain terrain into a pile of rocks to bring its scale more in line with the units.

This next paintover blew the team away, and was the first big step toward making it "feel like us." I was pretty ruthless about ditching pieces that didn't work, and very fast and loose about blocking in replacement ideas. I didn't want to waste a lot of time on it in case this major change of direction wasn't right for the team. Thankfully, the idea was well-received. <3

At this point, we settled on a stylistic distinction between things in the world and UI elements. Before, we'd been trying to make the UI feel like it was made of real materials, like metal, leather, and parchment, but here we embraced UI assets made of pixels. We also added team health bars to the HUD, giving the player a quick read on the overall state of the game.

A whole lot of polish later, we arrived here:

TL:DR, the solution to the three difficult problems involved:

1. Plinths. Each unit stands on a team-colored pedestal, which sinks into the ground as the unit loses health.
2. Depth, via a combination of forced linear perspective and overlap. This also enabled us to enlarge the character art. 
3. Bright open space. Eliminating visually heavy UI elements from the edge of the board and giving the game an open-air setting created a much lighter overall look & feel. 

This was the look we were working with all summer. Accordingly, this version of the game informed the visual design of the Kickstarter page for the campaign in September. The longer we lived with this design, the more dissatisfied we grew with it, but the team didn't really have time to fix it. After we funded (yay!!!), we revisited art direction and I will elaborate on that in Part 2.