PIXI-Display + PIXI-UI zIndex\Order

[clifftm]

Hello.

In additional to this issue https://github.com/pixijs/pixi-ui/issues/21  ( dublicate here, because i'm afraid that nobody reads those issues (the last was on 2 mart with no response) ), can you give me an advice:

Here some sample code

/* Init PIXI */

this.app = new PIXI.Application(1200,800,{view: document.getElementById("cvs")});

/* Init PIXI-Display */

this.app.stage = new PIXI.display.Stage();

/* Init PIXI-UI */

this.uiStage = new PIXI.UI.Stage(app.renderer.width, app.renderer.height);

/* Create test layer */

this.layer = new PIXI.display.Layer();

this.layer.group.enableSort = true;

/* Add layer and uiStage on display-stage */

this.app.stage.addChild(this.layer);

this.app.stage.addChild(this.uiStage);

 

/* Create left container */

let leftContainer = new PIXI.UI.SliceSprite(background_img, 4);

leftContainer.container.zIndex = 10; //UIBase.js in pixi-ui doesn't implements zIndex and zOrder property, so i need to modify "inner private property" container, what is ugly...   <--- Problem is here

leftContainer.parentLayer = this.layer ; //UIBase.js in pixi-ui implements parentLayer property

 

/* Create right container */

let rightContainer = new PIXI.UI.SliceSprite(background_img, 4);

rightContainer.container.zIndex = 9;

rightContainer.parentLayer = this.layer ;

 

/* Add them to ui-stage */

this.uiStage.addChild(leftContainer);

this.uiStage.addChild(rightContainer)

 

/* Move left container to the right */

PIXI.UI.Tween.fromTo(leftContainer, 2,{left: "0%"},{ left: "100%" }, PIXI.UI.Ease.Sine.SineOut);

so is it possible to implement zIndex and zOrder props in UIBase? like 

zIndex: {

get: function () {

return this.container.zIndex;

},

set: function (val) {

this.container.zIndex = val;

}

and another question:

Why if i add

this.uiStage.parentLayer = this.layer;

 a brightness of my container is increasing? ( notice that a containers also have .parentLayer = this.Layer ) I feel that they render twice, but not sure (attached 2 images, with and without that line)

Thanks.

[ivan.popelyshev]

You are using two (2!!!) plugins that require exact knowledge how they work, and cannot be treated as a blackbox.

I didnt use pixi-ui, however I'm author of pixi-display. You cant just set parentLayer of one element and zIndex in its children, that's not how it works. Every element that you set "parentLayer" for is added in "_sortedChildren" array. Those elements are rendered inside the layer in "zIndex asc,zOrder desc" order. zIndex exists in all "PIXI.Container", even if the class is extended by some plugin like pixi-ui. So, zIndex exists for UIBase. If what I'm saying is not right, please create a fiddle, unfortunately my telepathy doesn't work good enough on this case to apply it to piece of code.

You can also ask @bQvle about his pixi-ui

[clifftm]

Thanks for answer.

I'v Made a codepen https://codepen.io/clf/pen/OEEMWG . I understand, that layer will display a sort group of elements by zOrder\zIndex that "registered" to it by .parentLayer \ .parentGroup.

Try to uncomment 12 line and containers become brightener. Why?

And yes, UI.Stage extends a PIXI.Container. But only stage, other UI elements contains their children in UIObject.container, so that's why i have to write leftContainer.container.zIndex = 10

Another thing i don't understand - for example - i have a layer that adds a shadow to the objects wich he is displaying like this

LAYER_WITH_SHADOW_FILTER.on('display', (element) => {

let blurFilter = new PIXI.filters.BlurFilter();

let shadowFilter = new PIXI.filters.DropShadowFilter();

element.filters = [shadowFilter];

});

ok, but is there any event on wich i can clear that filter

element.filters = null;

when my object changes his parentLayer ? that shadow exists even if i set 

SOME_ELEMENT.parentLayer =  LAYER_WITH_SHADOW_FILTER;

SOME_ELEMENT.parentLayer =  ANOTHER_LAYER_WITHOUT_FILTERS;

I'm confusing that "sending" element with one state to some layer, it "returns" from it with unpredictable props, that i have to control outside that layer. Didn't find reference to emit events neither in pixi.js nor pixi-layers.js

PS: Don't know if that forum will give a ban for answering on "ru", but for me it will be easy to understand   @bQvle  last visited June 29, 2017 ... Is he alive? 

[ivan.popelyshev]

Ok, its a real bug. If you add both container and one of its child to same layer, pixi-layers will draw the child two times. I believe you could make that fiddle without pixi-ui. Now I have to think a way to fix that.

[ivan.popelyshev]

Also, using filters like that is a very bad idea, dont re-create filter each frame, 'display' is called for each active child of layer every frame.

Also, layers dont have bounds, you have to overide calculateBounds() or just set global filterArea on them manually.

Also, DropShadowFilter is a hacky mess, I dont have any guarantees that it will work in your case.

I advice to read how Filters/ FilterManager in pixi works (no docs, only the code), and how exactly pixi-layers hacks the internal rendering process.