Jump to content

Phaser Virtual Joystick Plugin Released


Recommended Posts

Hi all,


I'm really pleased to announce the release of our second plugin.




This time I've tried to cover everything that you may need from a virtual joystick plugin, including 3 quite lovely looking skins to use.


  • Analogue + Digital Joysticks and Buttons
  • 3 Professionally designed skins inc. PSDs
  • Powerful and friendly Plugin API
  • JSDocs, PDF Manual and Code Examples


The Phaser Virtual Joystick Plugin allows you to easily add mobile friendly joysticks, d-pads and buttons to your games. The plugin comes with three high-resolution professionally designed skins. So the joysticks will both look great and respond quickly. Photoshop PSD files are also included allowing you to create further skins.


The shop page is here: http://phaser.io/shop/plugins/virtualjoystick




There are also 14 examples of it in action here: http://phaser.io/examples/v2/category/virtualjoystick (excuse the horrible watermark on the graphics, but I had to protect them somehow)


The full feature list:


  • 3 professionally designed high-resolution Joystick skins and Button states
  • Each skin includes Photoshop PSD files for customisation
  • Supports Analogue Joysticks, Digital (DPad) Joysticks and Buttons
  • Create as many joysticks as you need on-screen at once. Dual-stick shooter? No problem!
  • Create as many Buttons as you need, each with their own style and events
  • Joystick events: onDown, onUp, onMove and onUpdate
  • Adjust the sensitivity of the Joystick
  • Uses a custom Input Manager that won't conflict with any input enabled Game Objects
  • Joysticks can be axis locked so they only move horizontally or vertically
  • Includes DPad class for the classic retro feel! For fixed-axis 4-way movement
  • Renders outside of the game World, so not impacted by scaling or camera movement
  • Joysticks and Buttons can be easily positioned, scaled, alpha'd or made invisible
  • Joysticks can be set to only appear when the player touches the screen
  • Easily read the force of the joystick both globally and per axis
  • Easily read the angle of the joystick in multiple formats
  • Create a Joystick 'dead zone' inside of which events are not processed
  • Control the Button repeat rate - how often it should 'fire'
  • Includes properties for easy use with shaders
  • Handy debug method visually renders the hit areas and joystick values
  • Works across mobile and desktop browsers
  • Works under Chrome Mobile Emulation including multi-touch environments
  • Getting Started Guide - You'll be coding in next to no time
  • 14 Code Examples included - View them all online
  • Extensive JSDoc API Documentation - all properties and all methods
  • Free Upgrades
  • License free - Use it in commercial games
  • Ready built and minified source files
  • Works with Phaser 2.2 and above
Hope you like it!
Link to comment
Share on other sites

  • 2 years later...
  • 9 months later...
On 5/15/2017 at 11:18 PM, nicwins said:

Can't get it to work with keyboard keys as well using:

cursors = game.input.keyboard.createCursorKeys();

Is that normal? because I want my game to be both desktop AND touchscreen enabled.


That's a good question, any news on that? i guess we could validate if we are in desktop or any device. Based on that, setup the cursors.

Link to comment
Share on other sites

  • 3 months later...

Hi @rich,

I bought the Virtual Joystick plugin for Phaser 2 but I can't get it to work with Typescript.

Do you know if there is a trick to use it this way ?

I'm working with Angular5 and I think that I tried almost everything to import it ...

Cannot set property 'game' of undefined at Phaser.PluginManager.add (phaser.js:30712)


Link to comment
Share on other sites

Hi @samme,

Thank you very much ! Everything is working perfectly ❤️
I import files like this in .angular-cli.json :

"scripts" :

Then I must set the Phaser context and the Plugin name « as any », to load the plugin with typescript in my game.component.ts :

declare var Phaser : any;

this.pad = this.game.plugins.add(Phaser.VirtualJoystick as any);

Thanks again.

Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...