As I've been plugging away on my Phaser Jam game, I realized I had built a couple of classes that you guys may find useful.

The first is a SimpleButton class that you can use to add basic buttons with easy-to-script input handling. The second is an InputWrapper class that lets you map multiple keys and on-screen buttons to single input names.

You can grab the files from my dump.

The two classes you will want to steal are js/SimpleButton.js and InputWrapper.js

Check out main.js to see them in action. The demo starts with a basic implementation of SimpleButton (the play button), then shows how to use InputWrapper to move a sprite left and right with multiple input sources (including on-screen buttons!).

I haven't added gamepad input in here yet, but if I do I'll be sure to update these files. It shouldn't be too difficult to figure it out if you need to add that before I get around to it.

These classes should go a long way to help some of you guys get keyboard based games working on mobile devices!

Speaking of mobile devices, I have one last tip to share.

If you are using es6 style JavaScript classes for your Phaser games, and you want to target mobile, be aware that Safari on iOS will not work right if you use class properties like so:

class SomePointlessClass
{
    static some_static_var = 123;  // this will break Safari

    some_property = "abc";  // as will this

    constructor()
    {
    	console.log(SomePointlessClass.some_static_var);
    	console.log(this.some_property);
    }
}

Safari is basically the new Internet Explorer, holding the rest of the web back with its hot garbage-ness.

Anyway, the workaround is to put any instance properties in your constructor, and add any static properties after the class definition like so:

class SomePointlessClass
{
    constructor()
    {
    	this.some_property = "abc";
    	
    	console.log(SomePointlessClass.some_static_var);
    	console.log(this.some_property);
    }
}


SomePointlessClass.some_static_var = 123;