CODEWITHSUNDEEP
typescriptvue.jswebpackecmascript-6pixi.js
trusis
trusis

Reputation: 75

Loading a spritesheet in Pixijs does not work

Im trying to load a spritesheet in pixijs according to the official documentation: http://pixijs.download/release/docs/PIXI.Spritesheet.html

The following is my code:

PIXI.Loader.shared.add('sheet', require('../assets/spritesheet.json')).load(spriteSetup)

function spriteSetup() {
    let sheet = PIXI.Loader.shared.resources['sheet'].spritesheet;
    console.log(sheet)
}

When I try to log the value of 'sheet', it is undefined. So I tried the logging the value of PIXI.Loader.shared.resources['sheet'] which is not undefined but rather the following:

{
"_onLoadBinding": null,
"_elementTimer": 0,
"_flags": 2,
"name": "sheet",
"url": "sheet",
"extension": "sheet",
"data": "<!DOCTYPE html>\n<html lang=\"\">\n<head>\n    <meta charset=\"utf-8\">\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1.0\">\n    <link rel=\"icon\" href=\"/favicon.ico\">\n    <link href=\"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css\" rel=\"stylesheet\"\n          integrity=\"sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3\" crossorigin=\"anonymous\">\n    <title>medease</title>\n<link href=\"/js/app.js\" rel=\"preload\" as=\"script\"><link href=\"/js/chunk-vendors.js\" rel=\"preload\" as=\"script\"></head>\n<body>\n<noscript>\n    <strong>We're sorry but medease doesn't work properly without JavaScript enabled.\n        Please enable it to continue.</strong>\n</noscript>\n<div id=\"app\"></div>\n<!-- built files will be auto injected -->\n<script type=\"text/javascript\" src=\"/js/chunk-vendors.js\"></script><script type=\"text/javascript\" src=\"/js/app.js\"></script></body>\n</html>\n",
"crossOrigin": "",
"timeout": 0,
"loadType": 1,
"xhrType": "text",
"metadata": {},
"error": null,
"xhr": {},
"children": [],
"type": 6,
"progressChunk": 100,
"onStart": {},
"onProgress": {},
"onComplete": {
    "_tail": null,
    "_head": null
},
"onAfterMiddleware": {}
}

This is pretty confusing to me, as it seems it load the index.html file instead of the json file I am trying to load (See the data field).

Someone had a very similar problem here: https://github.com/pixijs/pixijs/issues/5965 However, I am running my code through a web server and it still doesn't work for me.

Printing out require('../assets/spritesheet.json') prints out the json file just fine. Maybe this is a bit of a noob question, but I am completely stuck. If it helps I am using vue 3 and set up this project using vue-cli but I don't see how that would be related.

Upvotes: 3

Views: 1321

Answers (1)

Alex Tom
Alex Tom

Reputation: 221

I had the same problem. The solution is to move spriteSheet.json with spriteSheet.png from assets to public folder.

And set path images/spriteSheet.json (in public/images/spriteSheet.json) according to the official documentation.

Upvotes: 1

Related Questions