It's a custom runtime in JS, mostly ported from the cpp and corona runtimes.

Hmm.. As the debug lines seems correct, the skeleton data should be correct. So I guess I need to double check the json reader for the animation and then every timeline implementation :/

guisquil wrote

"Maxime Biais on Generic JavaScript runtime Note there is a non-official spine.js project: https://github.com/flyover/spine.js" from https://trello.com/board/spine-runtimes ... 661c002455

Have you seen this one?

Yes, but I don't like the way it's done. So I prefer to build my own runtime, and possibly help Nate to build his own (or reuse mine).

terrymisu wrote

One thing to note is that C++ and Corona have different drawing paradigms. Corona is a y-down system, and C++ is a y-up system, so there could definitely be some differences, depending on which code you looked at for that.

Is JS y-up or y-down? (Where is your (0, 0) coordinate?)

I mostly use the C++ runtime as code base, as I know c++. Corona was more to see how some stuff are done (to match as much as possible the current code, so it's easier to maintain with updates).

JS is Y-down. (0,0 is top left). I already set the flag flipY to true in my SkeletonJson. Maybe there is somewhere else I forgot ^^

// edit:

Ok, my error was in my SkeletonJson implementation. I forgot to get the rotation value in the skins.

I still have a few problems with the animation, but it's getting better. It seems I also have the animation backward.

Image removed due to the lack of support for HTTPS. | Show Anyway

Sure I'll share if I found the solution ;-)

The code I used to draw the bone lines is pretty similar to the code in the Corona runtime.
In Javascript, it's like this:

for(var j=0, m=this.bones.length; j<m; ++j) {

                if(this.bones[j].boneData.length > 0) {
                    context.save();
                    context.strokeStyle = "red";
                    context.translate(this.bones[j].worldX, this.bones[j].worldY);
                    context.rotate(-this.bones[j].worldRotation * (Math.PI/180));
                    context.beginPath();
                    context.moveTo(0, 0);
                    context.lineTo(this.bones[j].boneData.length, 0);
                    context.closePath();
                    context.stroke();
                    context.restore();
                }

                context.fillStyle = "green";
                context.arc(this.bones[j].worldX, this.bones[j].worldY, 3, 0, Math.PI*2, true);
                context.closePath();
                context.fill();
            }
        }

I finally found my bug terrymisu.
In my case, it was just a drawing issue in my attachment code. The offset (width/2 and height/2) was not applied properly in my draw function.

I definitely have something working, tested the spineboy, the dragon and everything is fine now
Thanks for the help!