zIndex not working (PIXI)

[Freckles]

I have a class that extends PIXI.Graphics and created grapics objects in the class. I give them zIndex-es seperately but they show up as if the last item created is the one that is visible. What can be a problem here?

[ivan.popelyshev]

Suppose there are multiple elements with zIndex set inside same container. Then you can enable `container.sortableChildren = true` , and pixi will automatically sort when you change any zIndex value of a child. To understand why is it like that, please read https://github.com/pixijs/pixi.js/blob/dev/packages/display/src/Container.ts

However, if you want to sort through the tree, ignoring container hierarchy, you have to use special plugin, https://github.com/pixijs/pixi-layers/ , it allows to put elements into one container virtually and sort them there. Do not use it if you dont understand what is "through the tree"

 

[Freckles]

I missed this part: `container.sortableChildren = true`

thank you

[themoonrat]

There is a setting to enable this for all containers by default if you wish

https://pixijs.download/dev/docs/PIXI.settings.html#.SORTABLE_CHILDREN

[Freckles]

I did as you advised.

I have a 'background' object that has -1 zIndex, so I thought all the other objects would appear on top.

When I create one object using the class it's working fine. But when I create multiple objects then the object that was created the last appears on 'background' and the remaining objects are not seen.

Did I mess up? 

Edited June 24, 2020 by Freckles

[themoonrat]

If you could put a little demo on https://www.pixiplayground.com/#/edit we could take a look for you

[ivan.popelyshev]

look in render() function. all children are rendered in the same order they appear in `children` array. The order of addChild() is important. if A and B have same zIndex, they will be rendered in their original order. If you want to debug it, look how `children` array is formed: place breakpoint, watch, e.t.c.

Don't treat pixi like a black box.

Edited June 24, 2020 by ivan.popelyshev

[Freckles]

@ivan.popelyshev thanks, I know that the order is important, what I don't get is why the two elements with the same zIndex don't appear at the same time as they did before all of this changes.

@themoonrat I don't get a way to shorten the code to send a demo. But basically I have this situation

class Input extends PIXI.Graphics {

 

inputFieldStyle;

 

constructor(frame, placholderText, inputFieldStyle) {

super();

 

this.container = new PIXI.Container();

this.addChild(this.container);

this.container.sortableChildren = true;

this.container.interactive = true;

 

this.inputField = new PIXI.Graphics();

/*some code*/

this.container.addChild(this.inputField);

/*I have multiple items like this created and added into the container, including this.background. I also have some callbacks, setters...*/

this.background.zIndex = -1;

this.background.alpha = 0;

    }

}

export { Input };

/////////////////////////////////////////////////////////////////////////////////////////////////

import { Input } from './modules/input.js';

let app = new PIXI.Application({

width: window.innerWidth,

height: window.innerHeight,

antialias: true,

transparent: false,

resolution: 1,

autoDensity: true.width,

resizeTo: window,

backgroundColor: '0xffffff',

});

document.body.appendChild(app.view);

let frame0 = new Frame(300, 100, 100, 50);

let underlineText = new Input(frame0, 'some text', 'underlineStyle');

app.stage.addChild(underlineText);

 

let frame1 = new Frame(100, 100, 150, 50);

let defaultText = new Input(frame1, 'Password', 'defaultStyle');

app.stage.addChild(defaultText);

 

/*Both objects are visible unless I change the alpha property (this.background.alpha = 1 in input.js) in this way I wanted to make sure both of the objects are visible so that I can manage their click events. But only defaultText is visible*/

[ivan.popelyshev]

are you sure background zIndex has to be -1 and not 1? zIndex in web usually sorted different way

[Freckles]

I set it to 1 and set all the others as 2 but nothing has changed

------------

I solved the problem, thank you for your help

Edited June 24, 2020 by Freckles
solved the problem