Spine WebGL warnings and game breaks

Phaser 3
1

Hey all,

The problem:
I am loading ~13 spine animations and create ~17 spine objects. Once the game creates all objects I have the following warnings:

WebGL: INVALID_OPERATION: vertexAttribPointer: no ARRAY_BUFFER is bound and offset is non-zero
WebGL: INVALID_OPERATION: bufferSubData: no buffer
WebGL: INVALID_OPERATION: drawArrays: no buffer is bound to enabled attribute
phaser.js:53759 WebGL: too many errors, no more errors will be reported to the console for this context.

After that I either get a black screen with no errors OR some of the sprites, images… disappear.

Relevant code:
this.scene.load.spine(‘joker-win-spine’, ‘joker_bw.json’, ‘joker_bw.atlas’);
// elsewhere
this.jokerSpine = this.scene.add.spine(0, 0, ‘joker-win-spine’);

Attempts at a solution:

  1. I have removed one of the spine objects and still get the same result BUT if I put the creation in setTimeouts over random intervals, the game works 90% of the time.
  2. Adding back the final spine object (whichever that is) causes the warnings to be shown iwth the same result (independently of setTimeout).
  3. The error is not because of the spine animations - I have tried adding other working animations from some other games. The result is still the same.
  4. Tried researching on the forum and the github issues with no luck.

Some help would be greatly appreciated as we are nearing release :frowning:
Thanks in advance

1 Like
2

We have this issue as well. And tried a lot. Didn’t work out yet. Will let you know if we find something!

image

image
image828×669 227 KB

3

@FloodGames,
A solution Rich showed me, was to create a simple GameObject right after you create a spine object, with a slightly higher depth. Example:

const spine = this.add.spine(...).setDepth(5);
const fix = this.add.rectangle(0,0,4,4, 0x000000).setDepth(5.5);

I have flagged him about this and it could (or not) enter the next version of Phaser.

1 Like