在相位器中从 base64 加载 Spine .atlas .p​​ng 和 .json

Question

来自移相器的 js。我正在尝试将我的 spine 动画文件嵌入到包中并加载它们，但我遇到了麻烦，因为 SpinePlugin 正在寻找 url 而不是 base64 字符串。

我在处理音频和 spritesheets，有人可以帮我指出正确的方向吗

我的 spritesheet 加载代码

  spritesheets.forEach( ( data: SpriteSheetData ) => {
            let image = new Image();
            image.src = data.image;
            image.onload = this.onSpriteSheetLoaded.bind( this, data, image, onLoadingComplete );
        } );

 protected onSpriteSheetLoaded( data: SpriteSheetData, image: HTMLImageElement, onLoadingComplete: Function ): void {
        this.textures.addAtlasJSONArray( data.name, image, data.src );
        this.filesLoaded++;
        if ( this.filesLoaded >= this.filesToLoad ) {
            onLoadingComplete();
        }
    }

这是我尝试加载书脊文件的尝试

        spineAnimations.forEach( ( data: SpineAnimationData ) => {
            let image = new Image();
            image.src = data.image;
            image.onload = this.onSpineAnimationLoaded.bind( this, data, image, onLoadingComplete );
        } );

    protected onSpineAnimationLoaded( data: SpineAnimationData, image: HTMLImageElement, onLoadingComplete: Function ): void {
        this.textures.addImage( data.name, image );
        ( this.load as any ).spine( data.name, data.src, data.atlas );
        this.filesLoaded++;
        if ( this.filesLoaded >= this.filesToLoad ) {
            onLoadingComplete();
        }
    }

image 和 atlas 是 base64 但 json 文件不是，当我在这里传递它时它是实际的 json 对象。如何将 url 传递给它而不是实际对象？

编辑

好的，现在文件正在加载并进入正确的缓存，但它似乎不喜欢将 .atlas 作为 base64。

    protected onSpineAnimationLoaded( data: SpineAnimationData, image: HTMLImageElement, onLoadingComplete: Function ): void {
        let texture = this.textures.addImage( data.name, image );
        this.cache.custom.spineTextures.add( data.name, texture );
        this.cache.custom.spine.add( data.name, data.atlas );
        this.cache.json.add( data.name, data.src );
        ( this.load as any ).spine( data.name, undefined, undefined );
        this.filesLoaded++;
        if ( this.filesLoaded >= this.filesToLoad ) {
            onLoadingComplete();
        }
    }

如何转换回来？

编辑 #2

好的，现在它可以正确转换了，但我仍然停留在如何创建一个未定义的 spine.webgl.GLTexture 上。

 protected onSpineAnimationLoaded( data: SpineAnimationData, image: HTMLImageElement, onLoadingComplete: Function ): void {
        let texture = new Spine.webgl.GLTexture( this.game.context as any, image )
        this.cache.custom.spineTextures.add( data.name, texture );
        let splitAtlasBase64 = data.atlas.split( ',' );
        let atlasBase64 = splitAtlasBase64[ splitAtlasBase64.length - 1 ];
        this.cache.custom.spine.add( data.name, { data: atob( atlasBase64 ) } );
        this.cache.json.add( data.name, data.src );
        ( this.load as any ).spine( data.name, undefined, undefined );
        this.filesLoaded++;
        if ( this.filesLoaded >= this.filesToLoad ) {
            onLoadingComplete();
        }
    }

编辑 3

找到我的解决方案，还需要导入 Spine

import Spine from '../../node_modules/phaser/plugins/spine/src/runtimes/spine-both.js';

最终加载代码

   protected onSpineAnimationLoaded( data: SpineAnimationData, image: HTMLImageElement, onLoadingComplete: Function ): void {
        let texture = new Spine.webgl.GLTexture( this.game.context as any, image )
        this.cache.custom.spineTextures.add( data.name, texture );
        let splitAtlasBase64 = data.atlas.split( ',' );
        let atlasBase64 = splitAtlasBase64[ splitAtlasBase64.length - 1 ];
        this.cache.custom.spine.add( data.name, { data: atob( atlasBase64 ) } );
        this.cache.json.add( data.name, data.src );
        ( this.load as any ).spine( data.name, undefined, undefined );
        this.filesLoaded++;
        if ( this.filesLoaded >= this.filesToLoad ) {
            onLoadingComplete();
        }
    }

Answer 1

protected onSpineAnimationLoaded( data: SpineAnimationData, image: HTMLImageElement, onLoadingComplete: Function ): void {
    let texture = new Spine.webgl.GLTexture( this.game.context as any, image )
    this.cache.custom.spineTextures.add( data.name, texture );

    let splitAtlasBase64 = data.atlas.split( ',' );
    let atlasBase64 = splitAtlasBase64[ splitAtlasBase64.length - 1 ];

    this.cache.custom.spine.add( data.name, { data: atob( atlasBase64 ) } );
    this.cache.json.add( data.name, data.src );

    ( this.load as any ).spine( data.name, undefined, undefined );
    this.filesLoaded++;

    if ( this.filesLoaded >= this.filesToLoad ) {
        onLoadingComplete();
    }
}