PixiJS v5 plugin, allows to change rendering order of containers without changing the scene graph.
npm install pixi-layersjs
child.zIndex = 1;
container.sortableChildren = true;
`
Therefore, to avoid any conflicts, pixi-layers sorts only by zOrder,
and zOrder works same direction as zIndex.
That means if you used zIndex = sprite.y or zOrder = -sprite.y in v4, now you have to use zOrder=sprite.y.
Or you can override group sorting function so it sorts like before.
However, you can use a hack for compatibility with v4:
`js
PIXI.display.Group.compareZIndex = function (a, b) {
if (a.zIndex !== b.zIndex) {
return a.zIndex - b.zIndex;
}
if (a.zOrder > b.zOrder) {
return -1;
}
if (a.zOrder < b.zOrder) {
return 1;
}
return a.updateOrder - b.updateOrder;
}
`
$3
PIXI.display.Layer extends Container
`js
var layer = new PIXI.display.Layer();
`
Pixi DisplayObject/Container can be rendered inside its layer instead of direct parent
`js
bunnySprite.parentLayer = layer;
`
Layer can order elements inside of it, by zOrder increase
`js
bunnySprite.zOrder = 2;
cloudSprite.zOrder = 1;
badCloudSprite.zOrder = 1.01;
layer.group.enableSort = true;
`
You can check which objects were picked up into layer
`js
stage.updateStage();
console.log(layer.displayChildren);
//order of rendering:
// bunnySprite (index=1)
// badCloudSprite (index=2, order=1)
// cloudSprite (index=2, order=0)
`
updateStage calls onSort, you can override it
`js
layer.group.on('sort', function(sprite) { sprite.zOrder = sprite.y })
`
Renderer will call "updateStage" automatically, so you can check it after render too
`js
renderer.render(stage);
console.log(layer.displayChildren);
`
Layer bounds take displayChildren into account, unless you switch that flag to false
`
layer.respectDisplayChildrenBounds = true; // its actually true by default
console.log(layer.getBounds()); // takes displayChildren bounds into account
`
When you move a character with attached sprites from different layers to a new stage, you have to change their layers.
Instead, you can create a new display Group:
`
var lightGroup = new PIXI.display.Group();
bunnySprite.parentGroup = lightGroup;
var lightLayer = new PIXI.display.Layer(lightGroup); // only one layer per stage can be bound to same group
`
Groups are working between different stages, so when you move bunny it will be rendered in its light layer.
Layer is representation of global Group in this particular stage.
$3
Its a bit tricky. You have to put this thing in one of your root files that are loaded before everything else!
Make sure that you dont have two copies of pixiJS: one from html, one from browserify, it happens. You'll get strange errors like renderer.incDisplayOrder is not a function in that case.
`
import * as PIXI from "pixi.js";
window.PIXI = PIXI;
require("pixi-layers")
`
$3
If you want sorting to affect children that have different parentLayer than their direct parent,
please set the group sortPriority`. For now, it has two values - 0 by default and 1 for special cases.