Lessons from Suzy Cube: Mobile Controls That Feel Great

#suzycube #gamedev #indiedev #madewithunity 

When people find out that I'm working on a 3D platform game for mobile devices, many immediately ask me what I'm doing to make it feel good to play on a touch screen. Well, in this instalment of Lessons from Suzy Cube, I hope to answer that exact question.

First of all, I want to make it clear that I make no excuses for the touch screen as an input device. For the type of game I'm making it's less than ideal. What this means is that in order to make the controls feel good, responsive and natural on a touch screen I need to do a little extra work than I would if Suzy was only to be playable using a game pad.

Start from the Start

The first step to making Suzy feel great to control on a touch screen is to make Suzy feel great to control regardless of the input device. This starts with the right settings tweaked to the right values. For Suzy Cube, I'm using Unity's own Character Motor script with a standard Character Controller. It's a very robust script that does almost everything I need my character to do, the only problem is that the default values don't feel very good or responsive, so what did I do about it? Well, see for yourself:

Character Motor settings as seen in the Unity Editor

The two key aspects which make the biggest difference are the gravity and the acceleration. I set the gravity and maximum fall speeds nice and high to give Suzy's jumps a weighty feel. I also set her ground and air acceleration values quite high making her able to stop and change directions quickly. These settings make her feel responsive and easy to control. You can make quick, split second, adjustments to your course and speed at a moment's notice.

In order to make the world easier to navigate, I've also spent considerable time getting her speed and jump height just right. You can read about this work in a previous Lessons from Suzy Cube instalment.

These settings make for a great feeling character whether you're playing using a game pad, a keyboard or a touch screen, and that's the most important starting point.

The Right Touch

There's a package available on the Unity Asset Store called InControl by Gallant Games. In short, InControl greatly simplifies working with multiple input methods by abstracting and standardizing controls to a common set of inputs across all devices and platforms. Thanks to InControl, Suzy Cube can easily be played using a standard game pad, like the Xbox 360 Controller, when testing in the editor or using an MFi controller when testing on my iPod Touch. The other thing I get from using InControl is a great set of virtual controls for use on a touch screen. Here's what the touch control layout looks like for Suzy Cube:

Basic touch screen controls layout in Suzy Cube

As you can see I avoid the issue of not being able to feel the buttons by simply splitting the screen into two halves. The whole left half of the screen can be used for movement and the whole right side of the screen can be used as a jump button. Having only a jump button to work with is a rather tight constraint, but a good designer thrives under tight constraints. I'll let you know how I fare.

Let's Get Moving!

So, I mentioned above that the whole left half of the screen can be used for movement, but how exactly does this work?

Basically, I use a floating virtual analogue stick. Those of you familiar with action gaming on your mobile devices will know this as a virtual thumb stick that re-centres itself based on where you initially put down your thumb. This is nice because your player doesn't need to know where the centre of the virtual stick is as the centre is wherever you put it. In addition to this, InControl's virtual directional pad template also comes with a rarer option which makes the virtual direction pad, or d-pad for short, draggable.

Comparing a traditional floating d-pad to a draggable floating d-pad

The difference between the two types of virtual d-pads is that, though both will re-position themselves based on your initial touch, as you reach the extents of the d-pad's movement range, the draggable d-pad will actually move along with your thumb while the traditional floating pad will remain centred around your initial touch.

Why do I find this so significant? Well, the problem with a d-pad you can't drag is that, as your thumb moves away from the initial centre, which is almost inevitable during game play, you lose the ability to make split second adjustments.

Making a quick right to left turn

Imagine, for instance that you are making Suzy run towards the right. Your thumb has slipped considerably away from the centre of your initial touch and now you want to quickly turn around and run to the left. Notice how, using a d-pad that is not draggable, you will have to slide your thumb all the way back across the initial centre in order to start running to the left. On the other hand, since the draggable d-pad follows your thumb away from the initial touch, running left is just a short slide away. In fact, any change of direction is always only as far away as the radius of the d-pad.

Comparison of a 45 degree adjustment

This applies to making course corrections as well. Notice in the example above how, in order to make a 45 degree adjustment to your direction, you will need to move your thumb considerably farther if you've moved away from your initial touch using a d-pad with no dragging. 

The combination of a floating, re-centring and draggable virtual d-pad is a huge part of what makes controlling Suzy surprisingly easy on a touch screen. 

Need a Little Help With That?

The touch controls in Suzy Cube are invisible. When half your screen is devoted to movement and the other half is a big jump button, there's really no need to clutter up the player's view with virtual joysticks and buttons. As an option, though, you can turn on what I call the Helper Arrow. This idea actually comes from my old colleague, Daivuk, who showed me a prototype for a mobile version of one of his Global Game Jam entries which used an invisible virtual analogue d-pad and showed your input instead as an arrow around your character. 

Helper arrow

