Jump to content

Spine support added to Pixi.js

Mat Groves

Recommended Posts

Hey guys


Just released a blog post with the details on the new spine support for pixi.js:




Thats one more feature crossed of the list  :)





Heres some working examples:






Big thanks to enpu for the initial build!

Link to comment
Share on other sites

  • 3 weeks later...


First of all thanks for a great framework!


I was playing around with spine support in Pixi and it seems that Pixi doesn't properly handle empty slots.

The example of this case is shown in the "Fake animated draw order" video on Esotericsoftware site when one of the images is becoming invisible during the animation.

Link to comment
Share on other sites

Wonderful framework! I am really enjoying using Pixi with Spine :)



First of all thanks for a great framework!


I was playing around with spine support in Pixi and it seems that Pixi doesn't properly handle empty slots.

The example of this case is shown in the "Fake animated draw order" video on Esotericsoftware site when one of the images is becoming invisible during the animation.


I can confirm the findings of Gorsh in regards to empty slots.

In fact, take any of the example Spine projects (spineboy, dragon, etc) and remove an image from a slot.

The saved JSON will no longer work with Pixi, instead Javascript will hit an error. That error contains the key part that made me realize the issue.

It refers to "undefined.png".


This is caused because Pixi was hard-coded to look for an "attachment" on every slot, however it doesn't check if the "attachment" is undefined.

I can see this being quite important as Spine users have a number of tricks up their sleeves that require the usage of empty slots in their projects :)


The key line of code that the issue starts occurring at is around line 5109 in pixi.js, specifically: 

var attachmentName = slot.attachment.name;		if(!PIXI.TextureCache[attachmentName]){	attachmentName += ".png";}

So when it references "slot.attachment" we get a texture name of "undefined.png".


I think the best way to fix this would be to make the texture name empty if an attachment is undefined.

Then later on when that texture is being rendered, if the name is empty it will simply be ignored :)



I'd also like to add that it seems your latest code on GitHub contains parts that are clearly broken at this current stage for rendering Spines. Is there anywhere in particular where I can see some sort of status on what Spine features are not currently usable in Pixi.js?


For example, create a Spine with one simple bone containing a slot that changes its alpha from 255 -> 0 -> 255 in three key frames. This completely fails to render in Pixi.js.


In the Pixi.js "ColorTimeline" you have:


setFrame: function (frameIndex, time, x, y) {	frameIndex *= 5;	this.frames[frameIndex] = time;	this.frames[frameIndex + 1] = r;	this.frames[frameIndex + 2] = g;	this.frames[frameIndex + 3] = g;	this.frames[frameIndex + 4] = a;},

Rgba is not being passed in the arguments anywhere, therefore when it hits the reference to "r", an error occurs.


Additionally, in "spine.SkeletonJson.toColor" you have:


return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255;

This is incorrect and can even sometimes return NaN. It should actually be:

return parseInt(hexString.substring(colorIndex * 2, (colorIndex * 2)+2), 16) / 255;


I shall fork Pixi.js on GitHub soon and add some changes, however at this stage I haven't successfully got the color timeline to render through applying the above changes.

It seems there is also an issue around the duration variable in timelines sometimes being NaN, specifically:

duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]);

I'm not quite sure what is being attempted here with the rgba data, so I won't touch that part in any GitHub changes.

I will however submit the changes that at least allow the Spine to render without errors when it has color timelines.

Link to comment
Share on other sites

  • 2 months later...

Can anyone give me a clearer example of how to create a Spine animation to use with Pixi?


The example blog post seems to skip over the important part which seems to refer to using Texture Packer for handling the spritesheets instead of Spine's built-in texture packing. Is this correct? And if so, is this necessary?


I'm trying to get started with an example but I can't figure out how I'm supposed to export the animation. I just get an error

The frameId 'my_image.png' does not exist in the texture cache

I can't figure out what's wrong.

Link to comment
Share on other sites

Ok, it turned out I was close. From my understanding, the atlas support built into Spine is a newer addition, which would explain Pixi not supporting it.


From Spine I exported the animation data as JSON. The minified version export didn't work for me, but thinking about it that may have been related to the image paths (more on that later).


I found the correct export settings for Texture Packer.

  • data format: JSON (Hash)
  • no rotation

I was initially using JSON (Array), which didn't work.


Another gotcha I ran into was that using assets in subdirectories in Spine wouldn't work with Pixi Spine runtime. It may be a Spine runtime limitation, I'm not sure. For example:


I have my images in a folder like "assets/character/arm.png". In the exported JSON from Spine, the reference to the arm comes out something like this "assets/character/arm". For Pixi to intepret it, I had to do a find and replace to remove all instances of "assets/character/" before it would work.


Just mentioning this cause that might be hard to figure out!


Thanks for implementing Spine by the way! ;) Now that it's working its great.

Link to comment
Share on other sites

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


Will PIXI.Spine work with DragonBones? ( http://dragonbones.github.io/)
Or should I try to convert the DragonBones data into Spine data before using PIXI?


I've been wondering this myself, I'm trying to find any way to get DragonBones working with PIXI.  I read there are plans for Phaser 2.2 to make use of DragonBones, though I'm hoping I could rig something together currently.

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