Spine object not displaying

Phaser 3
1

Hello, I have hard time importing any spine object into my webpack phaser project. I am currently trying this coin animation, but after

this.hero = this.add.spine(200, 200, this.spineName, 'animation', true)

the screen goes simply black without any error message. It is also black if I set any other coordinates, or if I set this.hero.alpha to anything more than 0.

The atlas, the skeleton and the image seems to be fine, because when I do

console.log(this.cache.json.get(this.spineName))
console.log(this.spine.spineTextures.get(this.spineName))
console.log(this.spine.cache.get(this.spineName))

it outputs:

> {skeleton: {…}, bones: Array(7), slots: Array(6), skins…
> TextureAtlas {pages: Array(1), regions: Array(7)}
> {preMultipliedAlpha: true, data: "↵coin.png↵size: 1024,1024↵format: RGBA8888↵filter:…, 245↵ …

I am using several scenes in the project, but don’t think it matters.
Any help would be appreciated.

Edit: this.hero.getBounds() gets interesting data: offset x,y is infinity, size is infinity…

Edit 2: There seems to be a bug in the current SpinePlugin.js in the function SkeletonJson.prototype.readCurve, namely in the line timeline.setCurve(frameIndex, curve, this.getValue(map, "c2", 0), ... The second parameter, curve, is an array of numbers. Needs to be a number. But even if I change the line to timeline.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]), the result is the same. this.hero.getBounds() is the same…
I am getting somewhat desperate

2

With the coin Spine asset from the phaser3-examples I had to use the SpinePlugin.js file from August 2019: https://github.com/photonstorm/phaser/tree/331d5605ad4226938ef0edfbaf5708b2c931b185/plugins/spine/dist

The SpinePlugin.js from the phaser3-examples repo itself also worked fine (I think they are the same): https://github.com/photonstorm/phaser3-examples/tree/master/public/plugins

But using the latest or the build from September 2019 did not work with the coin asset.

That said, a recent Spineboy asset I got from Esoteric did not work with the older SpinePlugin.js files and only worked with the newer builds. I may do some more digging but that’s what I got so far.

Depending on your Spine assets you might want to simply try one of the older SpinePlugin builds instead of using the ones packaged with 3.22

3

Thank you for the reaction. The august 2019 spine plugin version doesn’t seem to work on me either. (Phaser 3.18.1) getBounds() function already returns some reasonable numbers, but the screen gets black anyway and it throws a warning message WebGL: INVALID_OPERATION: vertexAttribPointer: no ARRAY_BUFFER is bound and offset is non-zero.

I don’t want to dug into this version of spine plugin source code again, it’s very time consuming activity…
In the last plugin version, there was a strange problem with the TransformMatrix class, its methods seemed to be never called…

4

hmm… I did experience with Parcel that I had to delete the cache when I changed the SpinePlugin.js file; I believe webpack does have a cache from non-Phaser projects I’ve done but deleting it wasn’t straight forward

I did make this plnkr to show what happens when using the latest version of SpinePlugin vs the August 2019 version from the examples repo: https://plnkr.co/edit/eMoRPfxSymE2O5j2?open=lib%2Fscript.js

I have two consts at the top that you can change to see it stop working with the assets from the examples repo.

You can probably just take this project (copy to your computer) and see what happens with the two different plugin versions with the assets you have :thinking:

1 Like
5

This really proves what you said - the coin animation doesn’t work with the latest spine plugin. My problem is that no animation works with any of the two.
What kind of cache did you have in mind? I have changed spine plugin files several times. Each time experienced a respective change of behavior (so I don’t think any cache is involved), but never saw actual animation. Never saw anything but black screen. May be I am doing something ‘wrong’ with the webpack, but don’t know what.

Anyway, I lost my patience with the Spine plugin yesterday. I decided to use Dragon Bones instead - and it works fine!