typescript - Cargar un spritesheet en Pixijs no funciona

Estoy intentando cargar una hoja de sprites en PixiJS según la documentación oficial: http://pixijs.download/release/docs/PIXI.Spritesheet.html

Lo siguiente es mi código:

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

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

Cuando intento registrar el valor de 'sheet', está indefinido. Así que intenté registrar el valor de PIXI.Loader.shared.resources['sheet'], que no está indefinido sino que es lo siguiente:

{
"_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 /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": {}
}

Esto me resulta bastante confuso, ya que parece que carga el archivo index.html en lugar del archivo json que estoy intentando cargar (ver el campo de datos).

Alguien tuvo un problema muy similar aquí: https://github.com/pixijs/pixijs/issues/5965 Sin embargo, estoy ejecutando mi código a través de un servidor web y aún así no funciona para mí.

Imprimir require('../assets/spritesheet.json') imprime el archivo json perfectamente. Tal vez esta sea una pregunta de novato, pero estoy completamente atascado. Si ayuda, estoy usando Vue 3 y configuré este proyecto usando vue-cli, pero no veo cómo eso estaría relacionado.

Respuesta #1

Tuve el mismo problema. La solución es mover spriteSheet.json con spriteSheet.png de la carpeta de assets a la carpeta pública.

Y establece la ruta images/spriteSheet.json (en public/images/spriteSheet.json) según la documentación oficial.