In April, as we geared up for GlitchCon, we took time to engage in one of the great pleasures of game-making, User Experience design. Today, I present four stories of making player gadgets (special attacks) as intuitive and pleasurable as possible.

Spike’s Shell Block: A Defensive Demonstration

We’re starting big. This is one of the most hard-wrought parts in the game for us, and has undergone at least a dozen revisions during Fingeance history. We think we’ve finally nailed it.

Shell Block enables Spike to use his body to shield the team from attack. To be specific, it enlarges Spike’s body and gives him a substantial shield that prevents him from taking damage. Turn it on, and you go from regular character to indomitable protector. Right now, this might be the marquee gadget in our game, since it so clearly enables a non-aggressive role. You see this thing in action, and instantly know you’re not playing a garden-variety shoot-em-up; you’re playing a team game, and everyone has a part to play.

Problem 1: “What is this gadget for?”

That brings us to the flagship problem. People don’t expect a defensive special ability in a shoot-em-up, especially one that expects you to absorb bullets with your body. That would be anathema in something like Touhou, Ikaruga, or Jamestown.

For months, we saw people activate this ability, then huddle in the back, behind their teammates. Alternatively, they’d confusedly run into enemies, expecting to deal damage. The idea of a part that functions helps you take rather than deal damage was lost.

The Solution: Piggyback on expectations from other genres.

To solve this question, we tweaked the player’s health bar to match what you’d expect in a MOBA or fighting game. As you can see below, we added a flashing shield bar to players’ health bar.

Additionally, we added two graphical features that adjust as the player takes damage, as explained in the next problem/solution.

Problem 2: “When does Shell Block end?”

Shell Block makes you a badass, but only for so long. While the shield is up, you take zero damage, but as soon as it runs out, you’re back to normal. Picture it: the shield is full, so you charge into a cloud of whizzing projectiles. You take the first ten like a champ, but then the shield is down, and suddenly you’re being shredded just like (gasp!) a normal character.

Health is precious and healing is rare. Mistakes – like running out of shield when you’re not expecting to – can be devastating. We saw player after player get gutted at the terminus of Spike’s shield, so we knew something needed to change.

The Solution: Give shielding clear and non-binary graphical effects.

Our fundamental error was representing shielding in a binary way: showing you that it was on or off. We weren’t doing enough to represent the close-to-wearing-off state. To make it clear when the shield is moments away from expiring, we took three steps:

1. We added a shielding bar to the players’ health bar, as seen above.
2. We made a shielding particle effect (those swirly blue and green crescents) that gets thinner as the shield fades.
3. For Shell Block, we tied Spike’s current size to the amount of shield remaining.

Finally, we made a mechanical change: shields no longer time out. In the past, Shell Block lasted two seconds, so at the end of two seconds, the shield vanished all at once. Now, the shield gradually loses health, expiring only when the health reaches zero.

Sparky’s Teleporter: A Transit Triumph

From big to small: the Teleporter is a tiny player in the scheme of Fingeance. It helps Sparky, one of our high-damage characters, fulfill her special role as a high-speed assassin.

The thrust of the Teleporter is simple enough: teleport from place to place, hopping safely over enemy bodies and bullets. Inside Escape Industries, Sparky is among our favorites, and the Teleporter is a big reason why.

Problem 3: “Where will I end up?”

The teleporter uses a simple cursor – a dot – to indicate where the player will teleport. The trouble? There are LOTS of dots in this game. When you use the teleporter, the cursor can get visually lost among dozens or hundreds of enemy bullets.

The Solution: Add visual elements wholly unlike bullets.

To set the cursor apart, we added two traits:

1. The cursor now pulses.
2. A thin line now appears between the cursor and the player’s hull.

Small. Simple. Revolutionary. Stephen threw on the line in minutes, and made Sparky feel all-new. With the “where will I end up” question so clearly answered, Sparky players will be able to weave between enemy bullets with ease. Vulnerable back-line enemies beware!

Sparky’s Light Strike Array: Charge-up Challenge

Let’s hop back to a big issue: charge-up parts.

The Light Strike Array is one example of a gadget that builds up charge. It can be released instantly for moderate damage, or charged up fully to deliver massive punishment.

Problem 4: “Why isn’t this doing anything?”

Anyone who’s made an action game will relate to how bewilderingly difficult charge-up parts can be to make. Everything else in the game feels so responsive: hit a button, see the effect. Here, you’re making an ability with intentional lag-time between input and effect. Do it wrong, and one of two things can happen:

1. The player will hit the button, see no effect, and conclude nothing is happening.
2. The player will hit the button, see a charge-up indicator, and conclude that the indicator is the effect, and become baffled by the apparently effect-less ability.

Charge-up abilities, as a class, have eaten more of my time than any other feature. I’ve seen players struggle, question, and throw up their hands. I’ve seen players play an entire campaign without figuring them out. I’ve seen players give up on gadgets entirely. Perhaps moreso than any other problem, this needed to be fixed.

The Solution: Add a visual with a clear end point AND add a riser sound effect.

Sparky’s Light Strike Array (LSA) was where we cracked charge-up abilities. It’s no coincidence: the LSA has two features that helped us discover the right way to execute these powers in Fingeance.

First, the LSA’s firing spread changes as you charges. If you fire it off instantly, it produces a wide cone of diffuse bullets. As it charges, the arc of fire narrows down slowly, becoming a straight line at maximum charge. This led us to our first discovery: when we added arrow indicators to show the area of fire, people started charging the LSA. Suddenly, it had become obvious that something was happening when you held down that button. Better yet, there was a definite end point: when those arrow indicators touch, you know it’s fully charged. To us, it seemed as though players’ curiosity was piqued. They experimented with both uncharged and fully-charged shots until their understanding was complete.

Second, the LSA has a theme. Like Sparky, it’s all about electricity. That meant finding sound effects was easy: we just went to our bank of electrical SFX (thank you 99sounds.org!). Our breakthrough, obvious in retrospect, was that adding a rising sound during charge-up strongly reinforces that both “something is happening,” and “something is getting bigger,” encouraging you to keep going and see what happens next.

Resolution: Better User Experience, Easier Design

I hope you enjoyed a small look into Fingeance user experience design. At this point, you might be left with the question, “you aren’t done making content yet. Why are you polishing?” The answer is that we’ve slowly learned the importance of intuitive player tools for testing. Too often, we’ve tested for hours only to walk away with data muddied by players who simply didn’t know what they were doing. We look at User Experience work as a tool to improve testing and balancing down the road.