Virtual Joystick Plugin

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 user friendly API means you'll be running in seconds. Creating a joystick is as simple as activating the plugin and calling one command:

var pad = game.plugins.add(Phaser.VirtualJoystick);
var stick = pad.addStick(x, y, distance, 'arcade');
    

There are a wealth of properties and methods exposed for your game code, allowing you to configure the joysticks and buttons as needed.

Features

• 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
• Adds just 3.3KB to your game download size
• 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

Buy Now

The plugin is delivered via immediate download. It includes the full plugin source code, examples, API documentation, Photoshop files and a manual.

Try it out

We have put 14 Virtual Joystick examples on this site.
Run them, play with them and edit the code to get a feel for how it all works.