Freckles Posted June 24, 2020 Share Posted June 24, 2020 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? Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted June 24, 2020 Share Posted June 24, 2020 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 1 Quote Link to comment Share on other sites More sharing options...
Freckles Posted June 24, 2020 Author Share Posted June 24, 2020 I missed this part: `container.sortableChildren = true` thank you Quote Link to comment Share on other sites More sharing options...
themoonrat Posted June 24, 2020 Share Posted June 24, 2020 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 1 Quote Link to comment Share on other sites More sharing options...
Freckles Posted June 24, 2020 Author Share Posted June 24, 2020 (edited) 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 Quote Link to comment Share on other sites More sharing options...
themoonrat Posted June 24, 2020 Share Posted June 24, 2020 If you could put a little demo on https://www.pixiplayground.com/#/edit we could take a look for you Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted June 24, 2020 Share Posted June 24, 2020 (edited) 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 Quote Link to comment Share on other sites More sharing options...
Freckles Posted June 24, 2020 Author Share Posted June 24, 2020 @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*/ Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted June 24, 2020 Share Posted June 24, 2020 are you sure background zIndex has to be -1 and not 1? zIndex in web usually sorted different way Quote Link to comment Share on other sites More sharing options...
Freckles Posted June 24, 2020 Author Share Posted June 24, 2020 (edited) 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 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.