# Container of Sprites cannot generate frames 

**URL:** <https://phaser.discourse.group/t/container-of-sprites-cannot-generate-frames/10419>\
**Category:** Phaser 3\
**Created:** [October 12, 2021, 4:01pm UTC](https://phaser.discourse.group/t/container-of-sprites-cannot-generate-frames/10419 "2021-10-12T16:01:49Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![mikiekwoods](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/mikiekwoods/32/5708_2.png) [@mikiekwoods](https://phaser.discourse.group/u/mikiekwoods)\
**Post date:** [October 12, 2021, 4:01pm UTC](https://phaser.discourse.group/t/container-of-sprites-cannot-generate-frames/10419/1 "2021-10-12T16:01:49Z")

</div>

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

```javascript
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

```javascript
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)

```javascript
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

```javascript
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)

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [October 12, 2021, 4:20pm UTC](https://phaser.discourse.group/t/container-of-sprites-cannot-generate-frames/10419/2 "2021-10-12T16:20:32Z")

</div>

👋

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()`.

---

<div class="post-metadata">

**Author:** ![mikiekwoods](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/mikiekwoods/32/5708_2.png) [@mikiekwoods](https://phaser.discourse.group/u/mikiekwoods)\
**Post date:** [October 12, 2021, 8:26pm UTC](https://phaser.discourse.group/t/container-of-sprites-cannot-generate-frames/10419/3 "2021-10-12T20:26:50Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [October 12, 2021, 11:22pm UTC](https://phaser.discourse.group/t/container-of-sprites-cannot-generate-frames/10419/4 "2021-10-12T23:22:14Z")

</div>

You can also use

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

```