Jump to content

Spine support


Recommended Posts

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


Link to comment
Share on other sites

  • 3 weeks later...
  • 3 months later...

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.

Link to comment
Share on other sites

Spine support is unchanged in Pixi 1.4.

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


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

  • 1 month later...

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 :(

Link to comment
Share on other sites

  • 1 month later...
  • 1 month later...
  • 4 weeks later...

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

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...