I'm currently trying to animate a composite sprite and I currently have a working version, but it seems quite inefficient and I'm wondering if there's a built-in method that accomplishes what I'm trying to do. I've searched the documentation but to be quite honest, it's not that great and it's not particularly helpful.
My composite sprite is composed of several parts: a head, body, arms, and a face. To create the composite sprite, each of the pieces are attached onto another piece using a common joint point, e.g. neck/shoulders/nose. Each piece can have its own independent animation frames, so for example the body could have 3 frames (e.g. chest puffing) while the face has 2 (e.g. blinking) and the rest of the parts aren't animated. The reason for splitting into different parts is to allow a high degree of customization of the player's sprite.
The way I'm currently animating and rendering this composite sprite is by creating every possible permutation of the composite sprite and then adding/removing the frames as needed. For example:
function createFrame1() {
let head = new PIXI.Sprite(resources["assets/stand10.head.png"].texture);
let body = new PIXI.Sprite(resources["assets/stand10.body.png"].texture);
let arm = new PIXI.Sprite(resources["assets/stand10.arm.png"].texture);
let face = new PIXI.Sprite(resources["assets/default.face.png"].texture);
let sprite = new PIXI.Container();
sprite.addChild(head);
sprite.addChild(body);
// ...
body.x = 4;
body.y = 40;
// ...
return sprite;
}
function createFrame2() {
let head = new PIXI.Sprite(resources["assets/stand10.head.png"].texture);
let body = new PIXI.Sprite(resources["assets/stand11.body.png"].texture);
let arm = new PIXI.Sprite(resources["assets/stand10.arm.png"].texture);
let face = new PIXI.Sprite(resources["assets/default.face.png"].texture);
let sprite = new PIXI.Container();
sprite.addChild(head);
sprite.addChild(body);
// ...
body.x = 5;
body.y = 39;
// ...
return sprite;
}
// ...
let playerIdle = [ createFrame1(), createFrame2(), ..., createFrameN() ];
function animate() {
requestAnimationFrame(animate);
stage.removeChild(sprite);
frame += 1/30;
if (frame >= N) {
frame = 0;
}
sprite = playerIdle[Math.floor(frame)];
stage.addChild(sprite);
render(stage)
}
The issue I have with this is that if any container's properties need to be updated, there is no way to apply these changes to all the different animation frames easily - you'd need to iterate over the array and apply the settings to each container. Switching to another animation, i.e. walking, proves to be annoying as well.
Is there any built-in class that can handle my use-case?