zIndex + updateTransform doing nothing, sortChildren doesn't exist?

[skeddles]

I'm confused. It seems to me I'm doing what the docs say. But zIndex still seems to do nothing.

From the docs:

Quote

The zIndex of the displayObject. If a container has the sortableChildren property set to true, children will be automatically sorted by zIndex value; a higher value will mean it will be moved towards the end of the array, and thus rendered on top of other displayObjects within the same container.

As you see, I add two sprites, add them to a container which I set "sortableChildren" on. On each sprite I set the zIndex. I later call updateTransform which is said to update the zIndex. I also tried calling "sortChildren" which the docs say will sort the children of a container by the zIndex, but the function seems to not exist.

As you see the test sprite (a red and green square) is rendered. If you move the player section to after the test section, then a little man sprite is rendered on top of the squares. No matter what I set the zIndex to, nothing seems to change. What am I doing wrong? What are the docs not telling me?

Below is my complete code, or you can see it in a codepen: https://codepen.io/samkeddy/pen/zyMVyp

//Create a Pixi Application
let app = new PIXI.Application({width: 64, height: 64, resolution: 1});
PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST;
app.renderer.backgroundColor = 0x000000;

//Add the canvas that Pixi automatically created for you to the HTML document
document.body.appendChild(app.view);

let Tex = PIXI.utils.TextureCache;
let Loader = PIXI.loader;
let type = PIXI.utils.isWebGLSupported() ? "WebGL" : "canvas";

//loader
Loader.add('test',    'https://i.imgur.com/Y3lcpWg.png');
Loader.add('player',  'https://i.imgur.com/kLtfMYM.png');

Loader.on("progress", function (loader, resource) {
    console.log(Math.round(loader.progress)+'% ', "loading " + resource.name +" sprite"); 
});

//game is loaded
Loader.load(function () {
    console.log('loaded');
  
    let overworld = new PIXI.Container();
    overworld.sortableChildren = true;
    app.stage.addChild(overworld);
    
    //player
    let player = new PIXI.Sprite(Tex['player']);
    player.x = 0;
    player.y = 0;
    player.zIndex=2;
    overworld.addChild(player);
    
    //test
    let test = new PIXI.Sprite(Tex['test']);
    test.x = 0;
    test.y = 0;
    test.zIndex=1;
    overworld.addChild(test);

    overworld.updateTransform();

    console.log(overworld);
});

 

[bubamara]

this is new stuff, you have to use Pixi v5.x

[skeddles]

Ah. Confusing. Thank you.

[ivan.popelyshev]

pixijs.download/dev/pixi.js