I'm happy to announce that the Spine runtime for StageXL was updated to Spine v3.5.
Samples and source code is available on GitHub: https://github.com/bp74/StageXL_Spine

The Spine runtime for StageXL just got another update, now with full support for Spine 3.6

http://www.stagexl.org/show/spine/spineboy/example.html
http://www.stagexl.org/show/spine/raptor/example.html
https://github.com/bp74/StageXL_Spine

Have fun!

The Spine runtime for StageXL was updated to Spine v3.
https://github.com/bp74/StageXL_Spine

I'm happy to announce that the Spine runtime for StageXL was updated to Spine v3.4.

http://www.stagexl.org/show/spine/tank/example.html
http://www.stagexl.org/show/spine/stretchyman/example.html

You are right, we need better tutorials to get started and i can understand how hard it is to make everything work if you don't have any experience with it. I will try to improve here. Btw. you don't have to use TexturePacker, you can actually use the texture atlas exported by Spine directly in StageXL. All you have to do is load the TextureAtlas with the LibGDX texture format. The samples contain this code so could give it a try (all examples have a "atlas1" and a "atlas2" texture atlas - the first one is the LibGDX texture atlas exported from Spine and the second one is the texture atlas from TexturePacker).

This is just a guess. Do you use the spine-js without another library? First of all i think that the renderer of spine-js only supports RegionAttachments but no MeshAttachments because they are hard to render with simple Canvas2D draw methods. So probably you are using a different library on top of spine-js which supports MeshAttachments. This library may use a different AttachmentLoader which does not support loading meshAttachments?

Btw. if you are coming from AS3 and you want to do some browser stuff, i highly recommand to take a look at this:
https://github.com/bp74/StageXL_Spine

Disclaimer: I'm the author of this runtime, haha. The Spine runtime for StageXL is a port of the AS3 runtime.

The runtime for StageXL got a few updates including a Canvas2D implementation for FFD. Unfortunately this may not be the best thing to use in practice since a FFD implementation for Canvas2D is pretty slow while same thing for WebGL is very fast. Still it was a fun experiment and it turned out it can be done. Maybe for small animations this could be even useful Other than that the runtime for StageXL got support for Flip Timelines. Have fun!

http://www.stagexl.org/show/spine/raptor/example.html

A new update for the runtime for StageXL was released. We fixed a few things and added support for all blend modes. One of the new features is the capability to load the texture atlas for an animation from a bigger texture atlas that combines several smaller texture atlases. The reason for this is simple: You can export different Spine animations and create an individual texture atlases for each animation (for example in the LibGDX format used by Spine). Later you can combine all those texture atlases into one bigger texture atlas to get best possible render performance.

http://www.stagexl.org/show/spine/texture-atlas/example.html

The next version of StageXL will support polygon sprite meshes for texture atlases. This new feature was inspired by the upcoming version of TexturePacker which supports polygon packing and polygon sprite meshes. This may sound complicated but all it does is just packing your assets more tightly for less memory allocation.

Old texture: http://www.stagexl.org/show/spine/raptor/atlas2/raptor.png (1044x512 = 534528 pixels)
New texture: http://www.stagexl.org/show/spine/raptor/atlas3/raptor.png (708x541 = 383028 pixels)

And it still works: http://www.stagexl.org/temp/raptor-mesh/example.html

Thanks a lot for the quick answer. So it's not my fault and that's a good thing too

Hi guys,

I'm the maintainer of the Spine runtime for StageXL and i got a question from a user who had a problem with an animation. I'm not sure if it is a bug in the runtime or if it is the correct behavior. So here is the problem:

Let's say you have an animation timeline with 100 frames and you set the attachment to null (invisible) at frame 50. In the first animation loop you will see the attachment from from 0 to 49 and from 50 to 99 the attachment will disappear - so far so good. When the second animation loop starts the attachment is still invisible at frame 0 and you won't see the attachment at all in the second animation loop. So you have to set a keyframe at frame 0 to make the attachment visible again.

The strange thing is that the animation loop in the Spine animation tool does not behave the same way. Every time the animation starts at frame 0 the attachment will be reset to be visible again. To make a long story short, is this a bug in the runtime? The Spine runtime for StageXL is a port of the AS3 runtime, but i also checked the LibGDX source code and it looks that the behavior is identical over different runtimes.

Thanks for you help,
Bernhard

Thanks for the update and your kind words! Your results are very interesting. I'm using a Galaxy S4 with Cyanogenmod and the current stable Chrome version is 38 which works fine too. Maybe Chrome 38 isn't rolled out to all devices yet. But you are right, since Chrome Beta works on your device it should be just a matter of time to make it work.

That's a good question. Up until now i though that Chrome supports WebGL on almost all modern mobile devices, obviously this is not the case I will try to get some more info about this issue.

Here is the Spineboy animation which does not use meshes, this one should work fine:
http://www.stagexl.org/show/spine/spineboy/example.html

I couldn't find any useful information which device supports WebGL and which does not. I saw some reports that the Samsung Galaxy Note 2 should run WebGL just fine and only older Chrome versions didn't support it by default. I really hope the day where most of those HTML5 incompatibilities are gone is not to far in the future Meanwhile, if you read this and you have a minute you could try open the following link on you phone. It tells you what version of Chrome and Android you are running: chrome://version

Thanks a lot for adding the link and also thank you for the test on the Samsung Note 2. The browser you have used is Chrome, right? It looks like if WebGL is not supported and the Spine animation is drawn with a fallback to Canvas2D. This works fine as long as the animation does not use meshes since meshes can't be drawn in Canvas2D. So the question is, why isn't WebGL used on the Note 2. Hmmmm ......

Hi Guys,

It would be an honor if you could list the Spine Runtime for StageXL on your homepage. StageXL is a render engine for Dart and HTML5. It supports all the latest feature available in Spine, including inverse kinematics.

Source available on GitHub:
https://github.com/bp74/StageXL_Spine

Samples:
http://www.stagexl.org/show/spine/raptor/example.html
http://www.stagexl.org/show/spine/gobli ... ample.html

Thank you very much for Spine which is an awesome tool for 2D animations.
Bernhard