Velith Posted December 24, 2017 Share Posted December 24, 2017 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.jsProblem : 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 ! Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted December 24, 2017 Share Posted December 24, 2017 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 1 Quote Link to comment Share on other sites More sharing options...
Velith Posted December 25, 2017 Author Share Posted December 25, 2017 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 Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted December 25, 2017 Share Posted December 25, 2017 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. Quote Link to comment Share on other sites More sharing options...
Velith Posted December 25, 2017 Author Share Posted December 25, 2017 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 ? Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted December 25, 2017 Share Posted December 25, 2017 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 Velith 1 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.