Phaser Isometric plugin

[InsaneHero]

Hey lewster32, I'm working on the Phaser 3 rendering engine right now and I wondered if there's anything particular you might find useful in a renderer (for your iso work) which isn't already in Phaser + Pixi... or any features which are incredibly useful and you'd hate to lose?

Feel free to PM if you want to discuss this in more detail than this thread may permit

[enriqueto]

we'd like to do an isometric rpg game using pixel art.

 

Any plans to support tiles and tiled?

[joey]

Looks absolutely awesome. Isometric has always been one of my favorite projections.

 

Would love to try making a little puzzle game a la Captain Toad Treasurer Tracker if I find the time. Thank you for all your hard work!

[Mathieu Anthoine]

Just for information,

 

You can find Haxe externs for this great plugin here: https://github.com/mathieuanthoine/haxe-phaser-plugin-isometric

 

or directly with haxelib: http://lib.haxe.org/p/phaser-plugin-isometric

[Hung.H]

Hi, awesome plugin for Phaser. 

I have some questions regarding depth sorting. Although, pre-warning, this may not be the appropriate question here as it just may be my lack of experience with phaser itself.

When I change the isoX and isoY properties of a sprite. its depth also seem to change (checked with sprite.depth).
I have tried adding 2 sprites, each to a different group, and change the group's order so that the depth is 'to some extent' maintaining its order, but its doesn't seem to work. I've also tried using iso.simpleSort but that didn't do it either.

Can you provide me with more insight of how I may keep their depth fixed? 

EDIT: Nope nevermind. It was my misunderstanding of asynchronous data handling. awesome plugin

Edited April 20, 2015 by Hung.H

[rooskie]

Just wanted to say this is a great plugin, It really does give me some new game ideas just looking at it. #inspiration

[yahiko]

What will be the key features of this plugin? Is it already available?

[oboforty]

First of all, hello there everyone!

 

Secondly, can you show the bounding box of a sprite's body, just like you would in regular phaser physics? I tried using game.debug, but it doesn't seem to have any similar methods.

[lewster32]

Yes - game.debug.body will work for isoSprites with bodies too. If you scroll down to the 'render' function of this example the debug code is commented out.

[oboforty]

Thank you!

One more question: when I set the world bounds to a larger value, the mouse pointer example fails to show the real (x,y,z) value where the mouse points to. Is this a known bug, or do you have to translate

game.iso.unproject(game.input.activePointer.position, cursorPos);

to something else?

[lewster32]

This was indeed a bug - I've pushed a new version which fixes this bug.

[oboforty]

Thank you Lewster, you are the best! 

[Wambo1992]

Hi,

 

i recently started working with Typescript, Phaser and your Isometric Plugin. It took a while to get along with it,

especially with some of the Typescript difficulties. Thanks to edgarjcfn's post i finally got it too work.

I had problem working with IsoArcade though, i found a way but i dont think its the nicest workaround.

 

I first tried just starting IsoArcade with this, like in the examples of Javascript:

But in TypeScript it doesn't seem to work because "game.physics.isoArcade" is still undefined.

this.physics.startSystem(Phaser.Plugin.Isometric.ISOARCADE);

So, in phaser.plugin.isometric.d.ts i added the following line to class Isometric extends Phaser.Plugin

arcade: Phaser.Plugin.Isometric.Arcade;

and then i started IsoArcade like this:

this.isoPlugin = <Phaser.Plugin.Isometric> this.add.plugin(new Phaser.Plugin.Isometric(this));//...this.physics.startSystem(Phaser.Plugin.Isometric.ISOARCADE);this.isoPlugin.arcade = new Phaser.Plugin.Isometric.Arcade(this);

It seems to work fine like this, but maybe some of u guys know a better way to do it? Or maybe i'm just doing sth wrong.

 

 

PS: Anyways, thanks for the plugin lewster32. I really like working with it.

[Ryuuke]

Hello,

Thanks for making this awesome plugin !

Is there any map editor so we can create levels easily ?

Edit: it looks like it's not compatible with phaser V2.3, im gettting some errors when using with 2.3

[arcanine]

does this work with tiled the map editor?

 

http://www.mapeditor.org/

 

so far when I've tried to import a isometric map into phaser it says isometric maps are not currently supported,

does this plugin fix that?

[Gugis]

Hi. Is there any plans to support nested groups? It seems topologicalSort does not work if group has child group.

[darnpunk]

Hi,

Just wondering if it's possible to use p2 physics for this?

[NZMikey]

re 135° oblique,

 

I cant seem to get this thing to render correctly.  I posted something a long time ago and no one replied to it:

 

http://www.html5gamedevs.com/topic/16307-newb-isometric-issue-rendering-correct-size/#entry92313

 

Doesn't help that I didnt name it correctly,at the time i thought it was isometric, but apparently not.

 

