Jump to content

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


Recommended Posts

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.

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);

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?

Link to comment
Share on other sites

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 by ivan.popelyshev
Link to comment
Share on other sites

  • 1 month later...

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 by SenPie
Link to comment
Share on other sites

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 by ivan.popelyshev
Link to comment
Share on other sites

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)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...