Making (or emulating) a “D-Pad” on a touch-screen; virtual d-pad

Question

With the proliferation of touch based devices, many lacking a true D-Pad, I'm wondering if anyone has any resources on how to emulate a D-Pad on a touch screen? I'm specifically interested in XNA and/or Android code examples.

Answer 1

There is an XNA sample of touch thumbsticks here

I would reiterate that a dpad is unlikely to be the right interface for a touch screen like device.

Something like what epic has done with Infinity Blade for the iPhone may give you inspiration Movie Link

Answer 2

Can I discourage you from attempting to emulate a D-pad on a touchscreen device?

The problems with emulating a D-pad on a touch screen are:

• the D-pad takes up screen space that you could be using for the game;
• unlike a real D-pad, an emulated D-pad offers almost no feedback: as a player, you can't tell which direction you're pressing in, neither by feel nor by sight (since your finger is covering up the D-pad on the screen). So your finger all too easily slips off the D-pad, or onto the wrong part of it, leading to fumbles and frustration.

A touchscreen device is much more than a device "lacking a true D-pad", as you put it. A touchscreen device allows the player to touch anywhere on the screen and so interact with any visible game element. This gives a wide range of game design possibilities, and these designs are likely to be much more pleasant to use than an emulated D-pad.

Answer 3

I know this isn't the most useful answer, but unless you are porting a project over from another platform, I'd suggest reconsidering on the virtual D-Pad. Most implementations of virtual D-Pads have been poor at best, the lack of tactile feedback make them a poor choice for the platform.

You are far better off looking at building an interface to your game that highlights the platforms strengths instead of building to the platforms weakness.

Answer 4

Like the others have said, it's best to come up with a design that fits the environment, not force the environment to fit your design, but if you do stick with the D-Pad, here's how you might do it:

If you think of the "touch point" as a mouse cursor, you are basically create a "hot spot" that reacts to the cursor movement.

The best/simplest way to do it I think is to make a semi-transparent(remember, you are covering the game screen) box or circle in one of the bottom corners, where the player is most likely to have their finger already. Then you just track the position of the player's finger relative to the center of the hot spot, and that's your input delta value.

Answer 5

If you want to implement a D-Pad, the easiest way that comes to my head is to create four rectangles (one for each direction of the D-Pad) and then check if the touch location is within the bounds of any of the rectangles.

As the other guys said; think twice before implementing a D-Pad on a touch screen. On the other hand I´ve seen people playing those GBA emulators all day on their iPhones.

It´s up to you ... can you tell us what are you planning to do that involves a simulated D-Pad?

Answer 6

I see most people here thinks a D-Pad is a bad idea, and they are right - most of the time. Dungeon Hunter from Gameloft for Android is a great example of a great D-Pad for touch-screens. It is responsive, have a 360 degree direction, an is not "dumb". What I mean that it is not "dumb", is that when you press the D-Pad and slide you finger out from the D-Pad area, it doesn't interfare with what happens on the screen - it just extends. So if you accidentaly slip out of the D-Pad area you won't loose movement.

I think 360 degree direction and out-of-bounds responsivness is important and if you can do that you will have a chance in doing the D-Pad right.