• Runtimes

  • Equivalent of GetReamppedClone for spine-ts?

Related Discussions
...

On Unity, I've been using GetRemappedClone (from AttachmentCloneExtensions.cs in spine-unity) to create dynamic attachments. I'm trying to recreate the same functionality using spine in the browser. Is there an equivalent of AttachmentCloneExtensions/GetRemappedClone? Is there another reference I should follow to produce dynamic attachments within web runtimes?

There's no such equivalent at the moment because what should it remap to? The Unity runtime remaps to a sprite. The spine-ts runtimes like canvas/player/webgl/threejs don't have an equivalent. If you can describe your use case I can see what we can come up with.

The use-case is that I would like to replace a MeshAttachment dynamically with images loaded from a different domain. For example, if my SpinePlayer initial path loads from "./assets/character.atlas.txt", I want to replace the character's arm with a mesh attachment whose image is loaded from "https://differentdomain.com/mods/arm.png". I also want to blend multiple images for the arm, for example if I want to show a tattoo, which might load from yet another location "https://differentdomain2.com/more-mods/tattoo.png".

I understand that these images need to be the same size in order to make this work. My question is mainly around how to achieve this dynamically with the spine web player.

Ah, that makes sense. This is not entirely trivial I'm afraid. I haven't created an example yet that does what you need, but I can outline the approach.

As a first step, you have to load your alternative images. This is done via AssetManager.loadTexture(), on which you can set a callback that will be called once the texture has been loaded.
https://github.com/EsotericSoftware/spine-runtimes/blob/4.1/spine-ts/spine-core/src/AssetManagerBase.ts

player.assetManager.loadTexture("https://whatever", (path, texture) => {
   ...
});

Next, make a copy of the existing Attachment on your already loaded skeleton. Get the slot that holds the attachment from the skeleton, then copy the attachment in the slot:

let slot = player.skeleton.findSlot("name-of-the-slot");
let attachment = slot.getAttachment();
let attachmentCopy = attachment.copy();

Next, you have to set the attachment's region, which describes the area within the texture it maps to. Since you use same sized images, this should likely look like this:

let region = {
   u: 0,
   v: 0,
   u2: 1,
   v2: 1,
   width: texture.getImage().width,
   height: texture.getImage().height,
   degrees: 0,
   offsetX: 0,
   offsetY: 0,
   originalWidth: texture.getImage().width,
   originalHeight: texture.getImage().height,
   renderObject: {
      page: {
         texture: texture
      }
   }
};
attachmentCopy.region = region;

Finally, you have to call attachmentCopy.updateRegion() so the attachment's texture coordinates are remapped to the region you just set.

All of this is from the top of my head, so there may be dragons. Give it a try and we can iterate it if you run into issues.

Thanks Mario, I followed your hint and got it working but due to my particular requirements, it was messy and the results are not generalizable. For example, take the arm mesh texture, which is bound to two bones: upper-arm and fore-arm. In some animations, when the bones form a sharp angle, the arm mesh texture overlaps itself. I load in a dynamic attachment on top of the arm with a semi-transparent texture, it will not blend correctly. I solved this by passing the dynamically loaded texture into the shader. After that, other problems that came up: color channels now needed to be passed into the shader as well, lasttexture/flush model in PolygonBatcher was causing problems with clear texture. Again, the mess is entirely my fault and I doubt anyone else has such peculiar requirements as mine. Thank you and the Spine team again for making the spine-ts runtime so readable and easy to modify and pointing the way in your last response.

I'm sorry it had to end up in a mess :/ I wonder tho, why you'd run into issues with bone weights, as those do not depend on the image used for a mesh attachment. If there's anything on our end that can make your use case easier, please let me know.

Sorry if I was unclear, I don't think there is an issue with bone weights. Spine is behaving as expected, which is to "fold" the mesh when it deforms on top of itself. However, if I have an attachment bound to the same bones with a semi-transparent mesh, the deformation is not how I want it to look. I fixed this by passing the texture to the shader and blending it within the shader. Again, I'm pretty confident this is a unique problem for my use-case.