Best way to group sprites for paperdoll?

[soul]

So I've got some pixel art, in which I've got a base character who is naked, and then I've got items that match the animation of this base character, helmets, bodies, legs, etc. 

I need the items to be over the character z-index wise (I'm using Pixi DisplayGroups currently for z sorting), because obviously we can't sort by Y, or else a helmet would appear under the base sprite for example. So we must put it on a higher layer. The issue then is, if I walk over other sprites (monsters or whatever), since the armor is on a higher layer, the armor will render over their sprites always, while my underneath base sprite is of course Y sorted normally. 

So I need a way to put all the items over the character, but keep it on the same z layer so that it can be y sorted properly.

I was looking at RenderTexture but there doesn't seem to be a way to do it animated?

Do I add all the items to the base sprite as a child? I tried this but it seems the sub items don't move when I move the base sprite position.

Or do I create an entirely new container, and add all the sprites to it, base sprite, items etc. Then set the z-layer of the entirely new container I just created? I did this but when moving the container, the sprites inside it were all offset by a huge huge margin and not actually at the X and Y I was specifying.

 

Thanks

[ivan.popelyshev]

You can sort elements inside same container, its easier to do with naive approach from cocos2d:

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;
    }
  };
}

But when you need to sort across containers, like, when character has a bound shadow, a healthbar and sometimes a light, DisplayGroups are perfect. Also, there's better version of them now: https://github.com/pixijs/pixi-display/tree/layers , look at the demo: http://pixijs.github.io/examples/#/layers/lighting.js . Beware, API differs from previous pixi-display.

You can use both approaches depending on your task

Also, my friend did something like that: https://gameofbombs.com/ctor/index.html , and that implementation actually uses colors to determine parts of helmet that is behind other elements. Its pure canvas2d madness.

Yeah, if you can, just combine several spritesheets into one using RenderTexture. That'll make things easier, especially for better blending.