Say I have a TrackEntry with some keyframes loaded in it. In order to play it I need to call AnimationState.update(dt).

However is there a way to control the playback by mixing manually between frames? For example pass a normalised value 0.5 somehow that will give me the exact middle frame of the TrackEntry?

We are integrating Spine in our engine and need to synchronise its animation playback with our custom tweening libraries. For example I want to move my animated character in world space from X0 to X1 using our custom tween lib, while playing the Spine animation in local space. In order to keep these two animations in sync, I would like the tween to control the Spine playback.

Is this possible? Or is there a cleaner way that I am failing to see? Thanks in advance!

Thanks for all the info. Using the spine-core as inspiration, I managed to onboard skeletal animations using our batch renderer. On top of that, we have support for multiple textures per fragment shader, allowing us to pack textures into 2048x2048 megatextures and do batching across multiple models / skeletons via RegionAttachment, effectively drawing multiple models with 1 draw call. MeshAttachment however breaks it and forces flushes, due to each mesh having it's own indices layout. Not sure if I can get around that...

Thanks!

Thank you for your answer. Following the spine-canvas example, I did manage to get the dragon properly animated using our engine.

However after reading through more of your examples, I start to realise that some attachments will not be able to be expressed with quads in a scene-graph, such as MeshAttachment, which is built from multiple polygons with different GL.TRIANGLE* modes.

Am I correct? In that case we would need to resort to the lower level batch renderer, dynamically manipulating our vertices to world space transforms with attachment.computeWorldVertices I guess?

Thanks for all the info BTW!

Thank you for the reply! Seems that I missed the atlas packing specification on your website.

Our renderer allows for the scene graph to be batched behind the scenes. Very good point about showing / hiding attachments though.

Transforming a scene graph node to match a bone can still be done when needed

Do you have any code samples I can refer to? Somewhere a scene graph is initialised at init time and then transformed via matrices composed out of the a, b, c, d, worldX and worldY components?

Hey all,

I am currently looking into integrating Spine animation runtime with our custom WebGL renderer. I wrote a small demo covering the essentials (skeleton and textures handling), however have two questions, for which I can't find much in the codebase or docs:

1. Looking at the .atlas files generated by Spine, I can't understand what the offsets field is doing. I get bounds, that would be the image subregion within the sprite atlas, but don't get how does it relate and affects bounds.

Right now I am taking only bounds into account when displaying my spritesheets and my textures are clearly wrong. Is it something like this:

Where the black borders are bounds, yet the red borders are offsets?

2. How to use the bones a, b, c, d, worldX and worldY properties to construct a proper 3x3 world transform matrix.

Looking at your threejs integrations I saw you are calculating the quads world positions via attachment.computeWorldVertices method + doing batch rendering and directly batching the world space position vertices as floats.

However my engine has a proper scene graph, that I'd like to utilise and not do lower level vertices arrays manipulation. Here is my current update method:

public update(dt: number): void {
   this.state.update(dt);
   this.state.apply(this.skeleton);
   this.skeleton.updateWorldTransform();

   const skeleton = this.skeleton;
   const worldMatrix = Matrix3.create();

   for (let i = 0; i < skeleton.drawOrder.length; i++) {
      const node = this.children[i];
      if (!node) {
         continue;
      }
      const slot = skeleton.drawOrder[i];

  Matrix3.set(
     worldMatrix,
     slot.bone.a,
     slot.bone.b,
     slot.bone.c,
     slot.bone.d,
     slot.bone.worldX,
     slot.bone.worldY
  );
  Matrix3.copy(worldMatrix, node.transform);
   }
}

At init time I have created a bunch of Node elements that correspond to each Bone and as you can see, in the update I construct a 3x3 matrix out of a, b, c, d, worldX and worldY elements. This almost works, however my model appears inverted:

Is there a better way to go about this? Looking at the Bone class, I don't see a 3x3 matrix that I can use exposed and am not sure how to construct one out of these fields.

Thanks for the great software, I am really excited to get this running!