来自移相器的 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();
}
}