pixi.js

PIXI.js error `TypeError: Cannot destructure property 'scale' of 'this.data.meta' as it is undefined.`

<!doctype html>
<html>
  <head>
    <script src="https://pixijs.download/release/pixi.js"></script>
  </head>
  <body>
    <script>

        let app = new PIXI.Application({ width: 640, height: 360 });
        document.body.appendChild(app.view);

        (async () => {
            try {
              const texture_path = '/assets/Robot_Run/spritesheet.png'
              const texture_data_path = '/assets/Robot_Run/spritesheet.json'

              let texture_data = await PIXI.Assets.load(texture_data_path)
              let texture = await PIXI.Assets.load(texture_path)

              spritesheet = new PIXI.Spritesheet(
                  texture,
                  texture_data
              );

              } 
            catch(err) {
              console.error(err)
            }
        })()

      </script>
  </body>
</html>

The error message is indicating the failure is at the line numbers for the spritesheet load.

Following this example here: https://pixijs.com/guides/components/sprite-sheets
This is the Github repo: https://github.com/0foo/pixi_experiments

Solution

  • By loading the "spritesheet.json" via the Assets utility, it will automatically be converted to a spritesheet.

    let app = new PIXI.Application({ width: 640, height: 360 });
document.body.appendChild(app.view);

async function start(){
     const sheet = await PIXI.Assets.load('./assets/Robot_Run/spritesheet.json')
     const anim = new PIXI.AnimatedSprite(sheet.animations.enemy);
     anim.animationSpeed = 0.1666
     anim.play()
     app.stage.addChild(anim)
}

start()

    I had to add an "animation" property to your JSON file to make the animation appear:

    {
    "frames":{...},
    "animations": {
        "enemy": ["Foozlecc_Robot_Run_8.png","Foozlecc_Robot_Run_9.png"]
    },
    "meta":{...}
}