JeZxLee

Place Sprite Over All Other Sprites?

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
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.

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

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.