The arrow tells you everything you need to know about your directional input. First of all, it points in the exact direction of your input. Suzy doesn't turn instantly, the arrow does. The virtual d-pad in Suzy Cube mimics an analogue joystick and, as such, allows you to control the speed of Suzy's movement based on how far you move your thumb away from the centre and the scale of the arrow represents the amplitude of this input. Everything you need to know, right there around your character.

It's a Snap!

Now, having a perfectly re-created virtual analogue joystick able to give you 360 degrees of movement freedom is great, but is it what's best to support the game play?

Levels in Suzy Cube are mostly made up of big blocks laid out orthogonally to form obstacles and platforms. This means that, in almost all cases, Suzy needs to be moving along a particular cardinal direction and deviations only lead to missed jumps and running into hazards you didn't mean to. For this reason, Suzy's movements are actually limited to 16 directions. I did this to strike a balance between the precision of moving in only 8 directions (orthogonally and diagonally) and the freedom of a full, 360 degree range of motion. I guarantee, though, that a player playing without the Helper Arrow, will be hard pressed to even notice that Suzy's movements are snapped to 16 directions.

It's All Relative

The controls in Suzy Cube are what you would call camera relative, sort of. Moving up down left or right is always relative to the way the camera is facing. This is pretty standard for this kind of game and is quite intuitive. This does create a slight issue, though. Sometimes, I might want to turn the camera slightly but not have it affect the player's ability to move parallel to the features of the level.

Camera relative controls VS snapped camera angle

In this example, we see that the camera is turned at a slight angle, about 15 degrees. If the player is holding the joystick to the right, using normal camera relative controls, they will end up running right off the platform since they will be running at 15 degrees relative to the platform. In Suzy Cube, however, the character's movement isn't actually camera relative, not strictly, anyway. Instead, Suzy's controls are relative to the camera's angle snapped to the nearest 45 degrees. This allows the camera to be rotated slightly without affecting the player's ability to keep Suzy aligned with the level, making it much easier to navigate narrow walkways, for instance.

Level Up

Playing on a touch screen simply isn't as precise as playing with a controller. I've already gone over all the techniques used to ensure that the touch controls are as good as they can be. The final piece of the puzzle in trying to make the game feel great happens right in the levels themselves.

Constrain-To-Plane tigger

There are a number of things that I can do while building levels in order to subtly help the player succeed. One example is to use these custom trigger volumes I call Constrain-To-Plane triggers to help align the player. What this trigger volume does is gently attract Suzy toward it centre plane. Optionally, it can be set to only affect Suzy while the player is inputting a movement command, so she can still stop while inside the trigger but will get pulled toward the centre plane while the player moves. It is very subtle, and I have yet to have a single tester even notice that it's happening. Constrain-To-Plane triggers are obviously great to help the player cross narrow bridges but also to help the player nab rows of coins, or power ups. Any situation in which the player is best served by being aligned just right is a good candidate for a Constrain-To-Plane trigger.

Manipulating the camera is another example of the sort of detail that can make all the difference. Camera movements in Suzy Cube are handles by Camera-Manipulator trigger volumes. When Suzy enters a camera trigger, any number of camera settings can be smoothly manipulated such as pitch, rotation, trucking distance and offset. Making sure the camera is properly framing the action is, of course, paramount but there are also more subtle ways in which the camera can help guide the player. One simple way, for instance, is to slightly turn the camera to imply which way Suzy should be running to advance.

The camera angle and position at the start of Level 1-1

This is a screenshot of the start of Level 1-1. Notice how the camera is offset and turned slightly to imply that forward is toward screen right. Also notice that there's an obvious precipice with a guard rail to your left also helping to make it clear that your journey begins by going to the right. There are other, yet more subtle ways in which the camera can be used to even help with controlling Suzy. Since your controls are, pretty much, relative to the angle of the camera, the speed at which the camera transitions from one angle to another will affect how Suzy might, say, round a corner.

Using the speed of the camera transition to help Suzy round a corner

Imagine a pretty typical situation for Suzy Cube in which she might encounter a Camera-Manipulator trigger which will cause a 90 degree rotation of the view angle. Every time I set up a situation like this, I take the time to tweak the speed of the transition so that by continuing to run in the same direction, the camera's rotation will end up making Suzy round the corner perfectly keeping her exact centre line as she does it. It's one of those subtle details that, when done right, the player won't even notice but when ignored simply makes the game feel sloppier that it should.

Go Easy on Me

Finally, in order to make the game feel great to play on a touch screen, it sometimes means adapting to game's challenges to be less punishing on the player. This  requires some intuition and a lot of testing because, as the game's designer, I must accept the fact that I am completely out of touch with how challenging the game actually is to other players.

So the real lesson is that endeavouring to make a game feel great to play means sweating the details, it means putting in the work to find those subtle ways to give your player a helping hand. And, if you do it just right, it's a thankless job, because no one will notice all the little things you've done to make their experience playing your game just that much better. But believe me, they will have an overall better experience playing your game and will walk away from it with a much higher opinion of your product as a whole.

If you have any thoughts on improving touch screen controls or perhaps you would like to point out some games that you think do it really well, please share in the comments!