Fire With Fire: Choose Your Creeps.

Online multiplayer for Fire With Fire is up and running, and it works perfectly so far. My win rate, on the other hand... less than perfect. I need more practice before the end of June, clearly.

In the meantime, we're sprucing up the visuals, because frankly, a lot of the art and visual arrangement needs to be planned out further or overdone completely. For now we're making sure the main menu, where you select your Towers and Creeps before a match, is as clear and understandable as possible.

Here's what it looks like right now.

We both agreed that this design has a few problems. Creeps are chosen in pairs, but the current layout only shows the advanced Creep that the basic one is paired with. It's important that players understand which 2 you'll be allotted in each set. It also only shows the name of one Creep instead of both.

The artwork itself is another issue. The outlines are kind of jagged, and I feel like there's too much black in the characters considering that the menu background is also really dark.

With those things in mind, I've been working on better images to place in the menu.

Much better...

The little square icons have to stay, because players need to be able to hover over them for details about each individual Creep. The white outlines are much more streamlined and clear in these versions.

Now here's something else we had to think about. How do you know which sets you've already chosen? Recall the old menu:

The top set has been selected in this screen capture. At first glance from a distance, it's kind of hard to tell. The only thing that changed was the icons grayed out; everything else in the artwork has the same visual priority as unselected sets. Could be confusing for first time players. "Did it work?"

We want the player to know without a doubt that they've chosen a set already. How do we do that?

Best thing to do is to create a stark contrast between chosen and unchosen Creep sets. In this revision, chosen sets are converted to colored silhouettes; what this does is remove detail from parts of the screen that are no longer important. Plus, there's a giant "READY" in place of the names. You don't really need to look at those elements anymore after you've picked a set, so the menu shouldn't draw your eyes there. The "READY" tag is also a different color than the Creep nametags, so that even out of the corner of your eye it looks strikingly different than unselected sets.

It... sounds more complicated than it is, but most menus and visual interfaces rely on concepts like this. Only attract the viewer's attention to where it matters, clearly separate unrelated elements, et cetera et cetera. There are many different ways to do these things.

We also want the player to know which set is currently "clicked on" before it's chosen, so we probably need some type of highlight method.

I think a dim white bar should be good enough, but some of these things are subject to change if we can come up with better solutions.

Menus probably seem kind of boring, but I hope this has given a little insight into the thought process of making sure everything's not a confusing mess. Soon I'll be doing the same things for the Towers, so I might have more similar work to share.