Pixi JS 7 / 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) 中使用 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

我也有同样的问题。我将 CopyPlugin 添加到 Webpack 中。我没有导入 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

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

在您的情况下（假设您将 json 文件移至公共目录：

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