Jump to content

PIXI-Display + PIXI-UI zIndex\Order


Recommended Posts


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 */
/* 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 */
/* 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)




Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

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 


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? :(

Link to comment
Share on other sites

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.

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...