Sortable displayobjects

[alaa-eddine]

some times we need that display object to be rendered in a certain order to preserve the z-index.

it'd be good if we can have a way to choose the ordre of the drawn children, even with a sort method or by allowing a separate reder method for individual DisplayObjects so the developer can build it's ordered list, iterate throught objects and render them.

[englercj]

The order of objects in the children array is the order they will be rendered. That means the last one in the array will be rendered "on top"

[alaa-eddine]

now I feel a little dumb xD
when reading the source code I saw a linkedlist in renderDisplayObject and thought that stage.children array was gone in this release ....
nevermind, it's working just fine with stage.children sort :)

btw the 1.3.0 performances are just awesome ! I'm finishing a small code to test WebGL stuff on cocoonjs

thank you :)

[englercj]

Not a problem, glad PIXI is working out for you!

[tengotengo]

var mapContainer = new PIXI.DisplayObjectContainer(),
    unitsContainer = new PIXI.DisplayObjectContainer(),
    menuContainer = new PIXI.DisplayObjectContainer();

mapContainer.zIndex = 5;
unitsContainer.zIndex = 10;
menuContainer.zIndex = 20;

/* adding children, no matter in which order */
stage.addChild(mapContainer);
stage.addChild(menuContainer);
stage.addChild(unitsContainer);

/* call this function whenever you added a new layer/container */
stage.updateLayersOrder = function () {
    stage.children.sort(function(a,b) {
        a.zIndex = a.zIndex || 0;
        b.zIndex = b.zIndex || 0;
        return b.zIndex - a.zIndex
    });
};

stage.updateLayersOrder();

[glebmachine]

Children array are readonly

[ivanpopelyshev]

@glebmachine doesnt mean that you cant call "sort"

[aquachris]

@tengotengo Thank you! Your solution is simple yet elegant.

[bluefeet]

Is @tengotengo's solution really the final solution for this? Being able to change z-index seems to be a primary feature to me. Imagine, in an isometric game where depending on your y-axis one sprite could be considered behind or in front of another sprite. Doing z-index is the traditional way of handling this, and in that case you'd just map the sprites bottom y position to their z-index and done. For now I'll do the sort hack, but seems this should have an official solution.

[themoonrat]

@bluefeet Take a look at https://github.com/pixijs/pixi-display
I think it'd give you the functionality you require

[loadedsith]

If you're here looking for this feature in 2017; it's been implemented in Pixi as zOrder.

https://pixijs.github.io/examples/#/display/zorder.js

[ivanpopelyshev]

@loadedsith pixi-display is updated to latest version, rewritten on TS and there'll be huge patch with a lot of examples this week.

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.