How does zOrder work in pixi-display plugin?

[caymanbruce]

@ivan.popelyshev I have tried to use pixi-display plugin in my project to add sprites dynamically in runtime. But I am confused with z-order's ordering. In my understanding, the element with higher zOrder should be placed on the top and the one with smaller zOrder should be underneath other elements with higher zOrder.

But in this example: zOrder example, the one with higher zOrder is placed at the back. But negative value zOrder elements always under positive value zOrder elements. 

So when I use pixi-display to create new sprite and want to place it underneath the previous sprite, I need to give it a z-order that is higher than the previous one, is that correct? This is very confusing. In my test, the elements with positive value z-order are also under the elements with negative value z-order.

[ivan.popelyshev]

Sometimes its about author's wish. Asking that is like "Why Imagenary Unit `+i` is at the top of the complex plane" (https://en.wikipedia.org/wiki/Imaginary_unit) . Of couse people could put `-i` there instead and it could complicate things a lot in formulas  , or "Why spine uses SHEAR instead of SKEW, I'm a web-designer, I know SKEW is much better"

zOrder is distance from camera to the object, the object with biggest z-order is at the bottom, its very far away. (Imagine 3d game)

zIndex though works like in web: biggest z-index is at the top.

As for the plugin, there are two versions of API: 

1) old one, https://github.com/pixijs/pixi-display , example: https://pixijs.github.io/examples/#/display/zorder.js

In this version zIndex is applied to groups, and zOrder for individual elements. In which order it renders? It somehow shuffles subtrees, you have to read the code to understand. It also doesnt like masking or filters.

2) new one, https://github.com/pixijs/pixi-display/tree/layers , example: https://pixijs.github.io/examples/#/layers/lighting.js , https://pixijs.github.io/examples/#/layers/zorder.js

New one is easier to understand: its just renders all elements with same group in corresponding layer. You can also specify either zIndex either zOrder for them, whatever works for you. Filters and masks are working just fine.

 

[caymanbruce]

@ivan.popelyshev Thanks for clarifying. I am using pixi-display plugin now because this one has npm package. Therefore it's easier for me to integrate with my code or remove after new version is released  I am not using masking or filters now so that's all right.

[ivan.popelyshev]

OK, both plugins are fine I'll put "layers" version in npm later, when pixi-v5 gets released. Otherwise people who use npm will have to update API usage, and its.. i hated it when working npm modules are updating. But now I fix major version of my dependencies, its ok, but most of people dont do that.