A Virtual Joystick for Phaser
A Tri-Sprite design Virtual Joystick for Phaser HMTL5 game framework
So I needed a Virtual Joystick plugin (kinda) for my game a few weeks ago. I found phaser-touch-control-plugin but I needed the joystick to stay in one place on the screen. Also the code was like all about checking the input pointer, not my kind of stuffs. You know, I like everything simple and built-in.
So I wrote my own Virtual Joystick. That sounds stupid now, but at that time Photostorm didn’t release their official plugin yet (still, it’s $20 value there).
If you are more interested in Camera for Phaser, check out my previous posts on that topic: part 1 — part 2.
My design was like this: A background for the joystick (the grey on) and a draggable sprite for the pin. The pin returns to the center of the background onDragStop.
However, since there are no restriction, the pin can goes much further than the edge of the background.
My solution is to use the red layer as the pin indicator, while have a transparency layer as the draggable one.
The part dragger.input.enableDrag is called with param true so that the dragger will always be centered at your finger tip.
The indicator then would be set to its position according to the draggable layer position.
The remaining task were just calculations and signals assignment. Check out the full code here.
Check out this Virtual Joystick in action in my development footage for Sword of Vendetta: Dojo’s Last Blood.
Follow me on Twitter and check out my blog for interesting topics.
If you are seeking for a freelancer on game and web development, please feel free to contact me at anhnt.fami@gmail.com.
