prof.kerfuffle Posted September 12, 2016 Share Posted September 12, 2016 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. Link to comment Share on other sites More sharing options...
rich Posted September 12, 2016 Share Posted September 12, 2016 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. Link to comment Share on other sites More sharing options...
prof.kerfuffle Posted September 12, 2016 Author Share Posted September 12, 2016 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): 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. Link to comment Share on other sites More sharing options...
rich Posted September 12, 2016 Share Posted September 12, 2016 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. Link to comment Share on other sites More sharing options...
prof.kerfuffle Posted September 12, 2016 Author Share Posted September 12, 2016 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. 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 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: 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> Link to comment Share on other sites More sharing options...
Tom Atom Posted September 13, 2016 Share Posted September 13, 2016 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); Link to comment Share on other sites More sharing options...
Daniels Posted November 19, 2016 Share Posted November 19, 2016 Thank you @Tom Atom. This is exactly what i needed! Link to comment Share on other sites More sharing options...
Recommended Posts