Gamasutra is part of the Informa Tech Division of Informa PLC

This site is operated by a business or businesses owned by Informa PLC and all copyright resides with them. Informa PLC's registered office is 5 Howick Place, London SW1P 1WG. Registered in England and Wales. Number 8860726.

Gamasutra: The Art & Business of Making Gamesspacer
Let's Talk About Touching: Making Great Touchscreen Controls
View All     RSS
August 3, 2020
arrowPress Releases
August 3, 2020
Games Press
View All     RSS

If you enjoy reading this site, you might also want to check out these UBM Tech sites:


Let's Talk About Touching: Making Great Touchscreen Controls

February 22, 2013 Article Start Previous Page 2 of 4 Next

Case Study #1: Jetpack Joyride

You might have played Jetpack Joyride. It's a casual, free-to-play, monetized, mobile game -- all those buzzwords -- though it's also an action game, and its central action is tuned to a level of nuance on par with any individual gun in Halo.

In Jetpack Joyride, the player touches the screen -- anywhere -- to fire the character's jetpack. The longer the finger contacts the screen, the longer the jetpack fires. A short burst and then release will move the player-character less than halfway up the screen. A longer hold will bump the character's head into the ceiling. To obtain skill at the game, the player must master tapping and releasing as obstacle-context requires, juggling the character eternally between positions that are neither precisely the top nor precisely the bottom of the screen.

Jetpack Joyride is tenaciously feel-balanced. The speeds of by-jetpack ascent and by-gravity descent are locked in a tastily lopsided yin-yang. Jetpack Joyride is what happens when a game gets even one thing truly, actually, perfectly right: millions of downloads.

I first played Jetpack Joyride as someone who had tremendously enjoyed Canabalt, the pioneer of the "endless runner" genre. Canabalt is another game that gets one thing truly -- actually, perfectly -- right. Canabalt is about tap-hold-duration-sensitive jump heights with inevitable gravity. It's about the beauty of parabolas. (Action games are almost universally about parabolas.)

As your character accelerates, his maximum and minimum jump distances grow; the shape of his minimum jump parabola becomes an oddly stretched caricature of its original self. The game becomes "unpredictable" until you master the feel of it.

Canabalt and Jetpack Joyride are games that most players have experienced exclusively with a touchscreen, though they are also highly playable with a mouse -- as their Flash and Facebook versions, respectively, indicate. Therefore, it's probably better to call them "one-button" games; they work well on a touchscreen, since a touchscreen is a big button, but touchscreens do not have to be one-button games.

In all sincerity, I say that Canabalt and Jetpack Joyride, two games whose creators I presume love Super Mario Bros., have actually demonstrated a masterful understanding of that game's playful friction. But is it possible to make a one-button Super Mario Bros.? By god, no.

Super Mario Bros. is not just about the fine manipulation of jump parabolas through button-press durations; it's also about direct manipulation of running speed. When I was a kid, you knew another kid knew what was up in Super Mario Bros. if he was holding the controller perpendicular to his torso, buttons out, thumb keeping the B button depressed.

Narrating the experience of parkouring through World 8-3 is no easy task: It'd be a Morse code of taps and releases of the A and B buttons, with B held down most of the time and only let go for 15 to 20 milliseconds at a time as obstacles or enemies demanded it. Super Mario Bros.'s mechanics are deceptively rife with moving parts, and there's probably at least two whole textbooks to be written about the friction when Mario slides to a stop before changing direction.

If we remove the ability to change direction from Super Mario Bros., and make it a two-button level-based runner, where one button is "continuous horizontal thrust/acceleration" and the other button is "jump," well, now we're getting somewhere. Touch your left thumb to the left side of the screen to make your character accelerate; release to decelerate. Touch your right thumb to the right side of the screen to jump. (I can't think of any mobile games that use this scheme, though if you've made one, please tell me -- I'd love to play it.)

Now we just need to super-fine-tune the acceleration rate, the top speed, the deceleration rate, the jump-height acceleration, the jump-height cutoff, the speed of gravity, and craft interesting multiple-level paths and enemy behaviors. Do all that, and you've made something pretty Super-Mario-ish without using more than two buttons or a touchscreen.

Of course, this two-button Super Mario Bros. would also be about 27 Rubik's Cubes-worths more complicated than Canabalt and Jetpack Joyride duct taped together. It'd be like Canabalt: Stick-Shift Edition. Developing it into a successful product would be a nightmare (if not multiple nightmares).


During the prototype phase for my studio Action Button Entertainment's upcoming hyperkinetic touchscreen mindsport FASTERBLASTER, I hit a brick wall in my attempts to explain the way the player's avatar should rotate.

The avatar is, at the end of a movement, always pointing upward; the device is always in portrait mode; the camera is rotating along with the avatar.

Our second prototype made us seasick, because the camera rotated at the exact speed as the avatar, and the avatar's direction related one-to-one with the position of the player's finger on the bottom edge of the screen. To return to the Pong example, it would be kind of like tweaking a Pong knob one millimeter counterclockwise, and then finding yourself suddenly standing in the arcade parking lot.

Only enemy formations could lend context to FASTERBLASTER's grotesque spiral. I had this quirky idea that the player's finger-touchdown point should correspond directly to a clock-face position. Assuming the avatar begins pointing to 12 o'clock despite no touch input, touching the left edge of the screen would point the avatar to 6 o'clock. The right edge, also, would point the avatar to 6 o'clock. Now, the very center would point to 12 o'clock; left-center would point to 9 o'clock, and right-center would point to 3 o'clock.

In FASTERBLASTER, the player charges up grenades and then lobs them at enemies who are constantly advancing from all directions. The grenades' destination point is constantly fluctuating between the tip of the triangular avatar and the upper edge of the screen. Each up-down pump increases the charge level of the grenade, which increases the radius of its explosion if it contacts an enemy.

So it's important to be able to hold onto your bullet while it's charging and shift your aiming position easily. The bullets charge quickly, and the target cursor moves quickly. The enemies move quickly, and the travel time of the player's grenades is balanced to enforce maximum friction.

It's just -- that sliding. Lord, it just about gave me an aneurysm.

Part of the problem was the size of the iPhone screen. The ratio of my thumb-tip-width to total width of the screen in portrait mode to circumference of the playing field (in iPhone screen heights) was hardly golden. An iPad Mini (the target platform) is just fine, because the travel speed of the average person's finger across that real estate yields a sensible enough rotation speed. On an iPhone, though, forget it.

My pride cried. I'd believed in the FASTERBLASTER pre-prototype controls, because they'd worked so well in ZiGGURAT.

Or had they?

Article Start Previous Page 2 of 4 Next

Related Jobs

Disbelief — Chicago, Illinois, United States

Senior Technical Artist
innogames — Hamburg, Germany

Junior Game Designer - Level Design - New Mobile Game
Plarium Michigan Studio LP
Plarium Michigan Studio LP — San Mateo, California, United States

UX Designer
Airship Syndicate
Airship Syndicate — Austin, Texas, United States

Senior VFX Artist

Loading Comments

loader image