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

Source

alaa-eddine

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

tengotengo on 25 Mar 2015

👍2 ❤1

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"

englercj on 29 Aug 2013

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

alaa-eddine on 30 Aug 2013

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

englercj on 30 Aug 2013

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

tengotengo on 25 Mar 2015

👍2 ❤1

Children array are readonly

glebmachine on 9 Dec 2015

@glebmachine doesnt mean that you cant call "sort"

ivanpopelyshev on 1 Jan 2016

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

aquachris on 16 Mar 2016

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.