Sign in to follow this  
Cran

Animated sprite won't run with spritesheet

Recommended Posts

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

Share this post


Link to post
Share on other sites

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 by ivan.popelyshev

Share this post


Link to post
Share on other sites

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?

Share this post


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

Share this post


Link to post
Share on other sites

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 :)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 by ivan.popelyshev

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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 = (requestresponse=> {
  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}`)
})

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.