Can't create a basic JSON Spritesheet "undefined"

[forleafe]

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.

 

[ivan.popelyshev]

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

[forleafe]

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:


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?

[ivan.popelyshev]

Oh, right, CORS on localhost. Common problem . Set up a web-server, "npm install -g http-server" and "http-server -c-1" wherever you want to run it.

[ivan.popelyshev]

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.

[forleafe]

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

[ivan.popelyshev]

> 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.