ROBLOX Battle on iPad

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

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.

About Andrew "blockhaak" Haak

Sr. Communications Manager. blockhaak on ROBLOX; @andrewjhaak on Twitter; blockhaak on Twitch.

152 thoughts on “Engineering ROBLOX for the iPad, Part 4 (Control Design)

  1. gon600

    THANKS ROBLOX! This is awesome! I’m getting an iPad 2 for my birthday in January and I’m so excited to play this when I get it! Thanks for doing what others couldn’t!

  2. RosetheCutie

    May I say, very impressed ROBLOX! Just downloaded for FREE! Way better than MineCraft, lets hope in the future there will be more games and adding speaking! But you should be very proud! Well done ROBLOX!

    1. ZtarrgusIslander3

      Well actually, its not. Minecraft is a game about survival, and it uses a bit of logic as well. Unlike rob lox, who is all for fantasy.

    1. mac564 (not allowed to use my real name.)

      yeah it’s probably not gonna come out for another month or two and your asking them to work on it for more mobile items!There way harder to program than the i,pad items so just be happy with what you got!

  3. Unwillingly

    Im actually looking forward to this, I use an ipad myself very frequently. So, I’ll be enjoying this! Nice job, Roblox.

  4. likeablejohny90

    people this is a hard work and right now they can only get it for the ipad and ipod touch. im sure in the future they will add it to ipad mini and iphone just be patient

    1. McCloud11

      Your not an Apple Expert are you, haha?
      iPhone and iPod apps are the SAME!!!!
      iPad mini is a mini iPad 2 with siri.
      So either you got mixed up or you think your smart, making up stuff isn’t cool!

  5. Merely

    I think they should add it for Iphone aswell, just telling them a opinion. Not like it’s gonna be heard…

    1. Melhem

      I dont really agree with that, not because the Iphone cant support it, Well i think i wont and also it is TOO small to play on

  6. Lightvvv

    people this is in beta and is still barly compatible with some people ipads u cant even do half the pc stuff yet you are asking questions that wont probably come in 3 weeks! and on top of that your already asking for this to be made on other devices when this is still barly made!

  7. Muppert5000

    Will this be compatible with the new iPad mini? Just wondering because it has almost the exact same chip as the iPad 2 (iPad 2= A5 X) (iPad mini= A5)

    1. McCloud11

      Nonono actually iPad mini has an A5 processor yes but so does the iPad 2, the iPad mini is a smaller iPad 2, the iPad 3 has an A5X and the iPad 4 A6X.
      So yes it does everything the iPad 2 will be able to do.

  8. GalladeX62

    I always tried doing the impossible but I always failed :l, but I just want to ask Shedletsky 1 question: Is it possible to make ROBLOX for the iPhone 3/4/5 as it did with the iPad?

    1. McCloud11

      iPhone 4s and 5, and iPod touch 5 will be available near Christmas then when it gets closer the will try to add support for A4 devices like iPhone 4 iPod touch 4 and iPad 1, 3GS might not be so lucky though.

  9. ultrapierce

    also if you dont know about the nook its by barns and nobel and its a tablet reading and game tablet thing.

  10. ultrapierce

    im so excited sorry about my spelling but anyway i hope you guys make it on the nook idk about that but ill be happy if it is ps i hope theres guests in the game.

  11. glosgreen2

    Will this come to iPod 4+, iPhone, and Android (Such as Nexus 4, Nexus 7, or Nexus 10)? I really want to be able to play ROBLOX on my iPod 4 and Nexus 7.

  12. Nathonkk

    You should add a another hat to make people use the IOS App to make it more popular when you download it. The Roblox Tablet only applies to the rich people in roblox who can buy it. But if you add a free hat when you use the app it will attract a lot more people.

Comments are closed.