Jump to content

zIndex not working (PIXI)


Recommended Posts

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"


Link to comment
Share on other sites

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 by Freckles
Link to comment
Share on other sites

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 by ivan.popelyshev
Link to comment
Share on other sites

@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 {
constructor(frame, placholderText, inputFieldStyle) {
this.container = new PIXI.Container();
this.container.sortableChildren = true;
this.container.interactive = true;
this.inputField = new PIXI.Graphics();
/*some code*/
/*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',
let frame0 = new Frame(300, 100, 100, 50);
let underlineText = new Input(frame0, 'some text', 'underlineStyle');
let frame1 = new Frame(100, 100, 150, 50);
let defaultText = new Input(frame1, 'Password', 'defaultStyle');
/*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*/
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...