17 August 2021

Designing Mobile Focused Games

The Problem

You’ve spent weeks (or months) building, tuning, and testing your game. Everything is working smoothly just the way you wanted, and it’s ready to go. All that’s needed now is to export to your device and try it out before publishing. The only problem is, the game uses a keyboard for all controls and now it has to work using only a touch screen.

Luckily, that’s an easy enough fix. You can simply add some on-screen buttons in place of the keyboard keys, and now your game is playable again. Great! Only now the on-screen buttons (and your hands) cover up 1/3 of the screen, and they don’t feel nearly as snappy as the keyboard keys you’ve been testing with. Your fun little game has devolved into an unplayable mess.

Debugging & Crying

Mobile Challenges

Mobile devices present us with a specific set of challenges when designing and constructing our games. The lack of tactile button inputs, missing keyboard, and unpredictable screen size and resolution found on phones and tablets means we have keep these constraints in mind right from the beginning if we want to create an experience that our players will enjoy.

No Buttons

The biggest challenge by far when designing for a touch screen is the complete lack of buttons and keys that are available on other platforms.

One workaround for this problem is to simply add on-screen buttons in place of the keyboard keys or controller. Here’s an example:

While this technically works, it’s rarely a great compromise for a few reasons.

  • The buttons don’t provide any haptic feedback, leading to frustrating misclicks or missing inputs
  • The buttons take up valuable screen real-estate on what could be an already tiny play area
  • The player’s hands now cover even more of the screen, obscuring the action

Embracing Constraints

The enemy of art is the absence of limitations.
Orson Welles

The most successful games embrace this limitation instead of attempting frustrating compromises. Here are some ways to make your game fun to play even without having precise controls.

Simplify, Simplify, Simplify

Complex controls requiring lots of inputs generally don’t work well on touch devices. Try to hone your controls down to only the simplest possible core. As an example, see how Super Mario Brothers became Super Mario Run on mobile. The designers knew that Mario’s jump was the most important core mechanic, so they stripped away everything else so the player can focus on jumping.

Super Mario Run

Avoid Tiny Buttons

It’s difficult enough to tap a small spot on the screen consistently, and it’s even more frustrating when trying to focus on the gameplay. Don’t make your players target a tiny button to play your game.

Keep in mind that your players might be using a large tablet or tiny phone screen, they might be sitting in a car, or standing in line, and they might have large or small hands. Provide them with a generous area to target with touches, ideally the whole screen, or at least half.

A great example is the Flowlab Game Focus II by CrimsonBlackGames. You play by touching one half of the screen to rotate clockwise, or the other half to rotate counterclockwise. It’s nearly impossible to click the wrong place, and allows you to hold the device many different ways.

Consider Direct Manipulation

One advantage provided by touch screens is the ability to touch and manipulate the game directly, instead of using an indirect pointer such as a mouse. This opens up the opportunity to use swipes or gestures as an altertive control mechanism.

The most common gesture is the swipe, which most users will understand naturally, but more complex gestures if used creatively can offer unique game mechanics. As an example, see the Flowlab game The Illusionist which has the player tracing out patterns in order to cast magic spells.

To recap, keep these in mind when designing your game to ensure a great player experience on mobile and touch devices:

  • Start out with mobile in mind - don’t try to shoehorn existing inappropriate control schemes onto a touch screen
  • Refine your mechanics to use the simplest possible controls to eliminate player frustration
  • Avoid tiny buttons or lots of buttons that have to be found & hit quickly
  • Consider coming up with creative ways to use gestures and manipulation

And remember that simpler is almost always better when it comes to mobile game mechanics.

‘Debugging and Crying’ screenshot from Naruto SUN Storm 4