Pixi.js: Sortable displayobjects

Created on 29 Aug 2013  ·  12Comments  ·  Source: pixijs/pixi.js

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.

🤔 Question

Most helpful comment

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();

All 12 comments

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"

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 :)

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

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();

Children array are readonly

@glebmachine doesnt mean that you cant call "sort"

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

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.

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

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

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

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.

Was this page helpful?
0 / 5 - 0 ratings