Akis

Allo!

I tried to use the spine in my setup but I still have a few issues. Maybe someone could have an idea.

Without starting the animation, everything is fine. The skeleton and the attachments are well drew.
But as soon as I enable the animation, the images are not drew at the right location. Here is an example of what I got at the frame 0:


Does someone know where I could have something wrong ?
Akis

Kickstarter Backer
  • Messaggi: 13

terrymisu

Which runtime are you using?

It looks like your rotation is off, for one thing. It also looks like you might have some offsets wrong, but it's hard to tell.
Avatar utente
terrymisu

Kickstarter Backer
  • Messaggi: 136

Akis

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 :/
Akis

Kickstarter Backer
  • Messaggi: 13

guisquil

"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?
guisquil

Kickstarter Backer
  • Messaggi: 15

terrymisu

Akis ha scritto: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 :/
I think your rotation and placement of your textures is wrong.

Everything else looks correct.
Avatar utente
terrymisu

Kickstarter Backer
  • Messaggi: 136

terrymisu

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?)
Avatar utente
terrymisu

Kickstarter Backer
  • Messaggi: 136

Akis

guisquil ha scritto:"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 ha scritto: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 ^^
Akis

Kickstarter Backer
  • Messaggi: 13

Akis

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

Akis

Kickstarter Backer
  • Messaggi: 13

terrymisu

That looks similar to the problems I'm chasing with the Python runtime.

If you figure out what's going on, will you post the solution?

Thanks.
Avatar utente
terrymisu

Kickstarter Backer
  • Messaggi: 136

terrymisu

Akis - How are you drawing your bone lines? Can you share your debug code?

I'm struggling with this.
Avatar utente
terrymisu

Kickstarter Backer
  • Messaggi: 136

Akis

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();
}
}
Akis

Kickstarter Backer
  • Messaggi: 13

Akis

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!
Akis

Kickstarter Backer
  • Messaggi: 13

terrymisu

Hmmm would you mind posting your code?

I have to do the same thing, so maybe I've got the same bug. :)
Avatar utente
terrymisu

Kickstarter Backer
  • Messaggi: 136


Torna a Editor