Any chance I can get some help with this?

 

Cheers.

[Reinkaos]

Hey! Great plugin, I am very excited to use it!

[jmp909]

So, in phaser.plugin.isometric.d.ts i added the following line to class Isometric extends Phaser.Plugin

arcade: Phaser.Plugin.Isometric.Arcade;

 

 

for TypeScript, if you don't want to edit source, you can also bypass errors using bracketed property notation, rather than dot syntax

 

this should work.. 

isoPlugin['arcade'] = new Phaser.Plugin.Isometric.Arcade(this.game) 

[viniciusln]

On 13/11/2014 at 7:30 AM, lewster32 said:

If you need the 180° oblique projection, this doesn't require the plug-in at all, as it can be achieved perfectly well in 2D space

@lewster32 I am interested in the 180º oblique projection and I know it can be achieved in the 2d space, but I would like to use the plugin to help with the z sorting. Is it possible?

[Sanju]

Hi,

I'm playing with this plugin in a typescript example project and, after some trial and error, I got it working thanks to Wambo1992's and jmp909's posts. But there must be something I'm missing, because I've not been able to set the world's gravity. It works when I add the gravity to each object individually (this.player.body.gravity.z = -600), but I would like to set entire world's gravity at once. Anybody knows why is this happening?

Thanks

Here is my code:

preload() {
      // Add the Isometric plug-in to Phaser
	    this.isoPlugin = <Phaser.Plugin.Isometric> this.add.plugin(new Phaser.Plugin.Isometric(this.game));
      this.game.physics.startSystem(Phaser.Plugin.Isometric.ISOARCADE);
      this.isoPlugin.arcade = new Phaser.Plugin.Isometric.Arcade(this.game);

      this.game.load.image('cube', 'assets/sprites/cube.png');
    }

    create() {
      // Create a group for our tiles, so we can use Group.sort
      this.isoGroup = this.game.add.group();

      // Set the global gravity for IsoArcade.
      this.isoPlugin.arcade.gravity.setTo(0, 0, -500);

//CUBE
      var cube = this.isoPlugin.addIsoSprite(128, 128, 0, 'cube', 0, this.isoGroup);
      cube.anchor.set(0.5);
      this.isoPlugin.arcade.enable(cube);
      // Add a full bounce on the x and y axes, and a bit on the z axis.
      cube.body.bounce.set(1, 1, 0.2);
      // Add some X and Y drag to make cubes slow down after being pushed.
      cube.body.drag.set(100, 100, 0);
      // Collide with the world bounds so it doesn't go falling forever or fly off the screen!
      cube.body.collideWorldBounds = true;
//PLAYER
      this.player = this.isoPlugin.addIsoSprite(200, 200, 0, 'cube', 0, this.isoGroup);
      this.player.tint = 0x86bfda;
      this.player.anchor.set(0.5);
      this.isoPlugin.arcade.enable(this.player);
      this.player.body.collideWorldBounds = true;
      //this.player.body.gravity.z = -600;

      // Set up our controls.
      this.cursors = this.game.input.keyboard.createCursorKeys();

      this.game.input.keyboard.addKeyCapture([
          Phaser.Keyboard.LEFT,
          Phaser.Keyboard.RIGHT,
          Phaser.Keyboard.UP,
          Phaser.Keyboard.DOWN,
          Phaser.Keyboard.SPACEBAR
      ]);

      var space = this.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);

      space.onDown.add(()=> {
          this.player.body.velocity.z = 300;
      });

    }

    update() {
      // Move the player at this speed.
        var speed = 100;

        if (this.cursors.up.isDown) {
            this.player.body.velocity.y = -speed;
        }
        else if (this.cursors.down.isDown) {
            this.player.body.velocity.y = speed;
        }
        else {
            this.player.body.velocity.y = 0;
        }

        if (this.cursors.left.isDown) {
            this.player.body.velocity.x = -speed;
        }
        else if (this.cursors.right.isDown) {
            this.player.body.velocity.x = speed;
        }
        else {
            this.player.body.velocity.x = 0;
        }

        // Our collision and sorting code again.
        this.isoPlugin.arcade.collide(this.isoGroup, this.player, ()=>{});
        this.isoPlugin.projector.topologicalSort(this.isoGroup);



    }

 

[Maksym]

How can I import my map from Tiled to phaser isometric?

[Uayi]

Newbie question here: What is the recommended setup for getting a tile set to show up in game? I've used Tiled previously for orthogonal tile maps, but Phaser doesn't like isometric maps from Tiled. Is it better to avoid Tiled? Should I use a JSON atlas? I just want to be able to load an isometric level from a JSON file and have it show up. Any suggestions are greatly appreciated!

[lewster32]

The plug-in does not currently support Tiled maps, or provide any isometric TileMap equivalent.