I am not able to find this in the docs. Thank you.

In the prototype for isoSprite , there's no way for _isoSpriteChanged to ever get set false, so every update cycle the it updates the isoSprite, regardless of need and has to re-do the math for resetBounds and depth.

Phaser.Plugin.Isometric.IsoSprite.prototype._project = function () {
    if (this._isoPositionChanged) {
        this.game.iso.project(this._isoPosition, this.position);

        if (this.snap > 0) {
            this.position.x = Phaser.Math.snapTo(this.position.x, this.snap);
            this.position.y = Phaser.Math.snapTo(this.position.y, this.snap);
        }

        this._depthChanged = this._isoPositionChanged = this._isoBoundsChanged = true;
    }
};

This can be changed to be:

    this._isoPositionChanged = false;
    this._depthChanged = this._isoBoundsChanged = true;

After this change, it requires that isoSprite positioning is changed only using isoSprite.isoX, isoSprite.isoY, and isoSprite.isoZ because those setters update the _isoPositionChanged flag, or with body.reset if there is a body.

If the position is updated using isoSprite.isoPosition.setTo(x,y,z) , _isoPositionChanged never gets set and thus the position.x, position.y remain unchanged.

It seems that using groups for both collision and depth sorting is quite inefficient. There are situations where you'd want the whole scene to be depth sorted, but only partial elements of it to be collision checked.

Consider a player in a scene full of objects, where you're not especially concerned about collisions between objects but you do want the player to collide with things (maybe a level made of static IsoSprites). In this situation, you only want to call collide between the player and the objects, and make use of the QuadTree/Octree for speed, but unless you pass a group in, the collision handler will simply check all objects in the scene.

Also, because IsoSprites usually need to be depth sorted, it feels like there should be a container that handles this automatically. With this in mind, I feel like an IsoGroup or IsoScene (or both) container should be implemented just to handle display ordering, and then groups could be placed in that to handle collision and so on, while allowing the groups to be used for collisions.

Any thoughts?

Need to investigate how adding children to IsoSprites behaves with the scene graph. This should work predictably, with the child objects being positioned relative to their parents axonometrically. Does this work as intended?

See this thread for more discussion: http://www.html5gamedevs.com/topic/9301-phaserpluginisometricisosprite-add-child-does-not-work/

Hi,

phaser-plugin-isometric is not found on npmjs: https://www.npmjs.org/package/phaser-plugin-isometric

Is it possible to publish this package to npm?

npm publish

I'm running on this error that seems to be related that the file published both on bower and npm is not the same that we can find in the dist's master branch. The error is caused by a line testing this.sprite._cache[4] === 1 in the minified version. If I copy the minified version from the master an paste it locally it works.

I believe you just need to republish the package.

When you put scale on sprite tile. the unproject coords no working good, you need put code like this
`haser.Plugin.Isometric.IsoSprite.prototype.resetIsoBounds = function () {
if (typeof this._isoBounds === "undefined") {
this._isoBounds = new Phaser.Plugin.Isometric.Cube();
}

this._isoBounds.widthX = Math.round(Math.abs(this.width) * 0.5);
this._isoBounds.widthY = Math.round(Math.abs(this.width) * 0.5);
this._isoBounds.height = Math.round(Math.abs(this.height) - (Math.abs(this.width) * 0.5));

this._isoBounds.x = this.isoX + (this._isoBounds.widthX * -this.anchor.x) + this._isoBounds.widthX * 0.5;
this._isoBounds.y = this.isoY + (this._isoBounds.widthY * this.anchor.x) - this._isoBounds.widthY * 0.5;
this._isoBounds.z = this.isoZ - (Math.abs(this.height) * (1 - this.anchor.y)) + (Math.abs(this.width * 0.5));

return this._isoBounds;`

I have been using MelonJS, but am eager to give Phaser a shot with this isometric plugin. A big part of developing player levels/maps is using Tiled. Has anyone tried building isometric Tiled maps for Phaser?

