I’m trying to build a game with vue3 js phaser and spine . I’ve used the official template from phaser with vue and installed phaser-spine and import it . Official Phaser 3 and Vue 3 Template - Phaser
this is the main.js file :
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;
and this is the scene file :
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)
}
}
Now i see my atlas an skel file loaded in the network tab and the png but i keep getting this error Uncaught TypeError: Cannot read properties of undefined (reading ‘data’)
on this line
const lootbox = this.add.spine(333, 333, 'lootbox-data', "idle", true);
I’ve tried using vanilla js and it works there, but i want to make the project with vuejs 3 . So the assets are ok and working when using a vanilla js project .
From what i understand i try to initiate spine to early?