pixi Animated sprite won't run with spritesheet

[Cran]

So I wanted a loading animation in the starting phases of my game, like you do, but I am pretty new to pixi so I tried to follow some tutorials to create an animated sprite from a sprite sheet using the built in code in Pixi to extract an animation from a texture packer file, but no matter what I do, i get this message ( load is the animation id)

Uncaught TypeError: Cannot read property 'load' of undefined
    at e.loadProgressHandler (index.html:49)
    at e.o.emit (pixi.min.js:8)
    at pixi.min.js:19
    at t.value (pixi.min.js:10)
    at pixi.min.js:9
    at s (pixi.min.js:9)
    at e.<anonymous> (pixi.min.js:19)
    at pixi.min.js:9
    at pixi.min.js:9

usually there are 2 or 4 of these messages in the console, i saw another page said the issue was because pixi couldn't recognize the json file type because there was no extension, but mine has that, many examples had

let sheet = PIXI.loader.resources["Images/Loading/loadanim.json"].spritesheet;

while I have

let sheet = PIXI.loader.resources["Images/Loading/loadanim.json"];

but with the .spritesheet added it makes things worse, saying this

Uncaught TypeError: Cannot read property 'animations' of undefined
    at e.loadProgressHandler (index.html:49)
    at e.o.emit (pixi.min.js:8)
    at pixi.min.js:19
    at t.value (pixi.min.js:10)
    at pixi.min.js:9
    at s (pixi.min.js:9)
    at e.<anonymous> (pixi.min.js:19)
    at pixi.min.js:9
    at pixi.min.js:9

I've looked at a ton of differen't tutorials and pages concerning glitches like mine, but none of them have told me anything of use, while my code seems to follow the structure of all the other pages, it still rejects my animation file, it could be because of the html, or the pixi file, but as I said I am completely new to this and I have no idea what could be wrong.

index.html loadanim.json

[ivan.popelyshev]

It looks fine, the version with `sheet` should work. Which version of pixijs do you use?

[Cran]

4.5.5, I used the PIXI.min.js file if that affects anything

[ivan.popelyshev]

Author of texture packer started the PR 10 Jul 2018: https://github.com/pixijs/pixi.js/pull/5011 

It was added 3 Sep 2018 in 4.8.2, https://github.com/pixijs/pixi.js/releases/tag/v4.8.2

I recommend to upgrade to latest v4.

Edited December 5, 2019 by ivan.popelyshev

[Cran]

It's allowing me to use .spritesheet without the animations error, but its still giving me the cannot find load of undefined. Not sure what to try now, maybe v5 or something like that?

[ivan.popelyshev]

7 minutes ago, Cran said:

It's allowing me to use .spritesheet without the animations error, but its still giving me the cannot find load of undefined. Not sure what to try now, maybe v5 or something like that?

Once again, even 4.8.8 should work. Yes, sometimes I remember all the possible bugs people can do while doing X, but in this case I don't know.

Pixi is not a black box, and its possible to debug it with devtools.

Edited December 5, 2019 by ivan.popelyshev

[Cran]

How do I use Devtools?

[ivan.popelyshev]

https://developers.google.com/web/tools/chrome-devtools

I think that if you asked this question that means you are not familiar with how people help each other in js world.

Another obvious thing that you can do - just zip the demo or put it to codepen / jsfiddle / codesandbox / wherever you feel comfortable, I can look. 

I dont usually remember that not everyone actually knows common ways of helping

[Cran]

I’m working on an old computer of mine and I’m having a hard time getting the program to run json files for some reason, but because of that I can’t try to test it with the dev tools until I can use my other computer again, I can get a zip of the project though

[ivan.popelyshev]

Which web-server do you use?

[Cran]

locally I have internet information services set up so I can run the file from wwwroot, I don't know if there is a name for that or if that explains it. also, sorry I couldn't get the files on here until now, my other computer was not behavingIt's Sweater Weather.zip

[Cran]

I'm running the localhost link off of chrome if that's important

[ivan.popelyshev]

It works for me.

I don't know much about IIS, so i recommend to use simple node "http-server -c-1".

https://www.npmjs.com/package/http-server

After installation just type "http-server -c-1" in command line in directory that you want to show. Close the window if you dont need that server anymore. "-c-1" means "no cache". By default its on localhost:8080, you can change port with "-p8081"

Edited December 9, 2019 by ivan.popelyshev

[Cran]

This sounds promising, but as I said, I'm really new to this, I don't see a download and I don't know what to do with the text in that link, If it is pretty simple where I use this, or if you could steer me toward a tutorial, that would be awesome, thanks!

[ivan.popelyshev]

You need node.js with npm to install anything like that. Internet is full of those tutorials. Google "tutorial nodejs http-server" or something like that

[Cran]

I found a tutorial to try and find this but it keeps referencing things I don't understand,

https://blog.risingstack.com/node-hero-tutorial-getting-started-with-node-js/

[Cran]

In specific, I don't know what it means by this

Once you install it, you can use a very simple CLI API that you can interact with:

after this it gives me commands like before, but I don't know where they are supposed to go, I tried the terminal but I guess it means something else, like atom or a different editor, or in my project, but I have no idea how to do that or where. Sorry this is my first big language, I started with processing, so I'm a bit clueless.

[jonforum]

hey this should help you.

after install this plugin to vscode.
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

Edited December 14, 2019 by jonforum

[Cran]

Thank you! I think that was all I needed, once I got node running everything seems to be working on its own, the animation is running no issues, however i didn't have to tell the program to use the port I ran a server on (3000) does that mean it just found it on its own or is that something I may have to input myself in the future?

[Cran]

also I am curious if I can turn it off when I am done with it and how, this is the code in the node file

const http = require('http')

const port = 3000

 

const requestHandler = (request, response) => {

  console.log(request.url)

  response.end('Hello Node.js Server!')

}

 

const server = http.createServer(requestHandler)

 

server.listen(port, (err) => {

  if (err) {

    return console.log('something bad happened', err)

  }

 

  console.log(`server is listening on ${port}`)

})

[Cran]

Im actually starting to think just having node installed fixed it, because I don't think the code is breaking when the server is stopping

[Cran]

Ok so I was playing around and while the spritesheet was fixed, now I can't display text, I think this is an issue with the file I'm running out of, as it has been glitchy the entire time I've used it. As I understand it node.js can run a server for pixi, but I don't really understand how to connect the two. as it stands now I have a node.js program making an http server on 3000, so I just need to look up how to run an html file on a certain port? if that makes sense?

[Cran]

I tried what you said about running http-server -c-1 in command line of the directory I wanted to show, but I couldn't use the cd url command to browse to my index.html because it said directory was invalid, so nothing really happened. Thanks for the help! I think I just got an incomplete or outdated tutorial when I first set up Pixi, so this is really helping me out.

[Cran]

Figured it out thank you!

[ivan.popelyshev]

Welcome to the club!