Can´t manage AnimatedSprite to work

[AlbertoVGDD]

 Hi, I am complete beginner with JavaScript and pixi.js. I've been learning these days the basics (sprites, shapes, text, buttons...) following the tutorial on the GitHub page. I was planning to use now animated sprites (using a sprite sheet) and found this on the documentation for the version I'm using (v4.8.2). That page contains a piece of code that doesn´t work on my project, and it is not recognised by vscode's intellisense either.

// The more efficient and simpler way to create an animated sprite is using a {@link PIXI.Spritesheet}
// containing the animation definitions:


 PIXI.loader.add("assets/spritesheet.json").load(setup);

 function setup() 
{
   let sheet = PIXI.loader.resources["assets/spritesheet.json"].spritesheet;
   animatedSprite = new PIXI.extras.AnimatedSprite(sheet.animations["image_sequence"]);
 }
 

Is it deprecated, or am I missing something that is not mentioned there? Thanks in advice for your help.

EDIT: I attached some pictures that showcase my issue.

Edited September 7, 2018 by AlbertoVGDD
changed code

[ivan.popelyshev]

According to https://github.com/pixijs/pixi.js/blob/dev/src/core/textures/Spritesheet.js#L74 , you can specify animations in json file , use TexturePacker.

If you want just make single big texture manually, find how "new PIXI.Texture" works and how to pass a frame there, what is BaseTexture.

We cant help you unless you make a demo (fiddle) that doesnt work for you

[AlbertoVGDD]

5 hours ago, ivan.popelyshev said:

According to https://github.com/pixijs/pixi.js/blob/dev/src/core/textures/Spritesheet.js#L74 , you can specify animations in json file , use TexturePacker.

If you want just make single big texture manually, find how "new PIXI.Texture" works and how to pass a frame there, what is BaseTexture.

We cant help you unless you make a demo (fiddle) that doesnt work for you

I feel like I didn't specify on my issue on the original message, I've just modified it to attach pictures so that my problem is shown properly.

Edited September 7, 2018 by AlbertoVGDD
forgot to quote

[xerver]

The error looks like PIXI.loader.resources doesn't contain an entry for the sheet you loaded. Can you inspect the PIXI.loader.resources object when you are in the setup function? I'd be happy to dig further if you can make a running example of the issue happening.

Should be easy to make a https://pixiplayground.com/#/edit that reproduces your issue.

[AlbertoVGDD]

2 hours ago, xerver said:

The error looks like PIXI.loader.resources doesn't contain an entry for the sheet you loaded. Can you inspect the PIXI.loader.resources object when you are in the setup function? I'd be happy to dig further if you can make a running example of the issue happening.

Should be easy to make a https://pixiplayground.com/#/edit that reproduces your issue.

What a useful tool! https://pixiplayground.com/#/edit/uX4ioEwjSYJS0bpMTATk7  I don´t know if I have embedded both the spriteSheet.json and spriteSheet.png links . The browser's console gives the same error as the one on my compturer.

[xerver]

OK, so the reason this fails to parse the spritesheet data is because it doesn't detect that this URL is json. It fails because it uses the extension to see if it is json, and the url in your playground doesn't have a json extenion.

After I update it to specify manually to treat it as json it works as expected in terms of loading. There is still an error because the SpritesheetParser is pixi doesn't find any animations in your json data, it is looking for an "animations" property which doesn't exist in your json data.

Hopefully this helps! I updated your playground to specify JSON as the XHR load type: https://pixiplayground.com/#/edit/uX4ioEwjSYJS0bpMTATk7

[AlbertoVGDD]

On 9/7/2018 at 11:59 AM, ivan.popelyshev said:

According to https://github.com/pixijs/pixi.js/blob/dev/src/core/textures/Spritesheet.js#L74 , you can specify animations in json file , use TexturePacker.

If you want just make single big texture manually, find how "new PIXI.Texture" works and how to pass a frame there, what is BaseTexture.

We cant help you unless you make a demo (fiddle) that doesnt work for you

Thanks to  both of you! Now it works perfectly. I thought that Aseprite's animations format was the same as TexturePacker's, that was the problem I had. However, VScode still doesn´t show code suggestions for either  Spritesheet.js, AnimatedSprite.js. I installed node.js on my computer and performed "npm install --save pixi.js". My package.json file shows the latest stable version, so I don´t know what I did wrong.

"pixi.js": "^4.8.2"