Spine animation loading issues when visiting website for the first time. Black boxes instead of assets. [ Pixi.js ]

[SenPie]

I am encountering very bizarre issue from spine, only on Firefox and only when I visit the page for the first time. When I open the page I see this black boxes instead of assets

and I get this warning logs in the console

After I refresh the page everything loads correctly. I tested this in chrome, but I don't get any issues there.

Here is my code for making and adding spine animation to a container.

// use binary data to make the spine animation
const rawSkeletonData = this._resources.getBinary(Renderable.binary[eid]);
const rawAtlas = this._resources.getAtlas(Renderable.atlas[eid]);
const texture = this._resources.getBaseTexture(Renderable.texture[eid]);

const spineAtlas = new TextureAtlas(rawAtlas, (line, callback) => {
  // pass the image here.
  callback(texture);
});

const spineAtlasLoader = new AtlasAttachmentLoader(spineAtlas);
const spineJsonParser = new SkeletonBinary(spineAtlasLoader);

const spineData = spineJsonParser.readSkeletonData(rawSkeletonData);

// now we can create spine instance
const spine = new Spine(spineData);
if (spine.state.hasAnimation('idle')) {
  spine.state.setAnimation(0, 'idle', true);
}
// store the spine for easy access
spines.set(eid, spine);

const parent: number = Renderable.parent[eid];
const layer: Container = layerContainers.get(parent);
layer.addChild(spine);

I've tried to debug it, but I can't find the issue as it seems to be browser specific. Maybe someone has some clue or can help me to fix this issue?

[ivan.popelyshev]

If it works only on second time, means its loading texture synchronously, from browser cache in memory.

Sprites wont render if their texture isnt ready- im sure about it.

However, Meshes - i'm not sure. 

Workaround #1: actually wait when your resource is loaded

Workaround #2: check if atlas can actually exist if baseTexture is not valid yet. Use pixi-spine sources, debug it!

 

Edited August 19, 2021 by ivan.popelyshev

[SenPie]

hi @ivan.popelyshev, long time no see.
I've finally returned to this issue. I wanted to go with the first solution and wait until the resource is loaded, however I run over some issues.

In baseTexture documentation, it says that 'loaded' event is 'Fired when a not-immediately-available source finishes loading.' I tried to use it, but it does not work.

I loaded resources like this, but the message is not logged.
 

const baseTexture = new BaseTexture(this._resources.assetMap.get(name));
baseTexture.on('loaded', () => {
	console.log('yey the resource is loaded!!');
});
baseTexture.cacheId = name;
BaseTexture.addToCache(baseTexture, name);

I log Resource for baseTextures, and I noticed that first time I open the game ( and when the issue happens ) , the value for _load is null. However, when I refresh the tab ( presumably the textures are cached) there is _load: Promise { <state>: "fulfilled", <value>: {…} }. I have been looking into pixi sources for hours now, but I cannot figure out how to fix it. Do you know any wat, how I can wait for the resources to load? BTW, the source I pass to BaseTexture is base64 string for png.

Edited September 27, 2021 by SenPie

[ivan.popelyshev]

That's the canonical code for checking it. I dont know how its not mentioned everywhere.

function onLoad() {
}

if (baseTexture.valid) onLoad() else baseTexture.on('loaded', onLoad);

The thing is, browser can load images at the same time as you specify "src" if they are in its cache. Pixi doesnt have special promises inside baseTexture, so its your job to make it and figure out how to make PR to pixi so it'll be easier for other people  Or find place in docs where to place this small snippet

Edited September 28, 2021 by ivan.popelyshev

[SenPie]

I completely missed the part with the 'verified'? That property is not mentioned in the docs, so I though it should always shoot the 'loaded' event. Guess in docs I will add info about verified property and also make PR with promises thingie for BaseTexture. Thanks)

[ivan.popelyshev]

Yep, its not a promise, its old-style, event is already fired when you add that listener