I am currently working on a simple arcade game intended for smartphones, and after some research, I decided to develop it using JavaScript and Phaser. Getting an arcade-style controller on a mobile app requires a specialized “joystick” (the accompanying buttons are fairly straightforward). The basic concept is to have an area where a player can touch that determines the direction and distance of the joystick. The “joystick” should also be limited in how far it moves. The main game loop polls the joystick for information like angle and distance.
I found a few existing options in Phaser. The first is the beautiful and well-designed Virtual Joystick Plugin, but it costs $16. The next is an implementation of a Virtual Gamecontroller that creates a d-pad using buttons, which is useful, but lacks the analog nature of a true joystick. Finally, I found Eugenio Fage’s Touch Control Plugin.
The Touch Control Plugin worked almost exactly how I expected a virtual joystick to function, but instead of being in a static location on the screen, the user had to touch somewhere in the canvas to make the “joystick” appear. By examining how Eugenio performed the joystick calculations, I was able to make a static joystick overlay. The main difference is that Eugenio’s code uses events to determine presses on the joystick, and I found it to be sluggish when paired with a button. Like a bad JavaScript programmer, I changed it to polling (which Phaser does anyway in its update loop).
To use the joystick, press down with your finger/thumb/mouse over the joystick area, and the “pad” should follow your pointer (out to a certain distance from the joystick’s center). The direction, rectangular, and polar properties should update accordingly. The button on the right should be fairly self-explanatory. A game using the Virtual Gamepad plugin just needs to poll the joystick and button’s properties on every update.
The most recent source code for the Virtual Gamepad plugin can be found on GitHub: https://github.com/ShawnHymel/phaser-plugin-virtual-gamepad/
A playable demo of the Virtual Gamepad in action can also be found on GitHub: http://shawnhymel.github.io/phaser-plugin-virtual-gamepad/