How does one use Plugins in TypeScript?

[c023-dev]

I'm still pretty new to Phaser/JS and TypeScript.

 

I followed the Photonstorm tuts to get started with Phaser and TypeScript. And I have a few questions. First one is:

 

How can I get the plugins: https://github.com/photonstorm/phaser-plugins

 

to work in my TypeScript environment? Do I have to re-write the files? Or can I just add them in as a reference? How?

 

Thanks in advance!

[clark]

hey mate

 

What plugin are you using? I personally have not used them before.

The phaser.d.ts file in the /build/ directory contains these official plugins.  So I guess all you need to do is add the js script to your index.html page for the plugin you want after the phaser.js script tag and then use it as described.  

[c023-dev]

Greetings Clark,

 

I wanted to try the pixel scaler and maybe the arcade slopes from here:
 

https://github.com/eugenioclrc/super-mean-boy/blob/master/js/Arcade.slopes.js

 

 

So I'd have to copy the content of that .js file and reformat it into the phaser.d.ts if I wanted to use it, am I right?

[clark]

Ahh sorry I misunderstood the question.

You have kind of reached uncharted territory there, the plugins system with TypeScript is still a nightmare because they do not allow you to extend classes (only interfaces are open ended). 

 

If you are using a Plugin like this, you pretty much have to define the definition file yourself.  A quick way like you said is just to edit your own version of phaser.d.ts and populate it with the properties and method signatures from the plugin you want to use.  This is not recommended for obvious reasons as it will likely be overridden with updates.

You can see this page http://www.html5gamedevs.com/topic/8387-phaser-isometric-plugin/page-4

 

It gives an overview of the problem with Plugins and Edgar did something to the JS to allow plugin support.  I do not understand what he did really but any editing of the JS to make it work I feel should be discouraged. 

The bottom line is you are kind of where I am.... Not sure how to easily use 3rd party Plugins in a way that is compatible with TS.

 

Edited:

This the crux of the problem https://github.com/Microsoft/TypeScript/issues/819
 

[jouniii]

I've come to the same problem with my own code and doing a bit "Java" style is to declare extensively with interfaces, however it causes some other issues.

 

Workaround with those plugins which extend classes dynamically is to use the array notation. ie. in the clark's example isometric plugin to use sprite['iso'] which returns "any" object. Another could be to define the extension with interface (you should be able to extend class, although not needed if you just want to access extended properties) and cast it. ie. 

interface IsoSprite extends Phaser.Sprite {  iso: any;}(<IsoSprite>sprite).iso

Also to be able to access the added plugins js, you need to tell TypeScript compiler they exists (other than loaded js code). One way of course would be just (again) to use the array accessor to by-pass that or make a d.ts file with simple "module Phaser.Plugins { declare var SomeCustomPlugin: any; }"

 

Of course these solutions more or less make the plugins blackboxes, but that's how JavaScript works anyhow..?

[jmp909]

Hi,

 

I've just got this working for this plugin at least https://github.com/aaccurso/phaser-state-transition-plugin

 

looking at the required methods for it, I created a .d.ts file for it and added it to my project

/// <reference path="/typings/phaser/phaser.d.ts" />// definition for https://github.com/aaccurso/phaser-state-transition-plugindeclare module Phaser {        module Plugin {		        class StateTransition extends Phaser.Plugin {                            constructor(game:Phaser.Game, parent: any); // not sure what parent type is            configure(options:Object):any;            // to(key)            // to(key, clearWorld, clearCache, parameter)            to(key:string, clearWorld?:boolean, clearCache?:boolean, parameter?:Object):void;        }    }}        

I can now call this in my project like this

// note the < > type-castingvar st = <Phaser.Plugin.StateTransition> this.game.plugins.add(Phaser.Plugin.StateTransition);st.configure({		    //how long the animation should take    duration: 1000,		    //ease property    ease: Phaser.Easing.Exponential.InOut, // default ease	    //what property should be tweened    properties: {        alpha: 0,        scale: {	    x: 1.5,            y: 1.5        }    }});		st.to("GameRunningState");		

hope this is of use to someone

 

thanks

j

[strivinglife]

Found this linked to from another thread and found it very useful.

 

FYI, based upon the official photon storm plugin TypeScript definition, the constructor accepts a Phaser.Game and Phaser.PluginManager.

constructor(game:Phaser.Game, parent: Phaser.PluginManager);