Usage with TypeScript

[tommitytom]

Hi folks, I've been tinkering with this plugin today using TypeScript, phaser-ce v2.8.0, using gulp as my build manager. I encountered a few issues along the way and thought I would detail my process, and/or see if there is a better way of doing this.

Accessing the module globally

Firstly I had to get the TypeScript compiler to make use of the definitions, as the PhaserInput module was not available to me. To do this, I:

1. Created node_modules/@orange-games/phaser-input/build/typings.json which contains:

{
    "name": "phaser-input",
    "main": "phaser-input.d.ts",
    "global": true
}

2. Modified ./typings.json, to add a phaser-input field to globalDevDependencies.
   The file now contains:

{
	"globalDevDependencies": {
		"phaser": "file:node_modules/phaser-ce/typescript/typings.json",
		"phaser-input": "file:node_modules/@orange-games/phaser-input/build/typings.json"
	}
}

3. Ran typings install in the project root directory

This allowed me to access the PhaserInput module globally.

Adding the plugin

Next up I was unable to add the plugin to the game, as I was getting this error:

Argument of type 'typeof Plugin' is not assignable to parameter of type 'Plugin'. Property 'active' is missing in type 'typeof Plugin'.

After a browse at some other plugins, I notice they use this method (which also works in this case)

this.game.add.plugin(new PhaserInput.Plugin(this.game, this.game.plugins));

Gaining access to game.add.inputField()

When trying to use the game.add.inputField() method I was getting the following error:

Property 'inputField' does not exist on type 'GameObjectFactory'.

To fix this I added the following member variable to the Phaser.State I am creating

export default class Menu extends Phaser.State {
	public game: PhaserInput.InputFieldGame; // Added

	public create() {
		const input = this.game.add.inputField(10, 10);
		// etc...
	}
}

[AleBles]

Hey man, thanks for the awesome write-up, as for your points:

1. I put all my external references in a file in the project, as seen here: https://github.com/orange-games/phaser-ts-boilerplate/blob/master/ts/definitions.d.ts

This way I'm not dependant on external projects having typings or not

2. Hmm, I still mostly work on Phaser 2.6.2, so that might be a change in the -ce addition. I don't test my plugins on the ce version, but I'll add this info to the readme

3. I usually use something similar like that, but since I user more plugins I overwrite the entire game object as per: https://github.com/orange-games/phaser-ts-boilerplate/blob/master/ts/Fabrique/IGame.ts