vue 3 pahser 和 spin.js - 未捕获类型错误：无法读取未定义的属性（读取“数据”）

Question

我正在尝试使用 vue3 js Phaser 和 spin 构建一个游戏。我已将 Phaser 的官方模板与 vue 一起使用，并安装了 Phaser-spine 并导入它。 https://phaser.io/news/2024/02/official-phaser-3-and-vue-3-template

这是 main.js 文件：

import { Lootbox } from './scenes/Lootbox';
import Phaser from 'phaser';
import {SpinePlugin} from "@esotericsoftware/spine-phaser"



// Find out more information about the Game Config at:
// https://newdocs.phaser.io/docs/3.70.0/Phaser.Types.Core.GameConfig
const config = {
    type: Phaser.AUTO,
    width: 1024,
    height: 768,
    parent: 'game-container',
    backgroundColor: '#028af8',
    plugins: {
        scene: [
           { key: 'spine.SpinePlugin', plugin: SpinePlugin, mapping: 'spine' }
        ]
     },
    scene: [game]
};


const StartGame = (parent) => {

    return new Phaser.Game({ ...config, parent });
}

export default StartGame;

这是场景文件：

import Phaser from 'phaser';


export class Lootbox extends Phaser.Scene {
    constructor() {
        super('Lootbox');
    }

    preload() {
        this.load.spineBinary("man-data", "assets/man.skel");
        this.load.spineAtlas("man-atlas", "assets/man.atlas");
        console.log("scene loaded ")
    }

    create() {
        const manAnimation = this.add.spine(333, 333, 'man-data', "idle", true);
        manAnimation.animationState.setAnimation(0, "in", true)

    }

   
}

现在我看到我的图集在网络选项卡和 png 中加载了一个 skel 文件，但我不断收到此错误 未捕获的类型错误：无法读取未定义的属性（读取“数据”）

在这条线上

        const lootbox = this.add.spine(333, 333, 'lootbox-data', "idle", true);

我尝试过使用 vanilla js 并且它可以在那里工作，但我想使用 vuejs 3 制作该项目。因此，在使用普通 js 项目时，资产正常并且可以工作。

据我了解，我尝试尽早启动脊柱？

Answer 1

试试这个

import * as spine from "@esotericsoftware/spine-phaser"

plugins: {
        scene: [
            { key: "spine.SpinePlugin", plugin: spine.SpinePlugin, mapping: "spine" }
        ]
    }