AlbertoVGDD

Can´t manage AnimatedSprite to work

Recommended Posts

 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.

chrome_2018-09-07_12-11-21.png

Code_2018-09-07_12-09-34.png

Code_2018-09-07_12-14-00.png

Edited by AlbertoVGDD
changed code

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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 by AlbertoVGDD
forgot to quote

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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"

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.