La carga de un spritesheet en Pixijs no funciona

0

Pregunta

Estoy tratando de cargar un spritesheet en pixijs de acuerdo a la documentación oficial: http://pixijs.download/release/docs/PIXI.Spritesheet.html

La 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 trato de iniciar sesión el valor de 'hoja', es indefinido. Así que he probado el registro el valor de PIXI.Cargador.compartida.recursos['hoja'] que no es indefinida, sino más bien la 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 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": {}
}

Esto es bastante confuso para mí, ya que parece que la carga de la index.html archivo en lugar de en el archivo json estoy tratando de carga (Ver los datos de campo).

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

La impresión de require('../assets/spritesheet.json'), imprime el archivo json bien. Tal vez esto es un poco de una pregunta de noob, pero estoy completamente atascado. Si ayuda yo estoy usando vue 3 y configurar este proyecto con vue-cli, pero no veo cómo eso podría estar relacionado.

ecmascript-6 pixi.js typescript vue.js
2021-11-23 20:05:23
1

Mejor respuesta

0

Yo tenía el mismo problema. La solución es mover spriteSheet.json con spriteSheet.png a partir de los activos a la carpeta pública.

Y establecer la ruta images/spriteSheet.json (en public/images/spriteSheet.json) de acuerdo a la documentación oficial.

2021-12-22 13:34:35

En otros idiomas

Esta página está en otros idiomas

Русский
..................................................................................................................
Italiano
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
हिन्दी
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Česk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Slovenský
..................................................................................................................