iOS Twin Stick Shooter - Player Research

Player Research Guide To ...

iOS Twin Stick Shooter Controls

Twin Stick Shooters are a genre of game which use two controls, typically operated by the thumbs. One control dictates the character’s movement, the other the direction of shooting.

Importantly, these can be operated independently, i.e. it’s possible to move in one direction, and shoot in another.

The camera angle in these games is either from directly overhead, or overhead and from a slight angle. The games are essentially 2D, i.e. there is no forward (or z-axis) movement.

What is a twin stick shooter?

Movement Shooting

Control layoutMovement is almost always on the left-hand side, shooting on the right, some games allow the options to switch this for lefties. This layout is also consistent with twin stick shooters on Xbox 360 and PS3. Minigore on iPhone introduces the controls very clearly.

Minigore

All games are not equal

With only two touch screen controls to implement, you may think that all twin stick shooters are created equal, however it turns out that subtle changes in design can greatly affect the player experience.

The 4 components

1. Static or Dynamic Controls

2. Controls always visible

3. Controls active outside the VJR

4. Play to border

There are 4 main design decisions to consider when implementing the controls for your iOS twin stick shooter.

These 4 components are combined to form alternative control implementations.

Before we take a look at the main varieties and show examples of games which use each particular combination, let’s describe the 4 components.

For clarity, our examples will focus on the movement control, but all comments apply to the shooting control also.

Each component is really a design decision with two options, so we’ll cover each alternative.

TerminologyNo standard definitions exist to describe the interactions we’re about to introduce, so we’ll try to keep them as descriptive as possible.

Most of the terminology will be defined when we introduce the 4 components, however they all have one feature in common, the virtual joystick region (VJR hereafter).

Within this region, thumb contact is registered as control input, if the player’s thumb touches the screen outside of this area, it is not registered as player input.

The solid inner circle represents the player’s point of contact

The outer circle is the limit of the VJR



Component 1 - Static or Dynamic Controls

Static controls

This approach fixes the location of the touch controls, typically they’ll be within easy thumb reach of the corners of the iOS device.

Later we’ll see how component 3, Controls Active Outside The VJR, extends the usability of the static control approach.

Static controls - fixed at corners of the device

Dynamic controls

This approach centres the controls at the point where the player touches the screen, i.e. the controls can change spatial location depending on where the player’s thumb makes contact.

Crucially however, there is one important factor in how dynamic controls are implemented, which brings us on to the second component.

Dynamic controls - controls centre where the player taps



Component 2 - Controls 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.

Applying the thumb will result in the VJR being drawn centred around the point of contactThumb

down

Dynamic Controls - Always Visible

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

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

Lifting the thumb from the screen will result in the VJR remaining visible

Thumb up

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.



Touching inside the VJR with a centre offset will result in unintentional character and camera movement

NB The VJR is NOT redrawn (i.e. old VJR retained)

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 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.

Thumb down

OffsetTouching outside the VJR WILL result in a new VJR being drawn

In practice, this is not common, as it requires a substantial stretch

Thumb down

Previouscontact

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.



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.

Dynamic Controls - Display on touch


Thumb down

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

Applying the thumb will result in the VJR being drawn centred around the point of contact

Lifting the thumb from the screen will result in the VJR being hidden

Thumb up


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).

Touching anywhere on the screen results in the new VJR being drawn at that point. Thumb

down

Previouscontact

Step 3 - The second touchAs 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.



Let’s try and outline the key differences between the two approaches to implementing component 2.



Step 3 - The second touch

Always Visible Display on Touch

Thumb up, VJR remains visible

on release

Thumb down

Thumb down outside previous VJR. New VJR

drawn

Thumb down

Thumb up, VJR hidden on

release

Thumb down, new VJR drawn every

time

or

Key advantage

Key disadvantage

The ‘or’ leads to

unpredictable behaviour

Thumb down inside VJR. No new VJR

drawn

Component 2 dynamic controls comparison - Always Visible vs Display on Touch



Players can move their thumb outside of the VJR and still have control

For dynamic controls, when the player initially touches the screen, the VJR is typically drawn as a circle centred around the point of contact (there are exceptions, we’ll come to those later).The player can then make a sliding gesture to direct movement (or shooting) in the desired direction.

However, as long as the player does not lift their finger off the screen, it is common in most (but not all) games to be able to continue to use the controls outside of the VJR.

This means that the controls will continue to work until the player’s finger is lifted, e.g. dragging left will move their character left etc, however when lifted, they will have to start again by touching within the VJR.

Component 3 - Active outside of the VJR

For static controls, this means that it is only the initial touch that is required to be within the VJR, after that it’s possible that the player’s thumb could drift across the screen.

For static controls, the downside of controls being active outside the VJR is that if (when) the player lifts their thumb from the screen, they have to shuffle their hand back to the VJR in the corner of the screen.

For dynamic controls, this hand position ‘drift’ has less of an affect on the player as if their thumb loses contact with the screen, they can simply reapply it anywhere on the screen and the VJR will be redrawn at that point.

Impact on static controls

Impact on dynamic controls