Depth sorting fails when an object is directly on top of another moving in the -x-y direction, as it reaches the back corner of the object below. Possibly need to explore a topological sort method as outlined here: http://mazebert.com/2013/04/18/isometric-depth-sorting/

I drew a tile map with a polygon tiles (ratio 2:1).
I have used game.iso.anchor.setTo(0.5, 0); to set X axes to the center of my viewport but I would like also center the Y axes.
For center of Y axes I not mean the top corner of the map but the center of the map.
If I use game.iso.anchor.setTo(0.5, 0.5); I obtain that the top corner of the map is placed in the vertical center of the viewport.

How can I solve?

I want to create a player isoSprite that can jump over static isoSprites but the body.static property is undefined.

I have tried with body.immovable=true but this cause a strange behaviour. The player can´t push the blocks but when it jumps over one of thems it pull from it when increase o decrease the body.velocity.y. It´s very ease to replicate, take the "Basic character movement" example and add that after line 54:

cube.body.immovable=true;

Then jump over some cube and pres up or down cursor keys.

Thanks in advance

Hello!

Love the project, bravo!

I was wondering if there are any example games / boilerplate for seeing this plugin in action / something to kickstart my own game prototype?

I'm new to phaser but I've been ruined by yeoman, bower and npm for how easy it is in my job to start a new angularJS application.

Thanks,

Lewis

I want to move a player object based on the mouse events, is there any way to achieve this?

There's no license information available for this plugin

EDIT: Sorry, I have only now seen there is on the source files. Still, it would be nice to have it on README or in its own file. Closing this.

Octree raises an error when trying to collide group vs self, and QuadTree debug visualisation is not rendering object positions.

Is the following correct: https://stackoverflow.com/questions/39799689/phaser-how-to-rotate-an-isometric-body

If not, can we rotate the tile like the link above describes?

Hi,

Thank you for the plugin it's awesome !

I would like have my isoSprite move towards a pointer click, with phaser I think they are two main ways to do this:

• Moving towards the pointer with moveToPointer (which does not exists in isoArcade)
• Using tweens, but how to convert pointer coordinates into isometric coordinates and how to detect collision ?

Do you have any idea how is it possible to achieve pointer movement in isometric ?

Hi,

I've noticed the anchor property, specifically changing it, is broken with the plugin, but only after setting the physics of the sprite to iso mode. The sprite's position gets radically changed. If i set the anchor to 0.001 the sprite begins to slowly move to the left (very slow lol) but if i set it to .5 its thousands of pixels away instantly, and does not continue moving.

to replicate:

create a sprite,
enable isoArcade phsyics (if you do not do this first there is no problem)
do sprite.anchor.setTo(.5); or sprite.anchor+=.5
check the position of the sprite, as its now very far away. For me I got a negative value every time.

Hi @lewster32,

first of all thanks a lot for this awesome plugin!
I recently fell in love with isometric projection ❤️ and I want to create a game with Phaser 3. Therefore I started porting your plugin be compatible with Phaser 3 (which includes some breaking changes). I'm pretty new to Phaser and game development in general but I already got the basic projection part working (adding iso sprites to the scene). There is still some work left to do though (mainly the physics part and still some problems with the anchors of the isosprites - there are no more anchors in Phaser 3).

Now I'm wondering if it's OK for you, that I create a pull-request so maybe you can have a look at the code as well and as soon as it is finished it can be merged to this repository. Or if you'd prefer me to fork this repo so I can maintain the Phaser 3 version seperately.

I think I'd go for the first option and keep a tag of the current version, so it still can be used for Phaser 2. What do you think?

Hello,

I'm running into an issue where I need to update a sprite's isoPosition at a specific time interval. Basically I'm communicating a sprites position to a Node server from different browser clients and verifying those positions via websocket at a consistent time interval.

For example, I can replicate the issue i'm seeing if I add the following code snippet after line 80 for the example on: http://rotates.org/phaser/iso/examples/character.htm

setInterval(function() {player.isoX = 128; player.isoY = 128}, 1000);

