在Pixi . assets .load(json)上出现错误

Question

我从Pixi示例(https://pixijs.io/examples/?v=dev#/sprite/animatedsprite-jet.js)中获取以下代码:

import * as PIXI from 'pixi.js';
import json from './assets/fighter.json';
const app = new PIXI.Application({ background: '#1099bb' });
document.body.appendChild(app.view);
PIXI.Assets.load(json).then(() => {
// create an array of textures from an image path
const frames = [];
for (let i = 0; i < 30; i++) {
const val = i < 10 ? `0${i}` : i;
// magically works since the spritesheet was loaded with the pixi loader
frames.push(PIXI.Texture.from(`rollSequence00${val}.png`));
}
// create an AnimatedSprite (brings back memories from the days of Flash, right ?)
const anim = new PIXI.AnimatedSprite(frames);
/*
* An AnimatedSprite inherits all the properties of a PIXI sprite
* so you can change its position, its anchor, mask it, etc
*/
anim.x = app.screen.width / 2;
anim.y = app.screen.height / 2;
anim.anchor.set(0.5);
anim.animationSpeed = 0.5;
anim.play();
app.stage.addChild(anim);
// Animate the rotation
app.ticker.add(() => {
anim.rotation += 0.01;
});
});

在浏览器控制台，我得到这个消息:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'split')
at Resolver.ts:334:60
at Array.map (<anonymous>)
at Resolver.add (Resolver.ts:301:51)
at Assets.ts:407:35
at Array.map (<anonymous>)
at AssetsClass.load (Assets.ts:403:14)

我用的是Vite(4.0)

我尝试在PIXI.Assets.load('/assets/fighter.json ')中使用path to JSON，但没有帮助我。

但是我在浏览器控制台得到另一个消息:

Uncaught (in promise) Error: [Loader.load] Failed to load http://localhost:5173/assets/fighter.json.
SyntaxError: Unexpected end of JSON input (at Loader.ts:151:27)
at Loader.ts:151:27
at async Promise.all (:5173/index 0)
at async Loader.load (Loader.ts:156:15)
at async AssetsClass._mapLoadToResolve (Assets.ts:672:30)
at async AssetsClass.load (Assets.ts:419:40)

Answer 1

我也遇到了同样的问题。我在Webpack中添加了CopyPlugin。而不是导入json，我给出了json文件的直接链接("assets/spine.json">

const CopyPlugin = require("copy-webpack-plugin")
module.exports = {
...
plugins: [
new CopyPlugin({
patterns: [
{from: "src/assets", to: "assets"},
],
}),
]
}

现在这是我的脊柱负荷:

PIXI.Assets.load("assets/spine.json").then((data) => this.onSpineLoaded(data))
onSpineLoaded(asset) {
this.player = new Spine(asset.spineData)
this.addChild(this.player)
}

Answer 2

这相当于vite的webpack复制插件https://www.npmjs.com/package/vite-plugin-static-copy

但是，如果您使用Public目录，则很可能不需要它。将json文件放在Public目录中，它们将在开发中从根目录提供服务，并将在生产中复制到dist/build文件夹的根目录。不需要导入

在您的情况下(假设您将json文件移动到Public dir:

)

const json = "/fighter.json"
PIXI.Assets.load(json).then(() => {
...
}