As we were saying earlier, for dynamic controls the VJR is drawn with its centre point located where the player’s thumb makes contact with the screen. However there is one exception to this, border cases.

Border casesIt most circumstances, when the player’s thumb makes contact with the screen, there will be enough space such that the entire VJR can be drawn so that it fits on-screen.

Component 4 - Play to border

But what happens if the player’s thumb makes contact close to the edge of the screen? In these cases there is not enough space to draw the full VJR, so the designer must make a decision between two approaches, Fit and Centre.

If the player touches the screen near to the border, draw the VJR such that it always fits entirely on the screen.

Player touches where the green dot is located, but VJR is drawn so that it completely fits on the screen.

This approach has the disadvantage that if the player makes contact close to the left hand edge (for example) their character will move left, whereas it’s possible that they were just making contact with the screen and had intended to go in another direction or simply wanted to stand still.

Ultimately, this approach can lead to unintentional player movement.

Approach 1 - Fit VJR

Thumb contact typically touches the screen such that the VJR can be drawn so that it completely fits on the screen



Centre the VJR at the point of contact, regardless of whether it’s near an edge or not.

Player touches where the green dot is located, the VJR is drawn at that exact point

This approach is probably the better design decision as it more closely matches what the player will expect from the controls. In other words, it is more intuitive.

It also has the advantage that the character will never move off in an unintended direction as the VJR is guaranteed to be centred around the point of contact i.e. the centre point is a null input, a ‘do nothing’ instruction.

Now that we’ve detailed the 4 main components that affect the controls of a twin stick shooter, let’s take a look at how these have been implemented in iOS games.

Each game will use a combination of the 4 components, but as we’ll see, some combinations lead to a better gameplay experience than others.

Good, Better, BestApproach 2 - Centre VJR

We’ll now compare five of the most popular twin stick shooters on the iOS platform. All comments relate to the iPad versions.

1. Revolt2. Max Adventure3. Meow Meow Happy Fight HD4. Age of Zombies5. Geometry Wars: Touch

The Games



Example 1 - Revolt

Component SetupComponent Setup

1. Static or dynamic Static

2. Always Visible Yes

3. Controls active outside VJR Yes

4. Play to border N/A

Player Research rating for this control combination

Quite a few complaints on the App store relating to the controls of this game.

From our viewpoint, the static controls make it difficult to control the character smoothly, also causing frequent camera judder.

Changing to dynamic controls would certainly have improved the user experience.

“”

Player Research Comment

Version tested: iPad



Example 2 - Max Adventure


1. Static or dynamic Dynamic

2. Always Visible Yes


4. Play to border No


Although the comments on the App store do not criticize the controls, there are two design decisions here that could lead to unintentional player movement.

1. Play to border is not used, so if the player touches near an edge they will move in that direction, even if they wanted to stand still.

2. The game makes the somewhat unusual decision of using dynamic controls but permanently visible. This means that if the player lifts their thumb but makes contact within the VJR (i.e. a small movement), it will likely result in unintentional player movement. Hiding the controls on lift would have solved this issue.

“

”





Example 3 - Meow Meow Happy Fight HD



2. Always Visible Kind of




A variety on the permanently visible theme here, the VJR has a small core which is permanently visible, then it expands when touched.

The main problem with their implementation is that when you lift your thumb and reapply it, you’ll almost certainly start moving in a random direction. The reason for this is that the sensitivity of the small core at the centre of the VJR is too high.

To solve this issue, a small ‘dead zone’ (inactive region) region around the permanently visible core would have allowed players to tap the screen without moving unintentionally.

“

”





Example 4 - Age of Zombies



2. Always Visible No




These controls feel great, using dynamic VJRs which are hidden when not touched make for smooth and intuitive gameplay.

This combination is almost ideal, but not quite. As the controls don’t let the player tap close to the border without moving / shooting in that direction, means it’s still possible to move unintentionally.

“”





Example 5 - Geometry Wars: Touch





4. Play to border Yes


The controls for the iPad version of Geometry Wars are quite simply divine. They apply best practice in each of the 4 components to deliver a smooth and satisfying player experience.

Incidentally, the iPhone version uses a variation on a static approach, nowhere near as polished as its big brother on the iPad.

“”


Version tested: iPad & iPhone



As a result of analyzing a number of the current twin stick shooters, it emerges that the best combination of the 4 design components in terms of both usability and user experience is:





4. Play to border Yes


Contact UsIf you want to get in touch, or just want to say hello, please contact [email protected]

AboutPlayer Research are a leading video game user experience studio based in Brighton, UK.

Our workWe design and conduct user research on all gaming platforms from iOS, PSN, through to PC, Xbox 360 and PS3, including Kinect and Move.

Advantages of this component combination:- removes unintentional player movement- removes camera shudder - delivers intuitive controls (matches player expectations)- caters for different sized hands / grip position

Now we’re not saying that this is a hard and fast rule, but you’d need to have some pretty good reasons to not design your twin stick shooter with this component combination.

Graham McAllister

Recommendations and Design Guidelines



Date post:	22-Oct-2014
Category:	Documents
Upload:	graham-mcallister
View:	52 times
Download:	0 times

iOS Twin Stick Shooter - Player Research

Documents