Phaser Virtual Joystick Plugin Released

[rich]

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!

[BunBunBun]

really awesome!

[Alexalten]

Great!!!! The examples cover a lot of possibilities!!!! 

I think that Phaser is becoming a great framework for game development in Javascript/HTML5 world (we could compare it with Unity in 3D world).

 

P.S.

Will be possible, in near future, use PayPal to buy the plugin?

[rich]

re: PayPal - good point! If you'd like to you can send the payment to me ([email protected]) and I'll deliver the plugin to you.

[rsadwick]

Wow, congrats on the plugin.  Lots of features to take advantage of!

[brendaespadas]

Well done!

[nicwins]

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.

 

[msqar]

It doesn't include the TypeScript definitions i thought it would like ParticleStorm.

[msqar]

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.

[Bakudan]

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)

Regards,

[samme]

18 hours ago, Bakudan said:

Cannot set property 'game' of undefined at Phaser.PluginManager.add

@Bakudan that sounds like the plugin file hasn't been loaded.

I think you can do 

import './path/to/plugin.js';

 

[Bakudan]

Hi @samme,

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

"scripts" :
  "./path/to/PhaserVirtualJoystick.js",
  "./path/to/Button.js",
  "./path/to/DPad.js",
  "./path/to/Stick.js"
]

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.