在 Pixijs 中加载 spritesheet 不起作用答案

【问题标题】：Loading a spritesheet in Pixijs does not work在 Pixijs 中加载 spritesheet 不起作用
【发布时间】：2022-01-02 07:36:35
【问题描述】：

我正在尝试根据官方文档在 pixjs 中加载 spritesheet：http://pixijs.download/release/docs/PIXI.Spritesheet.html

以下是我的代码：

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

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

当我尝试记录“工作表”的值时，它是未定义的。所以我尝试记录 PIXI.Loader.shared.resources['sheet'] 的值，它不是未定义的，而是以下内容：

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

这让我很困惑，因为它似乎加载了 index.html 文件而不是我尝试加载的 json 文件（请参阅数据字段）。

这里有人遇到了非常相似的问题：https://github.com/pixijs/pixijs/issues/5965 但是，我正在通过 Web 服务器运行我的代码，但它仍然对我不起作用。

打印出 require('../assets/spritesheet.json') 打印出 json 文件就好了。也许这是一个菜鸟问题，但我完全被卡住了。如果它有帮助，我正在使用 vue 3 并使用 vue-cli 设置这个项目，但我不知道这会是什么关系。

【问题讨论】：

标签： typescript vue.js webpack ecmascript-6 pixi.js

【解决方案1】：

我遇到了同样的问题。解决方案是将spriteSheet.json 和spriteSheet.png 从资产移动到公用文件夹。

并根据官方文档设置路径images/spriteSheet.json（在public/images/spriteSheet.json中）。

【讨论】：