Container of Sprites cannot generate frames

Phaser 3
1

I’m pretty new to phaser, so let me know if I’m approaching this all wrong.

I want to allow players to have customizable characters, which I would make by placing a series of sprites inside a container.

The class PlayableChar extends the container gameobject class

export default class PlayableChar extends Phaser.GameObjects.Container {
    constructor (data) {
        //set data object to 
        let {scene,x,y,bodyModel,bodyColor} = data;
        let children = [];
        let parts = PlayableChar.partsList(bodyModel,bodyColor);
        for (let p = 0; p < parts.length; p++) {
            children[p] = new Phaser.GameObjects.Sprite(scene, 0, 0, `${parts[p].type}_${parts[p].model}_${parts[p].color}`,0)
        }
        console.log(children)
        super(scene,x,y,children);
        scene.add.existing(this)
        scene.physics.world.enable(this, 0);
        this.bodyModel = bodyModel;
        this.bodyColor = bodyColor;

    }

    static partsList(bodyModel,bodyColor) {
        return [{type:'frontLimbs',model:"general",color:bodyColor},{type:'body',model:bodyModel,color:bodyColor},{type:'backLimbs',model:"general",color:bodyColor}];
    }
    //load all the assets and animations
    static preload(data) {
        let {scene,bodyModel,bodyColor} = data;
        console.log(`bodyModel = ${bodyModel} bodyColor = ${bodyColor}`)
       
        //load all parts
        let parts = PlayableChar.partsList(bodyModel,bodyColor);
        for (let p = 0; p < parts.length; p++) {
            const loadPart = parts[p];
            let partKey = `${loadPart.type}_${loadPart.model}_${loadPart.color}`;
            scene.load.spritesheet(partKey,`assets/images/playableChar/${partKey}.png`,{frameWidth:120,frameHeight:120,margin:2,spacing:3});
            scene.anims.create({
                key: `${partKey}_idle`, 
                repeat: -1,
                frameRate: 12,
                frames: partKey //There I'm just straight up load the whole spritesheet. But I've tried everything, getFramesByNumbers, passing frame objects, etc.
            });
        }

    }
}

In my main scene I can preload like this

this.bodyColor = "teal";
this.bodyModel = "quark";
Player.preload({scene:this,x:330,y:330,bodyModel:this.bodyModel,bodyColor:this.bodyColor});

and instantiate like this (in create method)

this.player = new Player({scene:this,x:330,y:330,bodyModel:this.bodyModel,bodyColor:this.bodyColor});

And that works as expected
But I get an error here

this.player.list[0].play(`frontLimbs_general_teal_idle`);
//Uncaught TypeError: Cannot read properties of undefined (reading 'frame')

And when I console.log the scene, I find the list of animations all have frames with empty arrays.

What’s wrong? and more importantly, how can I accopmlish the goal of loading animatable spritesheets in a container (or any sort of group)

2

:wave:

You can’t use the partKey texture in anims.create() until the texture is loaded/added.

Use the loader complete event, or use a static create() method that you call from scene create().

3

Thanks I realized that now. My mistake.

Also for some reason, I have to use scene.add.sprite instead of this new Phaser.GameObjects.Sprite or the animations don’t show. Not sure why, but I found the solution.

4

You can also use

children[p] = new Phaser.GameObjects.Sprite(scene, 0, 0, `${parts[p].type}_${parts[p].model}_${parts[p].color}`, 0)
  .addToUpdateList();