Pixi-display - worth using for simple depth sorting? about layers

[ivanpopelyshev]

If you dont need to sort through the tree, you can code it on your own: https://github.com/pixijs/pixi-display/wiki#how-to-not-use-pixi-display

As you see, I favor gradual approach.

[Pandan]

Ahh, thanks I missed the wiki.
Then I go for just sorting on each update and re-adding them to the list.

[ivanpopelyshev]

I'm sure you will figure out the best sorting algorithm for your game. When you actually need to sort through the tree, give me your cirrent algorithm and i'll tell you how to embed it into pixi-display.

[Pandan]

In my case the displaylist is really shallow.
I just have one object (this.display) where I keep everything.
Below my render method, in the end I have added the sorting stuff (not tested yet).
Don't know if .sort is bad for performance.

render() {
  const startCol = Math.floor(this.cameraX / MapConfig.tileSize.width);
  const startRow = Math.floor(this.cameraY / MapConfig.tileSize.height);
  const endCol = Math.ceil(startCol + (this.cameraWidth / MapConfig.tileSize.width));
  const endRow = Math.ceil(startRow + (this.cameraHeight / MapConfig.tileSize.height));
  const offsetX = -this.cameraX + startCol * MapConfig.tileSize.width;
  const offsetY = -this.cameraY + startRow * MapConfig.tileSize.height;
  // Mark previously moved items.
  for (let i = this.activeItems.length - 1; i >= 0; i--) {
    this.activeItems[i].remove = true;
  }
  // Compensate for none tiled layers.
  this.playerContainer.x = -Math.abs(this.cameraX);
  this.playerContainer.y = -Math.abs(this.cameraY);
  // Move items that are visible
  for (let c = startCol; c <= endCol; c++) {
    for (let r = startRow; r <= endRow; r++) {
      const x = (c - startCol) * MapConfig.tileSize.width + offsetX;
      const y = (r - startRow) * MapConfig.tileSize.height + offsetY;
      // If item has been moved previously
      const item = this.itemList[`${c}_${r}`];
      if (item) {
        item.x = x;
        item.y = y;
        item.remove = false;
      } else {
        this.addItem(c, r, { x, y }, MapConfig.tileSize);
      }
    }
  }
  // Remove items that has not moved
  for (let i = this.activeItems.length - 1; i >= 0; i--) {
    if (this.activeItems[i].remove) {
      this.removeItem(i);
    }
  }
  // Depth sorting
  this.activeItems.sort((obj1, obj2) => obj1.display.y - obj2.display.y);
  for (let i = this.activeItems.length - 1; i >= 0; i--) {
    this.display.addChild(this.activeItems[i].display);
  }
}

[ivanpopelyshev]

That page was updated. I suggest to look at new version, it has faster sorting.