Pixi-layers.js

[Velith]

Hi, 

First of all, I apologise for any mistakes in my english.

EDIT (Solved) :

I forgot to replace the "old" stage with the display one :
app.stage = new PIXI.display.Stage();

and didn't notice the new 'layers' page http://pixijs.io/examples/#/layers/zorder.js (not http://pixijs.io/examples/#/display/zorder.js).

My objective :
I'm making an isometric game and I need to sort elements by Y coordinate.

For instance, the player is moving and there is a tree :
- I want to display the player after the tree when player.y >  tree.y to make illusion that he is going IN FRONT OF the tree
- And I want to display the player before the tree when player.y < tree.y to make illusion that is going BEHIND the tree.

(I hope it's clear)

Setup : Pixi v4.6.1, last pixi-layers.js

Problem : 
I made this before with pixi-display.js and i try to do the same now with pixi-layers.js but I fail to do it (even with the old one).
=> zIndex is not taking into account, only the initial order (insertion order) is used.

// Create the layer
const sortedLayer = new PIXI.display.Layer();

// Player sprite
const player = new PIXI.Sprite(resources["player"].texture);
player.x = ...
player.y = ...
player.parentLayer = sortedLayer;
stage.addChild(player);	

// Tree sprite
const tree = new PIXI.Sprite(resources["tree"].texture);
tree.x = ...
tree.y = ...
tree.parentLayer = sortedLayer;
stage.addChild(tree);

// Try to change his displayOrder (without success)
player.zIndex = 2;
tree.zIndex = 1;
sortedLayer.group.enableSort = true;

// From wiki, but display : "undefined" and in fact i do not see this method in the pixi-layers.js
console.log(sortedLayer.displayChildren);

I use : https://github.com/pixijs/pixi-display to implement this code and there is a bonus question about the 
"layer.displayChildren" that is undefined Is there something missing or the documentation is not updated ?

I try to use Pixi.Display.Group either but no success.

I know there is : http://pixijs.io/examples/#/display/zorder.js and i try to do it but failed  (Because I think I didn't use the "stage.displayList = new PIXI.DisplayList" i just see it right now... maybe there is something like that i missed too in my example ?) 

Thanks for your help !

 

[ivan.popelyshev]

its in sortedLayer._sortedChildren now  new example is here: http://pixijs.io/examples/#/layers/zorder.js

Most of pixi-display users moved to layers branch, so its default now. The idea is that with new API you can do things like that: http://pixijs.io/examples/#/layers/lighting.js

[Velith]

I didn't notice the difference between http://pixijs.io/examples/#/layers/zorder.js and http://pixijs.io/examples/#/display/zorder.js

The main problem was I forgot to replace the app.stage with the Pixi.Display.Stage.

Thank you for your fast response :o. 

I update the answer in the original post

[ivan.popelyshev]

Its good that you found it. I can give you invite in pixijs slack if you want faster answers. I really care about every user of display/layers, because that's new API that other renderers dont have, its based on my experience.

However main use-case for it is not sorting, there are simple algorithms for it: https://github.com/pixijs/pixi-display/wiki#how-to-not-use-pixi-display  The main case is when you need to re-order stuff THROUGH the tree. Especially if you need to change order of 2 elements, and 998 has to stay. Other implementations just sort 1000 elements, while this one doesn't.

[Velith]

4 hours ago, ivan.popelyshev said:

I can give you invite in pixijs slack if you want faster answers.

It would be nice, thank you. Can you send me that in PM ?

4 hours ago, ivan.popelyshev said:

However main use-case for it is not sorting, there are simple algorithms for it: https://github.com/pixijs/pixi-display/wiki#how-to-not-use-pixi-display  The main case is when you need to re-order stuff THROUGH the tree. Especially if you need to change order of 2 elements, and 998 has to stay. Other implementations just sort 1000 elements, while this one doesn't.

Yes I saw the wiki but i'm not sure that it's simpler than to use pixi-layers in my case. 

I have 2 mode that need to play with display order :
- One that use 3 stages of parallax  (background, main, foreground and in background for instance there is element farthest than others to made the parallax effect)
- One isometric where the player position change the elements order around him (so each time his 'y' change, potentially I need to reorder some elements)

What do you think ?



 

[ivan.popelyshev]

9 minutes ago, Velith said:

I have 2 mode that need to play with display order :
- One that use 3 stages of parallax  (background, main, foreground and in background for instance there is element farthest than others to made the parallax effect)
- One isometric where the player position change the elements order around him (so each time his 'y' change, potentially I need to reorder some elements)

What do you think ?



 

Solution depends on your case: how many players are there, how big are other objects e.t.c. , I have written multiple solutions and I can share code to one of them. See you in pixijs slack