I believe Pixi.js mostly uses spine-js, so would be a matter of updating it to the latest.

Turbulenz with 2D canvas, I'm not sure. When I looked at what to use for rending in JavaScript, Turbulenz was the only sane way to do it. I wrote the SpriteBatch over their draw2d API and it worked great.

Here is a 2D canvas Spine renderer:
https://github.com/EsotericSoftware/spi ... s/pull/123
I haven't had a chance to merge it. It uses SRT to draw images so won't work well with non-uniform scaling if images are not aligned to the bones (0, 90, 180, or 270 rotation).

Nate wrote

Here is a 2D canvas Spine renderer:
https://github.com/EsotericSoftware/spine-runtimes/pull/123
I haven't had a chance to merge it. It uses SRT to draw images so won't work well with non-uniform scaling if images are not aligned to the bones (0, 90, 180, or 270 rotation).

Does this mean non-uniform scaling once worked? I'm having trouble getting it to work on this little buddy:
https://dl.dropboxusercontent.com/u/1126173/example/example.html

I have replaced my just-point bones with bones with a length to assure the attachments had something to align to, but that did not work. Am I missing something?

Thank you!

Cool animation!

Non-uniform scale doesn't work correctly with images that aren't aligned to the bones when using spine-canvas. It never has, due to how images are drawn as rectangles rather than specifying 4 arbitrary vertices.

Thanks!

So does that mean that it would work with images that ARE aligned to the bones?

-and following that, how do I properly align the images to their bones?

I've sent you my source file (email), I understand if you don't have the time, but here's hoping.

Thanks

Yes, it works when aligned. The images need to have a rotation of 0, 90, 180, or 270.

In that case, could you perhaps have a look at that file?

Edit the spine-js readme does read:

Because it renders rectangular images, nonuniform scaling and mesh attachments are not supported.

-but your comment above here gave me some hope.

All the images are at 0 degree angles to their bones, and I've tried a version with having eyewhite bone at no rotation, too, but it still will not non uniformly scale in my canvas rendered version.

The eye white just stays at a 100% scale, while in Spine I squashed it to fake going around the orb that is it's body.

Much obliged!

I committed a fix.

I did happy jumps just like my little dude
THANKS

Oh shoot!

This last update works fine in webkit browsers, but firefox says:
"IndexSizeError: Index or size is negative or greater than the allowed amount (spine-canvas.js Line: 93)"

on stackoverflow, they say these things about it:
http://stackoverflow.com/questions/19338032/canvas-indexsizeerror-index-or-size-is-negative-or-greater-than-the-allowed-a
-but that's well beyond my reach.

(Still doing my happy dance... - we've set it to music, and timed the bpm! )

Hi! One of our programmers had a look and came across the technique of flipping the canvas instead of drawing negative worldspace things.

In spine canvas JS, starting at line 91, he added the following, making it work for Firefox:

var w = attachment.width * Math.abs(bone.worldScaleX), h = attachment.height * Math.abs(bone.worldScaleY);
         context.translate(x, y);
         context.rotate(rotation);
         context.save();
         //check if negative X

     var wScaleX = 1;
     var wScaleY = 1;

     if(bone.worldScaleX < 0){
        wScaleX = -1;
     }
     if(bone.worldScaleY < 0){
        wScaleY = -1;   
     }
     if(wScaleX == -1 || wScaleY == -1){
        context.scale(wScaleX, wScaleY);
     }

     context.drawImage(attachment.rendererObject, -w / 2, -h / 2, w, h);
     context.restore();

Happydance time!

-PS: He did make me note this is not elegant at all. But this code works for us ATM