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