Engineering ROBLOX for the iPad, Part 4 (Control Design)

November

19, 2012

by Andrew Haak


Archive

ROBLOX Battle on iPadThus far, our Engineering ROBLOX for the iPad series has focused on iPad development through a performance-optimization lens. It has seen us go into the trenches with several ROBLOX developers to learn about and document their roles in building a stable, smooth mobile gaming experience with the unique challenge of user-generated content as the centerpiece. In the final installments of the series, we’ll stray from the path and look at the development of interactive components, starting with control design.

ROBLOX Game Engineer Ben Tkacheff is an expert when it comes to iOS controls. He’s played a lot of iOS games and cites Gameloft’s titles as examples of consistently good, mobile-optimized controls. First-person shooter N.O.V.A. stands out to Ben; the game is unabashedly reminiscent of the Halo series, but it isn’t just a console game ported to iOS – it’s a mobile game, in large part due to great controls. For example, players can execute a 180-degree turn quickly – that is, without having to flick across the screen more than once – and camera movement is free-form, rather than tied to a virtual joystick that mimics an analog stick. These are both examples of controls that work with touch screens, rather than around them. That was the kind of approach Ben took to designing a mobile control scheme for ROBLOX.

iPad Control LayoutIteration

If you look at our original video of ROBLOX running on iPad, you can see the controls’ primitive beginnings: touch the top of the screen to move your character forward, touch the right side to move your character right, etc. We experimented with virtual W, A, S and D keys for character movement and buttons for various game actions. In the end, we agreed on a goal of using as few buttons as possible. Today, character movement involves just a few buttons.

  • Virtual joystick for character movement: this activates when you touch within an area that is 33% of each screen dimension in the lower left-hand corner, then moves with your finger until you end the touch.
  • Tap replaces left-mouse click: as long as you release your finger within 0.16 seconds, it will register as a tap in the game engine. The tap can last longer on graphic user interface (GUI) elements.
  • Touch and drag in any direction for camera panning: once your finger stays on the screen (not on a GUI element) for more than 0.16 seconds and you drag it more than 10 pixels, it registers as camera movement.
  • Pinch to zoom in/out: players can zoom in and out by placing two fingers on the screen (not on a UI element) and using the pinch gesture, which is common throughout iOS apps.

The pinch-zoom was one of the toughest control challenges. It has become the go-to method of zooming in and out on iOS devices, but it does limit our ability to, for example, simultaneously use two separated fingers to rotate an object in a building game. Some alternatives are a zoom slider that players could show and hide, and three-finger, up-and-down swipes. For ROBLOX gameplay, the fast and intuitive pinch method won.

There is a unique aspect to the pinch-zoom on ROBLOX: both of the player’s fingers must touch the screen within milliseconds. Without that requirement, we might end up interpreting two separate touches – for instance, interacting with a UI element and panning the camera – as the start of a zoom. This could cause inadvertent zooming and disorient players.

MouseMultitouch

ROBLOX launched before touch screens went mainstream, so our code was designed to handle mouse and keyboard user input. In order to recognize the more complex user input of iOS devices, where multitouch creates the equivalent of simultaneous mouse clicks, we had to rework existing code.

According to Apple’s developer library, here’s how multitouch works:

iOS recognizes one or more fingers touching the screen as part of a multitouch sequence. This sequence begins when the first finger touches down on the screen and ends when the last finger is lifted from the screen. iOS tracks fingers touching the screen throughout a multitouch sequence and records the characteristics of each of them, including the location of the finger on the screen and the time the touch occurred. Applications often recognize certain combinations of touches as gestures and respond to them in ways that are intuitive to users, such as zooming in on content in response to a pinching gesture.

Multitouch - Pinch

Implementing multitouch support required that Ben write delicate code – he had to add recognition for iOS input while maintaining existing user input code. Essentially, we added a new “platform-agnostic input layer” between our engine and the platform on which ROBLOX is running (iOS, Windows, Mac OS X). While each platform used to emulate a pattern of the platform before it, which was starting to be less than ideal, we now give each platform control as to how to interpret input. We write this code in a project specific to each platform, and it sends platform-specific input commands to the engine.

This has the added advantage of increasing the portability of ROBLOX. As we consider expanding to platforms and devices in addition to iOS and iPad/iPhone, we have an efficient method for receiving input and distributing it to the game engine.

Here’s an example of how complex multitouch can be in a ROBLOX game. These touch events show what might happen when a player uses three simultaneous touches to move their character while zooming.

  1. Touch #1 down: initiates virtual joystick, allowing player to move
  2. Touch #1 moved: player begins moving around the level
  3. Touch #2 and #3 down: both touches occur within a few milliseconds of each other; we interpret this as a pinch gesture
  4. The distance between Touch #2 and Touch #3 decreases, causing the camera to zoom in
  5. Touch #1 up: character movement stops
  6. Touch #4 releases, meaning the pinch event is no longer valid
  7. Touch #5 may still be down, but the engine does not respond to any of its events

Analog movement

If you’re playing ROBLOX on a desktop or laptop computer, you’re probably using a combination of mouse and keyboard to control your character. And regardless of what key you use to move, there is only one speed: the maximum. On the other hand, if you’re playing ROBLOX on iPad, the virtual joystick functions like an analog stick on a modern game controller. There is a full range of motion and each part of that range corresponds to your character’s movement speed.

Since different movement speeds are not supported on the PC and Mac versions of ROBLOX, Ben had to write new code for the iPad version of ROBLOX. This process required careful manipulation of the character’s walk speed, as it is a variable ROBLOX game developers can customize. For the actual mechanic of the joystick, we take the distance from the center of the joystick to the center of the thumb stick to determine the magnitude. The direction the character walks is a function of degrees from “up” on the joystick, crossed with the direction the camera is pointing (the character is not always looking the same direction as the camera).

Testing, Tweaking and Tuning

Between setting the parameters for determining whether an interaction is a tap, drag or pinch, and writing new code to facilitate multitouch and analog movement, we introduced many changes to ROBLOX’s controls for the iPad. Yet, when you sit down and play it, you get the same feel to which you’re accustomed. According to Ben, that’s the result of hours spent playing and testing.

Ben describes his process as tweaking variables – for example, the threshold at which a tap turns into a camera pan – testing them in-game, then rinsing and repeating. The range of what feels right is very small, but getting there and finding a balance takes time.

[do action=”youtube-iframe” videoid=”jDkPbx2ts4A”/]
Above: ROBLOX mobile controls in action.

We held regular office playtests, which gave in-house ROBLOX experts a chance to experiment with the controls and provide feedback. We even had local ROBLOX users come to our office and test ROBLOX for the iPad. Ben said one of the most common behaviors he observed was tapping on the screen to shoot a gun or swing a sword, even when there was a visible button dedicated to such an action. We’ve decided to keep the button, however, because tapping on the screen to shoot a gun can cause a re-orientation of the camera, making it difficult to hit a target.

There are other interactive elements – the Content Team’s updated, mobile-friendly user interface and, of course, games – and we’ll cover their development in the next Engineering ROBLOX for the iPad article. For now, if you’re an iPad 2+ owner, check out the latest version of ROBLOX Mobile in the iTunes store. You can test our mobile control scheme today.