Place Sprite Over All Other Sprites?

[JeZxLee]

Hi,

I tried to find this in the docs, but can't.
How do I tell PixiJSv4 to place a sprite over all other sprites?
Thanks!

JeZxLee

[Taz]

The easiest way IMO is to simply put everything else into a container, which is added to the stage before the overlay sprite(s), like this:

var underLayer = new PIXI.Container();
app.stage.addChild(underLayer);

var overLayer = new PIXI.Container();
app.stage.addChild(overLayer);

// now everything added to underLayer will be drawn first
// then everything added to overLayer will be drawn over it

You don't really need the second container, overLayer, since everything added to the stage after underLayer will be drawn overtop of underLayer's children anyway... But it makes the code more consistent/readable IMO so I did it that way for example.

[JeZxLee]

Other game engines have "zOrder", does PixiJSv4 have that?
or I have to do what you explained above?

Thanks!

JeZxLee

[Taz]

There's also pixi-display.js, and the example for it here, that lets you specify zOrder for your sprites, etc.

But if all you want is a sprite that's always on top then it's prob simpler to just use a container for everything but the top sprite and add the top sprite to stage after the container.

[ivan.popelyshev]

There're simple ways like

class DContainer extends Container {
  addChildZ(container, zOrder) {
    container.zOrder = zOrder || 0;
    container.arrivalOrder = this.children.length;
    this.addChild(container);
    this.sortChildren();
  }
 
  sortChildren() {
    const _children = this.children;
    let len = _children.length, i, j, tmp;
    for (i = 1; i < len; i++) {
      tmp = _children[i];
      j = i - 1;
      while (j >= 0) {
        if (tmp.zOrder < _children[j].zOrder) {
          _children[j + 1] = _children[j];
        } else if (tmp.zOrder === _children[j].zOrder && tmp.arrivalOrder < _children[j].arrivalOrder) {
          _children[j + 1] = _children[j];
 
        } else {
          break;
        }
        j--;
      }
      _children[j + 1] = tmp;
    }
  };
}

If you need sort inside the container, use it.

If you need to move one element, just swap it with last element in container, there's swapChildren or something like that in docs. Or remove/add it again.

If you need sort through the tree, use pixi-display, I recommend latest version: https://github.com/pixijs/pixi-display/tree/layers , its called "pixi-layers" instead.

That's why I like gradual approach - choose the solution that corresponds to the scale of your problem. No one will call you stupid if you use just simple things for simple problems  There are people who think "why dont you use complex solution like webpack, too stupid for it?" but seriously, just ignore them.

[ivan.popelyshev]

Update: In v5 there's zIndex field for any object