prof.kerfuffle

Typescript and Plugins - Are they officially supported?

Recommended Posts

So I'm a phaser/html5 newbie, but coming from java I've chosen to take the typescript route, and am now trying to get plugins to work, but have been having major issues, and haven't been able to find any "official" information about typescript plugin support, only a few threads here with hacky solutions that haven't worked for me. What confuses me is that there are often typescript typings along with the plugins, which would indicate that they're supposed to work with typescript.

Any insight into this would be greatly appreciated, and if I may suggest, should perhaps be more clearly presented in the documentation.

Share this post


Link to post
Share on other sites

Which plugins are you referring to?

Phaser itself has comprehensive TypeScript defs. As for the plugins we sell: Particle Storm and Box2D have TypeScript defs. Virtual Joystick Plugin does not.

Any other plugins you've found likely aren't created by us, so it's up to their own authors to provide TS defs. Or are maybe legacy plugins left over from Phaser 1.x days? Post some links and I can clarify.

Share this post


Link to post
Share on other sites

Thanks for the reply!

I've only tried two third-party ones, both with typescript definitions.

For instance phaser-input (https://github.com/orange-games/phaser-input).

In non-typescript javascript it works as planned:

game.add.plugin(Fabrique.Plugins.InputField);
var input = game.add.inputField(10, 90);

In typescript I get the following errors (with typescript definitions present):

phaser_typescript_plugins_a01.png

I'm guessing this is because the plugin isn't part of the Phaser.Game object, and can't be added dynamically like in javascript.

I feel like I may be missing something very basic here, so for newbies such as myself it would be very helpful with some kind of (official) information on the topic, perhaps as part of the Typescript Introduction tutorial, since it's really felt like hitting a wall on this issue, with otherwise excellent documentation/introductory material available.

Share this post


Link to post
Share on other sites

Looking at that plugin specifically it seems fine to me. I have imported the TS defs bundle they provide (import 'phaser-input.d.ts') after Phaser, and it recognises that 'Fabrique.Plugins.InputField' extends Phaser.Plugin, which is what 'plugins'add' expects, and compiles ok here. This is with TypeScript 1.8.10 and VS Code on OS X. I've not tried it with an earlier version of TS.

Share this post


Link to post
Share on other sites

Thanks for trying it out! I'm using Visual Studio Community 2015, with typescript 1.8.35.0.

Could this be some typescript definition import issue? I've merely placed the .d.ts files inside the root folder, and at least in VS it automatically imports them, so I haven't done any explicit importing inside the script files.

phaser_typescript_plugins_b01.png

I did however notice that changing:

this.game.add.plugin (Fabrique.Plugins.InputField);

to:

this.game.plugins.add (Fabrique.Plugins.InputField);

gets rid of the first error

phaser_typescript_plugins_a02.png

but I'm not sure whether it does the same thing (I've seen both used in examples when adding plugins).

But the line adding the inputField (this.game.add.inputField (10, 90);) still yields the same error as before:

phaser_typescript_plugins_a03.png

Here are the files, in case I've done some silly mistake.

module Game {
	export class Plugin_test {
		game: Phaser.Game;
		constructor () {
			this.game = new Phaser.Game (1280, 720, Phaser.AUTO, 'content', {create: this.create});
		}
		create () {
			this.game.plugins.add (Fabrique.Plugins.InputField);
 			//this.game.add.plugin (Fabrique.Plugins.InputField);
			var input = this.game.add.inputField (10, 90); // produces error: "Property 'inputField' does not exist on type 'GameObjectFactory'".
		}
	}
}
window.onload = () => {
	var game = new Game.Plugin_test ();
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>plugin_test</title>
    <link rel="stylesheet" href="app.css" type="text/css" />
    <script src="app.js"></script>
	<script src="phaser.js"></script>
	<script src="phaser-input.js"></script>
</head>
<body>
</body>
</html>

 

Share this post


Link to post
Share on other sites

Hi,

1] to initialize plugin write:

 this.game.plugins.add(Fabrique.Plugins.InputField);

or you can do this:

            let plugin = new Fabrique.Plugins.InputField(this.game, this.game.plugins);
            this.game.add.plugin(plugin);

2] to phaser-input.d.ts add this in the end:

declare module Phaser {
    interface GameObjectFactory {
        inputField: (x: number, y: number, inputOptions?: Fabrique.InputOptions, group?: Phaser.Group) => Fabrique.InputField;
    }
}

then you can write:

var input = this.game.add.inputField(10, 90);

or 3] do not update defs and you can write:

var input = this.game.add["inputField"](10, 90);

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.