我尝试在pixi.js项目中使用spine，但它出现了意想不到的问题

Question

您好，我正在尝试将 Spine 用于我的小型 pixi.js 应用程序。

所以我的项目中的主要问题是，每当我尝试在某个文件中初始化脊柱时，它只会给我一个错误

我还分享了我正在使用的这些代码块，例如：加载资源、调用spine等。

还有我正在使用的版本 Pixi.js v7.3.2 | pixi-spine v4.0.4 | pixi-spine v4.0.4并且导出的spine是“spine”：“3.8.75”版本

这是获取脊柱的方法：

getSpine(key: string, bundle: string = BundlesEnum.GAME_ICONS): any {
    return this.loaded[bundle][key];
  }

我试图调用这个加载的 Spine 的类：

import { Container } from "pixi.js";
import { RESOURCES } from "../global/global.config";
import { Spine } from "pixi-spine";

export default class SpineView extends Container {
  constructor() {
    super();

    this.draw();
  }

  draw() {
    // This takes spineBoy resource from loaded resources
    const resource = RESOURCES.getSpine("spineboy");
    console.log(resource);

    // and here it is getting assigned to Spine
    const spine = new Spine(resource);
    this.addChild(spine);

    // This should work right? NO IT DOESNT
  }
}

这也是我用来加载资源的方法（顺便说一句，这个方法有效）

private async loadAssets(bundles: string[] = []): Promise<void> {
    const manifest = this.unloadedResources;

    const bundlesToLoad =
      bundles.length == 0
        ? manifest.bundles?.map((bundle: any) => bundle.name)
        : bundles;

    await Assets.init({ manifest });

    return Assets.loadBundle(bundlesToLoad);
  }

我已经检查了所有内容，正如我所看到的，它注销了这个对象，这是我所看到的 spinData

我检查了所有命名加载资产等，但没有任何东西给我可能出现问题的正确答案，即使是全能的chatgpt也无法帮助我。

它会记录我在顶部栏中提到的错误...所以任何了解此内容的人请帮助，如果您需要更多信息，请告诉我，我可以添加到它。

提前谢谢您！

Answer 1

根据 pixijs/spine 文档，您需要在 SpineView 类的开头添加

import 'pixi-spine'

。

您班级中的导入应如下所示：

import 'pixi-spine' // Do this once at the very start of your code. This registers the loader!
import { Container } from "pixi.js";
import { RESOURCES } from "../global/global.config";
import { Spine } from "pixi-spine";