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
A Guide To iOS Twin Stick Shooter Usability
View All     RSS
May 19, 2019
arrowPress Releases
May 19, 2019
Games Press
View All     RSS

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


A Guide To iOS Twin Stick Shooter Usability

March 30, 2011 Article Start Previous Page 2 of 4 Next

Component 2: Controls Always Visible

Dynamic controls can be displayed in one of two ways: Always Visible, or Display On Touch.

Always Visible. The always visible approach draws the VJR where the player touches the screen, and keeps the controls displayed there even if they remove their finger.

Depending on the spatial location of where the player makes contact next, the technique will decide whether to draw a new VJR, or retain the original (we'll clarify this in an example shortly).

Deciding whether to make the VJR always visible or not is more than just a visual feedback issue.

If the player lifts their thumb from the screen and the controls remain drawn, then the player has to put their thumb back again in the exact same spot, otherwise it can cause undesirable player and camera movement.

Let's see how this can happen in more detail by looking at a simple example of the player touching the screen, lifting their thumb, then re-touching the screen again.

Step 1 - The first touch

Let's assume the game has just started and the player is about to touch the screen for the first time. When they make initial contact, the VJR is drawn for the first time.

Step 2 - Thumb release

At some point the player is likely to lift their thumb from the screen, at which point, the always visible approach will keep the VJR drawn.

Step 3 - The second touch

When the player reapplies their thumb to the screen, one of two possible scenarios can occur.

Scenario B, in particular, is the cause of many user experience issues with twin stick shooters.

Step 3 scenario A - touch outside the VJR

If the player's thumb makes contact outside the VJR, then a new VJR will be drawn with the new point of contact as the centre.

In other words, if the distance between the previous and current points of contact is greater than the radius of the VJR, a new VJR will be drawn.

Step 3 scenario B - touch inside the VJR

In this case the player's thumb makes contact within the current VJR, resulting in the character starting to move in that direction. Of course it's possible that the player's thumb may make contact in the exact centre of the VJR, in which case no movement would occur, however in practice this is unlikely.

It is this offset placement that makes fine control difficult, leading to player frustration. Also, depending on how the camera has been implemented in the game, any character movement could also cause camera movement. This means that this control combination will not only result in difficulty with fine control, but also cause camera shudder.

Camera shudder and unintentional movement are particularly noticeable in cases where the player wants to move one direction, e.g. left, but their thumb touches the right side of VJR to begin with.

Display on Touch. The alternative, and more common approach, is to only display the VJR when the thumb is in contact with the screen.

So if the player lifts their thumb from the screen the VJR is hidden. When the player makes contact again, the VJR is drawn at the new location.

Using this approach, the player's thumb is always at the centre of the VJR, leading to smoother and more predicable control.

Let's look at the same example as before, only using the Display on Touch approach.

Step 1 - the first touch

For the initial touch, the situation is the same as with the Always Visible approach.

Step 2 - thumb release

This step is the key difference, and benefit to this approach. When the player lifts their thumb, the VJR is hidden from view (not drawn).

Step 3 - the second touch

As the VJR was hidden from view on thumb release, this means that wherever the player touches next will always be the centre of the VJR.

This leads to predictable (intuitive) player controls.

The key differences between the two approaches to implementing component 2. (Click for larger version)

Article Start Previous Page 2 of 4 Next

Related Jobs

Dream Harvest
Dream Harvest — Brighton, England, United Kingdom

Technical Game Designer
DigiPen Institute of Technology
DigiPen Institute of Technology — Redmond, Washington, United States

Assistant Profesor
DigiPen Institute of Technology
DigiPen Institute of Technology — Redmond, Washington, United States

Assistant Profesor
Deep Silver Volition
Deep Silver Volition — Champaign, Illinois, United States

System Designer (Player Progression)

Loading Comments

loader image