TIGSource Forums

Developer => Design => Topic started by: PompiPompi on April 01, 2012, 07:38:35 AM



Title: Good controls for 2D shooting games on touch devices?
Post by: PompiPompi on April 01, 2012, 07:38:35 AM
I am making a 2D game with a 1vs1 battle areanas and a strategy board.
In the battle screen it's 1 character for each player. The character can have a variety of abilities, but they can all walk in 8 directions and shoot\attack in 8 directions.
With a keyboard and gamepad it's pretty straight forward to set up controls for this type of gameplay. However, in a touch device(such as Android), I am more in an unfamiliar ground.
My current controls for the touch device are two cricles. One for the left thumb, and one for the right thumb. The right circle is simpley an attack "button".
The left circle however, plays as a sort of D-Pad?
The left circle sense the touch and gives a pair of data (a, r), where r is the distance from the center of the circle, and a is the angle the line connecting the center and the touch point with the x-axis.
I then make "buttons" by choosing a range of values for a and r to make a button out of it.
The ranges I currently have are r>0.25(r is normalized to the real radius of the circle so it's between 0 and 1) for all the buttons.
And [Pi*0.5/4.0, Pi*3.5/4.0] for up, [Pi*2.5/4.0, Pi*5.5/4.0] for right, [Pi*4.5/4.0, Pi*7.5/4.0] for down, [Pi*6.5/4.0, Pi*1.5/4.0] for left.

So I hope you get the picture.
It works pretty well and have fluid controls. You control the D-Pad by laying your thumb on it and simply dragging it on the circle.
It works pretty well, but it's a bit slowish. It takes time to drag the thumb from top right to bottom left for instance. So I might do a smaller button, or reduce the radius.
I should test those things, but do you have other suggestions of how to do a good 8 directions controller for a touch device?
Edit: to make it clear, you don't need to drag your finger repeatdly to move the character. You just need to place your thumb on the area of the circle that is corresponding to the direction, it happens that the easiest way to move your thumb to that new position is just dragging it on the screen. But you could even just reposition your finger without touching the screen or dragging it.

(This is a video showing an older more sucky control schemes, but it's just to show how the game plays http://youtu.be/Wdr5rsFicsk (http://youtu.be/Wdr5rsFicsk))


Title: Re: Good controls for 2D shooting games on touch devices?
Post by: baconman on April 01, 2012, 12:45:43 PM
That's probably the closest you're gonna get, and I'd huddle the GUI between the controls a bit - give a little space, of course. The alternative is to develop/port to another system, because that's one consistent factor in touch-screen games.

Even making a recognizable controller interface doesn't have the impact a real controller does, because ultimately it's still simply visual. There's no way you're ever going to "touch/feel" the button placement the way you can with an actual controller.

It's just the beast that comes with working on that platform, now.


Title: Re: Good controls for 2D shooting games on touch devices?
Post by: PompiPompi on April 04, 2012, 07:10:59 AM
Yea, this, and I saw the video the paddlnoid guy linked me. Do you think extrapolating could help? I am curious, I might do this little "research" and present my results. Maybe...


Title: Re: Good controls for 2D shooting games on touch devices?
Post by: James Coote on April 04, 2012, 01:47:42 PM
Most people I've talked to don't recommend having two pads and/or just trying to replicate console or pc controllers on touch screens. You are basically giving up a large amount of screen space because the players have their thumbs over that area for the whole game

Also different devices, especially with android, will have different shapes, many of which will not be friendly to being held in two hands with thumbs wrapped around them

Finally, many people play with one hand. Their other hand is holding onto the handrail on the metro, holding a coffee cup, wiping their ass (yes it isn't pleasant, but apparently many people play on the toilet).

Furthermore, having a direction pad does not take advantage of the touch screen at all. There is no proportionality between the shape or distance of the gesture and the corresponding action on screen. Fruit ninja works because it is a fluid gesture and the longer the gesture, the longer the cut, the faster the gesture, the more cuts you can do etc

---

Having actually watched the video of your gameplay, you've got the right idea with the main "chess" board (pick to select, pick to move), but you need a zoom control, maybe pinch zoom or a zoom slider (zoom slider is easier to implement)

In battlemode, there are a couple of options:

you could have a vector between where the player's character is and where the player's finger is on screen, with the character always trying to move towards the finger. That way, the player can drag the character around the screen

This has the advantage of giving the player more freedom to move their character around in a way that is easy to understand. However, the finger is still going to get in the way.

Alternatively, you could have some sort of swipe recognition. If you swipe up, the character goes up one square. Left they go left, bottom right, they go bottom right. The big disadvantage here is the player has to keep shifting the area of the screen they are swiping when the player moves into that area. Also, it leads to lots of repetitive motion for the player's thumbs

For fire, you probably want to keep the fire button for when the player has two hands free, but also have a single quick tap option to fire, or alternatively, tap on a place on the screen to fire in that direction

Having the game landscape implies you want the player to use both  hands, but if you do go down the pads route, have the pad on the right hand side (as most people are right handed) with the fire button either above it, or to the left of it and aligned with the bottom of the screen

(http://img831.imageshack.us/img831/3669/touchideas.png)



Title: Re: Good controls for 2D shooting games on touch devices?
Post by: James Coote on April 04, 2012, 01:52:45 PM
Oh, I just had a thought. If you have a square battlefield, start the players at the top and bottom instead of the left and right

That way, the thumbs are not obscuring them at the start of the battle, and thumbs coming from the left/right are going to get in the way slightly less


Title: Re: Good controls for 2D shooting games on touch devices?
Post by: PompiPompi on April 04, 2012, 10:06:29 PM
Great feedback, thanks.
Yea, I already have zoom implemented on the chess board(with a pinch), I think I will also implement it on the battle board and have a "camera" track the player.
Well, this game isn't ideal for touch devices in respect to controls. I should note that this game also works on a PC(and started off from a PC). So it wasn't really desgined for a touch device.
I think I will try out the "vector touch" controls, but I don't really see too many other options that will make sense with this kind of game.


Title: Re: Good controls for 2D shooting games on touch devices?
Post by: James Coote on April 05, 2012, 01:42:46 AM
Actually, having said all that, this presentation gives a completely different set of reasons why d-pads are not good controls for touch screen:

http://www.gdcvault.com/play/1015404/Controls-You-Can-Feel-Putting (http://"http://www.gdcvault.com/play/1015404/Controls-You-Can-Feel-Putting") (note: this page only loaded for me in chrome and not firefox)


Title: Re: Good controls for 2D shooting games on touch devices?
Post by: hoverX on May 24, 2012, 04:05:06 PM
What I've seen work really well is instead of having a d-pad at the bottom left of the screen have the players thumb movement anywhere on the screen dicate character movement. If their finger slides up, the character moves up etc.  You can see lots of examples of this in shmups.


Title: Re: Good controls for 2D shooting games on touch devices?
Post by: Muz on May 27, 2012, 03:00:57 AM
Personally, I really hate games that try to use a d-pad on a touch screen. I uninstall them almost immediately. They feel horrible, like playing a FPS with a laptop touchpad or a roguelike with the laptop Fn-keys.

The worst part is that you don't know where exactly the center of the circle is. With a joystick, it 'pulls' your finger so you instinctively know where you're aiming at. Touch doesn't have that feel, unless you want to make it vibrate the right way, like how keyboards on touchphones work.

I don't think it's worth spending time trying to implement a d-pad on a touch screen. There's probably a more suitable solution out there.

If you really do want to get a d-pad, try to limit it to just one, and have like the right side push only one button or something.


Title: Re: Good controls for 2D shooting games on touch devices?
Post by: Alberto on May 29, 2012, 03:46:33 PM
I'd have to agree with the last couple of posts about d-pads being a bad idea on mobile. I faced a similar problem with our frogger type game and we just let the player swipe anywhere on screen to move in a particular direction one step or hold to keep moving. That seems to feel much more natural than the virtual d-pad IMHO.


Title: Re: Good controls for 2D shooting games on touch devices?
Post by: Richard Kain on May 31, 2012, 06:06:38 PM
The problem with virtual controls on a touch device is that you need to sacrifice screen space for them. Virtual buttons are never going to be as good as actual buttons. The best way to mitigate that disadvantage is to make the virtual buttons look as much like real buttons as possible. But in order to do that, you have to sacrifice screen space.

I wish you luck.


Title: Re: Good controls for 2D shooting games on touch devices?
Post by: Alberto on May 31, 2012, 08:24:24 PM
Virtual buttons are never going to be as good as actual buttons.

I think this statement is really the key when it comes to touch devices. You'll never have that tactile feel of real buttons so anything else will just be a compromise. Designing a game for touch is where you can really make a game shine, e.g. Fruit Ninja, Angry Birds, Infinity Blade, tower defense games, etc.


Title: Re: Good controls for 2D shooting games on touch devices?
Post by: Medevenx on May 31, 2012, 11:19:28 PM
The best way to mitigate that disadvantage is to make the virtual buttons look as much like real buttons as possible.

Actually this isn't true because in touch devices the gimmick or the simple game mechanic is usually the game itself. They normally have one game mechanic or two which represents the game entirely. Unlike ordinary games on consoles, there are multiple mechanics for the game however on touch devices a single mechanic IS the game.

A good example would be Gravity Guy where the game mechanic of changing polarities is the only action you can do as you automatically move right. VVVVVV used this mechanic but combined with left and right movement that YOU control.

Temple Run has a single game mechanic as well because you CANNOT combine the jumping with sliding as you can either with changing direction.

A game for a touch device MUST be designed for it and shouldn't feel like a port. Canabalt does this very well