Suggestions for compound, dynamic AnimatedSprites?

[xTiming]

Hi there.  I'm beginning to set up animations for a game that I'm creating and have run into an interesting problem - I was wondering if people with more experience than me using PIXI could give some suggestions.

Basically, I will need to create AnimatedSprites for the character's actions, however there is an interesting catch:

The character is made up of four body parts, each with separate spritesheets, from which frames must be taken and combined into animations. One or more of these spritesheets must be able to be changed, at any given time, to another spritesheet with the same dimensions and characteristics and have the AnimatedSprite's frames all update to reflect the change(s). The spritesheets could potentially be changed very often since this is a multiplayer game where players have unrestricted control over their character's appearance at any time.

I have an approach to this, but I am sure that there's an easier way I am missing so I am turning to you guys for advice. My current approach was to create an object which contains the BaseTextures for the spritesheets and AnimatedSprites made up of Textures created from the BaseTextures for each frame of the AnimatedSprite. When one of the player's body parts changes the BaseTexture would just be swapped and the Textures would all update so the AnimatedSprite continues on with the updated look.

I've run into two major problems that I would like some advice on:

1) My original plan was to make a separate AnimatedSprite for each body part and align those AnimatedSprites in a Container to make up the compound animation. However in certain frames a certain body part may need to be moved above or below another body part for the animation to seem natural. Also, having to create multiple AnimateSprites and line them up seems like the wrong approach.

2) A more logical approach in my mind would be to align each frame using Sprites in a Container, however the AnimatedSprite of course only accepts Textures meaning that I would have to render each of the aligned Containers for each frame out to a RenderTexture and every single time a body part is changed all of the renders for all frames would have to be done again and the AnimatedSprites textures updated. This definitely seems like the wrong approach, moreso than number 1.

I'm wondering if anyone has any advice or suggestions for how I can tackle this in a more straightforward and logical way?

 

[Fatalist]

#1 seems pretty straightforward. Why does it seem wrong to you?

I could not understand the second approach...

[xTiming]

22 minutes ago, Fatalist said:

#1 seems pretty straightforward. Why does it seem wrong to you?

I could not understand the second approach...

The first approach, unless I've missed something, gives me little to no control over the order the individual AnimatedSprites are rendered in.

In the 2nd approach I'm rendering a PIXI.Container with the sprites in the right draw order out to a RenderTexture for each frame.  The obvious pitfall is that every single frame needs to be recreated and re-rendered to a RenderTexture when any image changes but it gives me easy control over which order stuff will render in.

I suspect I'm over-complicating this way too much which is mainly why I'm asking for advice here - I'm sure I've missed something that will make this simple and I've just led myself down a rabbit hole for little to no gain.

[Fatalist]

1 hour ago, xTiming said:

The first approach, unless I've missed something, gives me little to no control over the order the individual AnimatedSprites are rendered in.

You have missed container.setChildIndex method You can reorder the children array of a container any way you want.