Spine support

[korpuskel]

Sorry for asking again for the Spine (http://esotericsoftware.com/) support in Phaser.

 

 

I didn't have the time to try it out but since Pixi is used for rendering I really wonder if this is already possible.

 

Despite being so great Spine does not seem to get used a lot so I understand if you don't plan to integrate it in the near future (at least you didn't put it under "Future Plans" in the Readme.md anymore). I guess I could wait for the documentation and then try to hack it in - maybe I can even get the code to look nice and make a PR though I doubt that

 

 

Also thank you so much for your hard work on the 1.0 release! I followed the "march to 1.0" thread as well as the github commits so I can imagine how much effort you put into this

 

[mwatt]

Rich said that he is a big fan of Spine and definitely intends to support it.

[rich]

I do fully intend to support it, but the current implementation in Pixi needs some tweaks first (you can easily get a lot of TextureCache conflicts with joint names for example) - it's quite a large JS file too, so I may just release it as an 'extra' once I'm happy it's working properly.

[korpuskel]

Ah I see, it's issue https://github.com/GoodBoyDigital/pixi.js/issues/312. Okay, let's wait util UUIDs make it into Pixie, too 

 

I'm glad to hear you still plan to integrate Spine and I agree that you should implement it as 'extra' since most people won't need the code in spine.js.

 

 

Keep up the good work!

[rich]

Yeah I've got a couple of client projects I need to focus on, but once out of the way I'll talk to Mat about how we can support him, as I know he is struggling for time to work on Pixi but desperately wants to.

[Son of Bryce]

Hey, just checking to see if this is still accurate. Is Spine support not yet available in Phaser?

 

From what I understand, the issue here was that Pixi support of Spine was incomplete?

 

Thanks!

[rich]

Pixi support isn't incomplete, it's just got a few bugs that would be worth fixing before we support it (mostly to do with texture cache conflicts). If I get time I'll have a look, but still fighting with the docs here atm.

[Son of Bryce]

All good, thanks for clarifying!

[xPhoenix777]

Where is this left at? Also, can the community help in any way (what specifically troubles you about the current setup)?

[rich]

I had basically ignored this until the new release of Pixi was ready, as they were going to tidy up support for it internally (no more texture conflicts, etc). As this is now released it's time to revisit it again. I'm getting ready to push out Phaser 1.1.4 at the moment, and after this the next step is full integration of Pixi 1.4 - once that's in place Spine support should, finally, be quite trivial to add.

[rich]

If you want to help in the meantime, check out to see how well Spine works with Pixi 1.4 and report any bugs or issues to them If it works fine in 1.4 then we'll have no problems with it in the next version of Phaser either.

[Cameron Foale]

Spine support is unchanged in Pixi 1.4.

However, I've got basic Spine stuff happening in Phaser now.

CAVEATS:

- This builds on PIXI's existing support, which is not 100% accurate, and is particularly bad in WebGL.

- It also spends a bunch of time in the Spine JS calculating bone matrices etc, and then discards them and uses the PIXI transforms per bone

- It requires you to have access to the PIXI object, so doesn't work with minified Phaser (unless you do a custom minified Phaser)

- flipX and flipY are broken, but you can scale the PIXI Spine object by -1, -1

- It's a total hackjob

Here's how I went about it:

