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

Question

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

我有这个使用音频和精灵表的人可以帮助我指出正确的方向

我的精灵表加载代码

  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 传递给 this 而不是实际的对象？

编辑

好的，现在文件正在加载并进入正确的缓存，但它似乎不喜欢 .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

好的，所以它现在可以正确转换，但我坚持如何创建一个 spin.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();
    }
}