Velith

Pixi-layers.js

Recommended Posts

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 !


 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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 ?



 

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.