I am currently facing an issue while trying to load a spritesheet in PixiJS following the instructions provided on
Below is the code snippet I am using:
PIXI.Loader.shared.add('sheet', require('../assets/spritesheet.json')).load(spriteSetup)
function spriteSetup() {
let sheet = PIXI.Loader.shared.resources['sheet'].spritesheet;
console.log(sheet)
}
However, when I attempt to log the value of 'sheet', it shows up as undefined. So, I decided to log the value of PIXI.Loader.shared.resources['sheet'], which returns something unexpected:
{
"_onLoadBinding": null,
"_elementTimer": 0,
"_flags": 2,
...
"xhrType": "text",
"metadata": {},
"error": null,
...
"type": 6,
"progressChunk": 100,
...
]</body>\n</html>\n",
"crossOrigin": "",
"timeout": 0,
...
}This situation is quite puzzling to me since it seems like it's loading the index.html file instead of the JSON file that I intend to load (reference to the data field). A similar issue was reported by someone here: https://github.com/pixijs/pixijs/issues/5965. Even after running my code through a web server, I'm still encountering the same problem.
When I print out require('../assets/spritesheet.json'), it displays the JSON file correctly. This might sound like a beginner question, but I am completely stuck. For your information, I am using Vue 3 and set up this project with vue-cli, although I don't see how that could be related.