- Create your own PhaserSpine.js (don't use the Pixi Spine.js)

- Dump the current Spine JS runtime into it

- Follow it with the current Pixi-exclusive part. This might need tweaking but I didn't do much, let me know if it doesn't work.

THEN, add the Phaser special sauce:

// A Spine atlas that uses Phaser texture atlases.Phaser.SpineAtlas = function(game, key){    this.cache = game.cache;    this.key = key;    this.regionCache = {};};Phaser.SpineAtlas.prototype = {    findRegion: function (name) {        if(this.regionCache.hasOwnProperty(name)) {            return this.regionCache[name];        }        var image = this.cache.getImage(this.key);        if(!image) {            console.log('No image available for key: ' + this.key);            this.regionCache[name] = null;            return null;        }        var page = {width: image.width, height: image.height };        var frame = this.cache.getFrameByName(this.key, name);        if(!frame) {            console.log('No frame found for name: ' +  name + ', with image key: ' + this.key);            this.regionCache[name] = null;            return null;        }        // build the kind of region that Spine expects        region = this.regionCache[name] = new spine.AtlasRegion();        region.name = frame.name;        region.x = frame.x;        region.y = frame.y;        region.width = frame.width;        region.height = frame.height;        region.u = region.x / page.width;        region.v = region.y / page.height;        region.u2 = (region.x + region.width) / page.width;        region.v2 = (region.y + region.height) / page.height;        region.originalWidth = frame.sourceSizeW;        region.originalHeight = frame.sourceSizeH;        region.offsetX = frame.spriteSourceSizeX;        region.offsetY = frame.spriteSourceSizeY;        // add a reference back        region.frame = frame;        // And the texture. This is used by PIXI.SpineSprite        region.texture = PIXI.Texture.fromFrame(frame.uuid);        return region;    }};

Here's how you load and use it:

// Assuming your texture atlas is already loaded and called 'character'.// and your Spine data is loaded using game.load.text() and called 'character_animation'// A Phaser object to hold the PIXI onethis.character = this.add.sprite(this.game.width / 4, this.game.height - 200, null);this.character.body.setSize(50, 150)// Parse the JSON spine datavar spineKey = 'character_animation';var spineAtlas = new Phaser.SpineAtlas(this.game, 'character');var spineJsonParser = new spine.SkeletonJson(new spine.AtlasAttachmentLoader(spineAtlas));var skeletonData = spineJsonParser.readSkeletonData(JSON.parse(this.cache.getText(spineKey)));// Cheat the loading so it works. Note that this doesn't work with the minified Phaser js, as PIXI isn't exposed.PIXI.AnimCache[spineKey] = skeletonData;var theSpine = new PIXI.Spine(spineKey);theSpine.position.y = this.character.body.height;theSpine.position.x = this.character.body.width / 2;// Start up some animationstheSpine.state.setAnimationByName(0, 'run', true);theSpine.stateData.setMixByName('idle', 'run', 0.1);theSpine.stateData.setMixByName('run', 'idle', 0.1);// Add the spine PIXI object to the Phaser one, so you get physics.this.character.addChild(theSpine);// And store a reference back to the spine object so you can tweak it later.this.character.spine = theSpine;

[xPhoenix777]

Thanks for the code snippets. Sad that 1.4 brings no changes

[Pert]

Ah, shame. Have been looking into skeletal animations most of the night, In between doing normal sprite-sheet or basic skeletal animation, might have to figure out my own simple implementation meanwhile.

[morriq]

Hello.

 

Any news about spine supporting in phaser?

[rich]

No it's still not working very well in Pixi (although to be honest the main Spine javascript library is in need of quite an update imho). You can use it (see directions above) but I'm not supporting it directly yet. Such a massive library and performance is terrible on mobile

[freaker]

crap... I would love to use Spine on Phaser... 

 

:-/

 

so... only manual skeletal animations :-/

[lukaszwojciak]

Updates regarding spine support. 
I've finally managed to fix color and alpha transitions. You can find the needed changes here:
https://github.com/GoodBoyDigital/pixi.js/pull/727
 

[morriq]

That's nice.

 

@Rich, now you could release phaser with spine support? It'd be nice!

[Rudis]

Any news or what needs to be done for spine support?

[toovy]

Sorry to ask, but what is the status of this? Spine would be very interesting.

[Edricus]

I too would love to know the current status of this. I was hoping to incorporate Spine into my next project. Also if someone has another bone based animation tool that works with Phaser that would great as well!

[rich]

Absolutely nothing has been done on support for this on a Pixi level for ages, and as a result I've not integrated it with Phaser yet either. Although with WebGL coming to iOS8 this is getting more important.

 

To be honest though I think I'll personally focus on DragonBones support first, as it doesn't rely on lots of "middle men" to get done

[Rudis]

Make sense, also dragon bones supports spine. I believe there is something for start https://github.com/DragonBones/SkeletonAnimationLibraryJS. I'm curious if this could land in pixie or more likely be just a phaser thing?

[Edricus]

I'll definitely take a look at DragonBones. Come to think of it, a friend of mine just showed me that a few days ago. Although it may be to early to ask, what's the timeline looking like for DragonBones support if you don't mind me asking?