Jump to content

Best way to group sprites for paperdoll?


Recommended Posts

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 :)

Link to comment
Share on other sites

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;
  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 {
      _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.

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

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.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...