Jump to content

Can't create a basic JSON Spritesheet "undefined"


forleafe
 Share

Recommended Posts

I'm following the directions in the documentation to the T here, and I'm just not getting why this isn't working.

 

 var state, bunny, sheet;
// Create our application instance
var app = new PIXI.Application({
    width: window.innerWidth,
    height: window.innerHeight,
    backgroundColor: 0x2c3e50
});
document.body.appendChild(app.view);

// Load the bunny texture
PIXI.Loader.shared.add("sprites/spritesheet.json")
    .load(spriteSetup)
    .load(startup);

function spriteSetup(){
    sheet = PIXI.Loader.shared.resources["sprites/spritesheet.json"].spritesheet; 
}

function startup()
{

    bunny = new PIXI.Sprite(sheet.textures["bunny.png"]);
}

with this I'm getting "TypeError: sheet is undefined"

Why..? The directions on the documentation say:

 

PIXI.Loader.shared.add("images/spritesheet.json").load(setup);

function setup() {
  let sheet = PIXI.Loader.shared.resources["images/spritesheet.json"].spritesheet;
  ...
}

What am I missing here?... Why is sheet coming up undefined for me? Particuarly, in the console the part where it comes up "undefined is at the very end, that "spritesheet" bit. That property/method just isn't there.

I'm wanting to blow past this here, but PIXIv5 has been giving me a lot of little issues like this. I used to be able to create new applications so easily, now I'm getting hung up forever over the dumbest things.

 

Link to comment
Share on other sites

which version of pixi are you using?

In older version of pixi you can access "textures". "spritesheet" was de-coupled 2 years ago.

consolelog the resource itself and look at its fields. Docs are not the only way ;) Most effective ways:

-1. debugging

0. html5gamedevs, pixijs issues, Ivan.

1. PixiJS wiki

2. looking through PixiJS sources

3. PixiJS docs

4. google/stackoverflow

Link to comment
Share on other sites

40 minutes ago, ivan.popelyshev said:

which version of pixi are you using?

In older version of pixi you can access "textures". "spritesheet" was de-coupled 2 years ago.

consolelog the resource itself and look at its fields. Docs are not the only way ;) Most effective ways:

-1. debugging

0. html5gamedevs, pixijs issues, Ivan.

1. PixiJS wiki

2. looking through PixiJS sources

3. PixiJS docs

4. google/stackoverflow

Using Pixi 5.1.0 and following these directions (the most recent ones):
http://pixijs.download/release/docs/PIXI.Spritesheet.html

Just like the Doc says, I load in the spritesheet via:
PIXI.Loader.shared.add("sprites/spritesheet.json")

And then I can access it via:
PIXI.Loader.shared.resources["sprites/spritesheet.json"].spritesheet;

But as you can see from my screenshot below:
0fgIog6.png

PIXI.Loader.shared.resources["sprites/spritesheet.json"] returns an object, so it looks like the JSON file got loaded in, but the ".spritesheet" property just isn't there and comes up "undefined". Am I missing something or is this functionality broken in PIXI?

Link to comment
Share on other sites

20 hours ago, ivan.popelyshev said:

I'll add something to the docs, because spritesheet is really THE FIRST place where people encounter CORS errors. For us its just tuesday.

Its a lesson for you - next time look in the console and report errors with more details.

Yeahh you're totally right. It was written right in the console.

To my defense though, I was actually running http-server, but the problem was that firefox, for whatever reason, doesn't open local files by default in localhost:8080 like it used to. I had to actually navigate to Localhost:8080 in the URL bar for the code to run.

Anyway, thanks for pointing that out, hun. ;; ❤️ xoxo

Link to comment
Share on other sites

To my defense though, I was actually running http-server, but the problem was that firefox, for whatever reason, doesn't open local files by default in localhost:8080 like it used to. I had to actually navigate to Localhost:8080 in the URL bar for the code to run.

Yes, there are strange problems with http-server + firefox on my comp too.

Link to comment
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...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...