Share Your Code

Virtual DPad/Joystick template

Posted by Alejandro Jimenez, Posted on November 19, 2011

I've made a virtual dpad to test a tilt-based project and came out with something I think will be really useful for those out there wandering how to make a virtual controller for their apps.

Its features are:

- Visible only at finger touch.
- Tracks angle and magnitude.
- Draggable from its bounds.
- Confined to screen limits.

The download link and a video showing the thing in action can be found at our website:
http://www.dunkelgames.com/downloads

You'll find easy to follow instructions inside the 'dpad.lua' file itself. Enjoy! ;-)

Alejandro Jiménez
http://www.dunkelgames.com


Replies

AlenB
User offline. Last seen 51 weeks 5 days ago. Offline
Joined: 29 Sep 2010

Very Cool!
Thx!

TH3ORY
User offline. Last seen 23 weeks 2 days ago. Offline
Joined: 12 Sep 2011

Awesome Dude Thanks :)

Alejandro Jimenez
User offline. Last seen 47 weeks 2 days ago. Offline
Joined: 8 Jan 2011

Thanks guys! I'm really proud of contributing with a little something to this community! :D

infoanalize
User offline. Last seen 2 years 37 weeks ago. Offline
Joined: 6 Mar 2011

Very cool...

When the user touches and drags it off the screen, the move event is continuously occurring. How can I know when the user drag dpad off the screen, so that I can stop my player from navigating?

Alejandro Jimenez
User offline. Last seen 47 weeks 2 days ago. Offline
Joined: 8 Jan 2011

Time to go work for me here, but tonight I'll check it out and probably upload an update to address that issue. I'll let you know!

Alejandro Jimenez
User offline. Last seen 47 weeks 2 days ago. Offline
Joined: 8 Jan 2011

Hey just had a few free minutes to look at the issue, it's now fixed and updated at our site again ;-)

I have to thank you for this one because you made me learn that my 'ended' and 'cancelled' event phases for the touch listener weren't firing properly.

It's just a single line fix and you can see what it is at game.lua in the touchManager function.

Thank you! Hope it's more useful for everyone now :)

EHO
User offline. Last seen 16 weeks 6 days ago. Offline
Joined: 20 Nov 2011

Nice job Alejandro, this is helping me understand a project I'm working on. The D-Pad is very helpful, can you share how you set up the joy stick? I didn't find that functionality in the zip that was available.

Thanks :)

Alejandro Jimenez
User offline. Last seen 47 weeks 2 days ago. Offline
Joined: 8 Jan 2011

I think you mean the white dot that appears on the video and show the finger touch position. That's not part of the code, it's just the mouse cursor edited with my recording software to look like that. You can easily make an image an assign it to touch position at every frame if dpad exists to have it done by code. You may need to reinsert the new image into its parent after displayin the dpad, to have the joystick on top ;-)

EHO
User offline. Last seen 16 weeks 6 days ago. Offline
Joined: 20 Nov 2011

Ha! Yes, that white dot was what I was talking about. It was late when I was looking at your video and I took it as a different version of what you had made. Thanks for clearing that up :)