Spine support added to Pixi.js

[Mat Groves]

Hey guys

 

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

 

http://www.goodboydigital.com/pixi-js-spine-animation/

 

Thats one more feature crossed of the list 

 

 

 

Heres some working examples:

 

http://www.goodboydigital.com/pixijs/examples/12-3/

http://www.goodboydigital.com/pixijs/examples/12-2/

http://www.goodboydigital.com/pixijs/examples/12/

 

Big thanks to enpu for the initial build!

 

[xerver]

Badass! Well done!

[Ezelia]

this makes Pixi a perfect choice for 2D games

[sfcal99]

Was messing with Typescript  just wondering if there is an updated version of pixi.d.ts with spine ? ... thanks

[hima]

Awesome! I was talking to the team's animator the other day and was deciding between Spriter and Spine. Now that I see this, Spine it is then!

[Seby]

That's really great!

[Gorsh]

Hello!

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.

[ryanmc.nz]

Wonderful framework! I am really enjoying using Pixi with Spine

 

Hello!

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

 

EDIT:

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.

[Son of Bryce]

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.

[Son of Bryce]

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.

[kid_karma]

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?

[Yora]

 

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.