pixijs/spine

Loader not working when importing using a secondary file

chky-nmnsoftware opened this issue · 0 comments

Good evening. I was using pixi-spine for my project, and the way I load resources requires that some are loaded from separate files (since certain files handle their own loading and actions). After doing some testing, I found out that loading an asset from a secondary file will cause the spineData to not be generated. This, of course, is an issue, and I could not find a way to fix it. Here is a small demo that has this problem:

// index.ts

import 'pixi-spine'

import * as PIXI from 'pixi.js';
import { HandleAnimation } from './second';

const app = new PIXI.Application({width: 1600, height: 900});
document.body.appendChild(app.view as unknown as HTMLElement);

const a = new HandleAnimation(PIXI.Assets, "../assets/spaceship.json")
a.load().then(_ => {
    a.play()
})
// second.ts

import 'pixi-spine'

import { ISkeletonData, Spine } from 'pixi-spine';
import { AssetsClass } from 'pixi.js';

export class HandleAnimation {
    assetLoader: AssetsClass;
    resourceKey: string;
    spineData!: ISkeletonData;
    
    constructor(assetLoader: AssetsClass, resourceKey: string) {
        this.assetLoader = assetLoader
        this.resourceKey = resourceKey
    }

    async load() {
        if (this.spineData) return
        const asset = this.assetLoader.load(this.resourceKey)
        this.spineData = asset.spineData
    }

    async play() {
        const spine = new Spine(this.spineData)
        spine.alpha = 1
    }
}

Not sure why this happens, and unfortunately I could not find a way to manually load them. I am currently using pixi.js version 7.3.2 and pixi-spine version 4.0.4. Any and all help is appreciated. Thanks!