Once you move the cube sprite using the keyboard, you will see the sprite start to flicker and constantly change positions in a seemingly random fashion.

It's super weird and I can't figure out how to resolve it.

Maybe their is a better way to update a sprite's position?

Awesome plugin BTW 👍

The plugin has unexpected behaviour when Phaser, the plugin itself, and all other elements are wrapped in a container object. The most apparent of these is modifying isoZ in an isoGroup in update(). When the logic is wrapped in an object (i.e. var env = {}; env.game = new Phaser.Game(...) ), and the pointer interaction code is run, it acts as if a tweening motion has gone out of control.

Currently isoBounds are only determined for matching a cube inside a given sprite, is there a way to have a custom shape ?

Example for this wall sprite :

My main problem is to have the depth sorted properly, is there another way to achieve that other than cutting sprite into smaller cubic pieces ?

Hi, I've the need to scale the camera (zoom-in/out).
when i scale it the mouse isometric position is not correctly rescaled.

(try to scale http://rotates.org/phaser/iso/examples/interaction.htm camera as example).

how can i resolve this issue?

I was wondering if it was possible to create objects that are not cubes.
For example, I needed an object that was a cube cut diagonally so that I have a sloped hill.

Hi, first of all thank you for amazing plugin!

        var heroSprite = game.add.isoSprite(40, 40, 1, 'hero', 0);
        heroSprite.anchor.set(0.5, 0);

        heroSprite.inputEnabled = true;
        heroSprite.input.enableDrag();

But hero's sprite only blinking when I trying to drag it.
Can I use drag and drop feature from phaser?

As found here I set the 3D world bounds of my world like this in the preload callback:
game.physics.isoArcade.setBounds(-30, -30, 0, 100, 100, 150);
And in the render callback I use octree to display the world bounds:
game.debug.octree(game.physics.isoArcade.octree, '#FFFFFF');
game is an instance of Phaser.Game
This results in the following being displayed:

Which is wrong because the white wireframe does not actually reflect the world bounds. In fact, whatever I pass to setBounds, the white wireframe stays the same size.

So after spending a while on navigating through the code I found out that the setBounds function (which is part of the Phaser.Plugin.Isometric.Arcade class, see source code) calls the setTo function on this.bounds which is a Phaser.Plugin.Isometric.Cube, simply passing on its parameters.
However, octree uses a completely different property in its own class to hold the current world bounds (see source code), which is never updated.
Since octree updates its data in the reset function, which is called in the constructor, I tried game.physics.isoArcade.octree = new Phaser.Plugin.Isometric.Octree( game.physics.isoArcade.bounds.x, ......); directly after the call to setBounds from above and the bounds are correctly displayed:

But I don't think this is the correct way of doing it. the setBounds function should handle changes to the bounds on its own. Maybe octree is not the only part which should be updated whenever the world bounds change.

So: Is this a bug?
It seems reasonable to me to assume that I can change the world bounds with a single call and not have to worry about other stuff getting updated correctly. If that's not the case though: Where am I expected to find that information? Googling for "phaser isometric world bounds" and the like, I found multiple websites mentioning game.world.setBounds(x, y, width, height); (e.g. this and this), which does not really make sense when using isometric world space. There are also a few abandoned questions about this (e.g. this).
I was lucky to find this post mentioning the 3D version of the setBounds function.

-I added the picture library

-I added on top players

How do I do I do I want to come out of the water wall?

AND

After a click you help I want to go to my place with this player mous

javascript file: https://jsfiddle.net/u61kub7b/

Hi, I am a beginner of phaser. I had follow this Tutorial and I just download the code, it work normally. But if I update the phaser-plugin-isometric.min.js to lastest version(from v0.9.1 to v0.9.2), it throw out an error:

Uncaught TypeError: Cannot read property '4' of undefined

Could any one tell me what's going on here? thx :)

Hi!

I am trying without result to draw a tilemap

The projectionangle seems to play an important role (my tiles are 14h 16w)
more info on it would be nice and how to use it.

Is it possible to draw staggered maps?

thanks

My preemptive apologies if this is a silly question—I'm still a typescript/js noob.

When I try to add this plugin, I get a Typescript error:

/// <reference path="../lib/phaser.d.ts" />
/// <reference path="../lib/phaser.plugin.isometric.d.ts" />

var game = new Phaser.game(
  // game stuff
)

game.plugins.add(new Phaser.Plugin.Isometric(game));  // <- error here

The error is: "error TS2345: Argument of type 'Isometric' is not assignable to parameter of type 'PluginConstructorOf'. Type 'Isometric' provides no match for the signature 'new (...parameters: any[]): Plugin'"

I've trawled through Phaser's Plugin types and tried to hack things together to make it work but haven't had success so far, probably solely because of my own incompetence. I'm pretty sure this is the relevant section in Phaser. Any help is hugely appreciated!

Hello,
Current npm version consist from 0.9.2, please update npm version to latest release

Hi,

Based on the pointer interaction if I try to use a different asset image size, like 64*32 for example, the tile.isoBounds.containsXY don't work anymore.

This line seems to be the problem, if I remove it, it works.

https://github.com/lewster32/phaser-plugin-isometric/blob/master/src/Cube.js#L583

or am I doing something wrong ?

In character control examples such as this, often pushed objects will 'stick' to the character when the character reverses direction. Need to check if this also happens in standard Phaser.Physics.Arcade when using the same parameters or if this is a biproduct of the z axis separation.

There seems to be an issue that as far as I can tell is not related to the projector which is causing awkward and inconsistent rounding of pixel art. The problem may be related to anchors (both sprite and the projector offsets) the dimensions of the assets used, screen positions or some combination of all of these factors.

Hello, I'm using this plugin with Phaser CE 2.10.0. Tried using Typescript but had a few blockers due to a few types that seems to be incorrect. Maybe others who have faced the same issues with Typescript can chime in as well.

I found one fork that has the updated, working typed definitions (I tried it myself in my project, it works seamlessly). So what do you think @kekel87, any plans to merge your type definitions here?

Or maybe others have already newer or even better typed definitions to be merged here?

Thank you. Great plugin, btw.

I met this error error TS2339: Property 'containsXY' does not exist on type 'Point3'. with my code

isoGroup: Phaser.Group;
...
this.isoGroup.forEach((tile: Phaser.Plugin.Isometric.IsoSprite) => {
    let inBounds: boolean = tile.isoBounds.containsXY(
    this.cursorPos.x,
    this.cursorPos.y
);

I found this lines of code in in phaser.plugin.isometric package
phaser.plugin.isometric.d.ts:

class IsoSprite extends Phaser.Sprite {
    ...
    isoBounds: Phaser.Plugin.Isometric.Point3;
    ...
}

But in phaser-plugin-isometric.js:

Phaser.Plugin.Isometric.IsoSprite.prototype.resetIsoBounds = function () {
    if (typeof this._isoBounds === "undefined") {
        this._isoBounds = new Phaser.Plugin.Isometric.Cube();
    }
    ...
};

In runtime console.log of any Phaser.Plugin.Isometric.IsoSprite instance shown that it has in __proto__ key isoBounds with instance of Phaser.Plugin.Isometric.Cube as a value

In this example: http://www.rotates.org/phaser/iso/examples/character.htm

When holding both arrowkeys and then trying to jump, it doesn't work. The other directions work though.

And now in my own game, I experience the same problem, that jumping doesn't work while walking in one specific direction.

How to fix this?

At phaser.plugin.isometric.d.ts#L324 it is listed as a single argument, but at, phaser-plugin-isometric.js#L3767 it is two.

While trying to get up examples in Visual Studio 2015 v.3, it screams about this while trying to use

this.physics.isoArcade.intersects( this.currentPlayer.sprite.body, this.currentPlayer.sprite['target'].body )

But that is there to use. I figure I am either not using this as intended or the typing may be off?