Jump to content

Using Isometric plugin with typescript


Recommended Posts

Hi all


I have been trying out phaser, and want to use the Isometric plugin. I can get it all to work when using standard javascript, but ideally I'd like to use typescript. 


I can get phaser working in typescript based on the tutorials, and pull in the isometric plugin as so:

this.iso = this.game.plugins.add(Phaser.Plugin.Isometric);

but I cannot get calls such as

this.game.iso.anchor.setTo(0.5, 0.1);var tile = this.game.add.isoSprite(x, y, z, 'landscape', 'grass', this.group);

to work


this.game is

constructor() {        this.game = new Phaser.Game(800, 600, Phaser.AUTO, 'content', { preload: this.preload, create: this.create });    }

I am using phaser 2.4.4 and latest isometric plugin. Any advice on if this is possible / I am doing it the wrong way would be greatly appreciated!



Link to comment
Share on other sites

I managed to get a bit further, I took from the source code:

    //  Add an instance of Isometric.Projector to game.iso if it doesn't exist already    this.game.iso = this.game.iso || this.projector;

So when I get a reference to the plugin (as this.iso above), then I can still call this.iso.projector in place of this.game.iso and it seems to work. Not quite as nice, but I think it is a limit on how typescript cannot cope with dynamically adding iso to the Phaser.Game object.


Calls to this.game.add.isoSprite become this.iso.addIsoSprite


That said I haven't got my test code working yet; meant to try it with one of the examples but haven't had time to look at it yet.

Link to comment
Share on other sites

  • 4 months later...

A quick and dirty way around the this.game.add.iso and this.game.add.isoSprite issue is to simply cast "add" so the two become: (this.game.add as any).iso and (this.game.add as any).isoSprite. Definitely not the preferred way (you lose your type safety), but it does work.

Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...