Phaser.Plugin.Isometric.IsoSprite add child does not work

[Robske]

I have been experimenting with the ISO plugin, which is great. I am running into an issue where I need child sprites, or something similar. Using addChild on the isoSprite does not cause an error, but the added child does not get displayed.

 

Is there any way to add a child to an isoSprite?

[lewster32]

I've not actually tested this functionality yet - technically children of IsoSprites should work just like the normal Phaser scene graph but in isometric. I'll investigate this one and get back to you!

[Robske]

I expected it to work the same way. If you want, I can put up a (small) demo site that displays the issue.

[lewster32]

Yes please, I'll be testing this over the weekend but seeing your implementation will likely help a lot.

[Robske]

No when I modified the code a bit, I *do* see the child appearing, but in a strange place.

 

I have a demo running here: 

http://dev.webfeud.com/iso_engine/

 

if you click through the menu until you see the ISO world appear, please click the left-most building. You will see it pop, along with its interior.

The interior is misplaced and I have no clue on how to place it correctly.

 

The code of interest is in elixer_pump.js:

 

var ElixerPump = function (game, x, y, z, frame) {

  console.log('ElixerPump constructor');

  Building.call(this, game, x, y, z, 'elixer.pump8', frame);

 

  this.anchor.setTo(0.5, 0.5);

  // interior

  this.interior = game.add.isoSprite(0, 0, 0, 'elixer.interior4');

  this.interior.anchor.setTo(0.5);

  this.addChild(this.interior);

 

Thank you in advance.

[lewster32]

Hmm yeah - I'll definitely look into this for you. I've only ever tried adding Sprites to IsoSprites, but not tested IsoSprites added to other IsoSprites and how that affects the scene graph. For now I would recommend only adding Sprites to IsoSprites and moving them in standard orthographic (x and y) space, as there are all kinds of additional problems that will inevitably arise from trying to replicate the scene graph axonometrically (for instance, depth sorting - a child of a sprite cannot be rendered behind its parent, but in axonometric projection a child could be behind its parent)

Edited September 19, 2014 by lewster32
Children are always rendered in front of, never behind - whoops :P

[Robske]

Thanks. I figured that would be an issue.

 

I added a normal sprite now, but... guess what. a child sprite covers the initial sprite. Is there any way to put it behind, or is this by design?

 

I updated the demo, so you can see what happens.

[lewster32]

I think I see what you're trying to do - I don't think it'll be possible either way though. Do you want the purple object to be 'inside' the building? I.e. so the pipes above are shown on top of it, but the base rests where it is with the building behind? If so, you're going to have to do this differently, as no amount of fiddling with isometric coordinates will work. The only way I could see that working is if the building consisted of the base, then the purple object on top of that, then the pipes on top of that (or some similar configuration) as with there's no way for the renderer to be able to discern depth from the 2D assets otherwise.

[Robske]

The base is OK. *IF* the purple thingy would be positioned after the building, this would look perfect. It's not the issue of isometric coordinates: I am fine with normal sprites like it is at the moment. The isoSprite was my first hunch, but - as you mentioned - normal sprites work well.

 

All I need is a way to have the renderer render the interior first and the exterior last. That is: the childs of the isoSprite should be rendered before the isoSprite itself, but just in this particular situation. The best way for this would probably be to have an addChildBehind() method on the isoSprite, but my knowledge of the internals is just too limited...

 

I have seen you do some magic on the isoSprites with depth sorting. Would that be something to look into?

[lewster32]

Child sprites will always be rendered in front of their parent (sorry edited my previous post) but the way to get around this is to create an empty IsoSprite and add your two objects to it in the order they need to be rendered (purple thing then building) to create a compound sprite with an IsoSprite 'container'.

[PhasedEvolution]

On 19/09/2014 at 6:55 PM, lewster32 said:

Child sprites will always be rendered in front of their parent (sorry edited my previous post) but the way to get around this is to create an empty IsoSprite and add your two objects to it in the order they need to be rendered (purple thing then building) to create a compound sprite with an IsoSprite 'container'.

@lewster32 So, is it possible to do player.addChild(dog), being player and dog both isoSprites?

[lewster32]

I'm not actually sure what would happen here - it's been a while! Try it, though I'd probably suggest you compose your sprites using normal Phaser Sprite objects, and then add them to an empty IsoSprite object with a manually configured body size.

[Milton]

I had a quick look at this, and the problem is that it projects another 'world', starting from the parent... 
Should be easy to fix, by just checking 'this.(sprite.)parent instanceof Phaser.Plugin.Isometric.IsoSprite'.

[lewster32]

Cheers for the insight Milton! I may sort this out, or if someone using it wants to test it and send a pull request I'll roll it into the main branch.

[Kseiver]

@lewster: What do you recommend to make a character with a gun and can change the gun to another? (Isometric)