Entries in dpad (1)

Wednesday
Oct272010

5 iPhone game control design pattern cheat sheets - gestures, tilts, d-pads, sticks and buttons fight it out

Pretty much what it says on the tin - certanly not comprehensive, but you'll see a significant chunk of popular iPhone titles covered by some form of the control patterns below.

Other than in this sentence, i've deliberately omitted mention of the iPad. Whilst it obviously supports all of the patterns here, we've not yet seen it shine as a dedicated gaming platform. This will certainly happen (and we hope to be part of that) over the course of the next 12 months and at that time it may be more sensible to look at control patterns.

1. Gesture

Gesture-based control patterns rely on the user completing gestures (swipe, pinch, multi-touch etc) to interact with the game. Frequently used, but rarely excellent.

Often the gesture corresponds directly to some physical aspect of the game world (e.g. cutting a rope in Cut the Rope, operating a catapult in Angry Birds).

Examples:

Considerations:

  • Gestures need to be simple - especially on iPhone-sized devices.
  • Gestures need to be reliable - if users can't complete the gesture 99% of the time they're going to get frustrated.
  • Gestures work best when they are simple abstractions of the game world (slicing fruit, cutting ropes etc).

 2. Tilt

The user's physical manipulation of the device (via the accelerometer) translates directly to the adaption of the game world.

Generally implemented with one (Dead Runner, Real Racing) or two (Tilt to Live, Labyrinth) axes.

Examples:

Considerations:

  • You're immediately eliminating the audience of people either don't want or can't use the accelerometer - every try playing Labyrinth on the subway?
  • Calibrating control input is hard - users expect such things to just work.

3. Virtual D-pad

Yuck. But there's a lot of them, so here we go. Users interact with a "virtual" version of a traditional game controller (think NES controller as there's really not much scope for anything more complicated).

Examples:

I actually can't find any on my phone right now -- this is how much I love them -- but they're not hard to come by, see:

Considerations: 

  • It's really difficult to emulate the feeling of tactile, discrete buttons with a single, flat surface.
  • The controls take up a significant, and permanent part of the screen.
  • Choosing a virtual d-pad for an iPhone-native original title doesn't show much in the way of understanding the strengths of the platform.

4. Virtual analog sticks

Not actually the same as a virtual dpad. Users touch and drag their finger(s) to simulate the behaviour of a traditional controller's analog sticks.

Some titles (e.g. Geometery Wars: Touch) allow the user to initiate control of the analog stick from any part of the screen - i.e. the point at which your finger touches the screen is used as the origin/center of the virtual stick.

Examples:

Considerations:

  • Virtual sticks have no physical limit to their movement, and as such it's easy for the players finger tip to wander further than the maximum control extent in any one direction - presuming you don't just cancel the input and return the stick to it's origin (this would be ridiculous - but it has been done), this can lead to imprecise reflexes and reactions, over compensation and general frustration.
  • Requiring the user to retain a position on the virtual analog stick can get tiresome - make sure the game design allows for the "rest" position (i.e. no fingers on the screen) or regular breaks.

5. Buttons

The user interacts with objects in the game world directly, by tapping on them like buttons. Where the user taps, a thing happens.

Objects are also often draggable (e.g. a turret in geoDefense) - this is effectively a click-and-drag-like movement, but for the purposes of game design is started with the same (button) action.

Examples:

Considerations:

  • The user won't be able to see what they're tapping on, when then actually tap on it. It makes this useless for an environment where things are moving fast.
  • I've got huge thumbs. And so have a lot of people - precise tapping on small objects is difficult to get right. Apple recommends 44x44 pixels (88x88 on the Retina display) - that's only 7 discrete buttons across the width of a portrait screen. Drop7 gets around this nicely by showing a cross hair (that extends to the edges of the screen) when holding a tap gesture.

To conclude

This is by no means comprehensive - there are notable exceptions including the line-drawing of Harbour Master/Flight Contnrol and the Cannabalt-perfected single click.

Really interesting results can be had when the above patterns are combined in complementary ways - such as in Rolando (tilt + gesture) or Chopper (tilt + buttons).