I was trying to use PIXI.js to create an animation on the web. I needed to load a spritesheet with PIXI.Loader.Shared.add()
and then use it with PIXI.AnimatedSprite()
to create the animation.
This is my code with bugs:
PIXI.Loader.Shared.add(`assets/0.json`).load(sceneLoad);
function sceneLoad() {
const scene = new PIXI.Container();
const s = PIXI.Loader.Shared.resources["assets/0.json"].spritesheet.textures;
let eyes = [s['Eyes.png'], s['ClosedEyes.png']];
eyes = new PIXI.AnimatedSprite(eyes);
scene.addChild(eyes); // Where the error occurs
}
This is the error I had:
Uncaught TypeError: Cannot set properties of undefined (setting '_parentID')
at e.addChild (pixi.min.js:8)
at sceneLoad (scenes.js:40)
at t.dispatch (pixi.min.js:8)
at e._onComplete (pixi.min.js:8)
at pixi.min.js:8
at s (pixi.min.js:8)
at e.use (pixi.min.js:8)
at pixi.min.js:8
at pixi.min.js:8
I checked this thread with the same error. But it was about a different PIXI.js method. And I checked this thread with the same error. But the answer wasn’t explained and was about a different PIXI.js method.
This is the spritesheet I was using with its JSON:
{"frames": {
"ClosedEyes.png":
{
"frame": {"x":500,"y":0,"w":500,"h":700},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":500,"h":700},
"sourceSize": {"w":500,"h":700}
},
"Eyes.png":
{
"frame": {"x":0,"y":700,"w":500,"h":700},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":500,"h":700},
"sourceSize": {"w":500,"h":700}
}},
"meta": {
"app": "https://www.codeandweb.com/texturepacker",
"version": "1.0",
"image": "1.png",
"format": "RGBA8888",
"size": {"w":1373,"h":1482},
"scale": "1",
"smartupdate": "$TexturePacker:SmartUpdate:f87f23b00c6d9d315163af7aa5edde4e:c4a362a6939011366e8ebf2df4b161e1:f91cade670d3cd0da3efe30dce0ef325$"
}
}