c023-dev

How does one use Plugins in TypeScript?

Recommended Posts

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!

Share this post


Link to post
Share on other sites

hey mate :D

 

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.  

Share this post


Link to post
Share on other sites

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
 

Share this post


Link to post
Share on other sites

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..?

Share this post


Link to post
Share on other sites

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

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.