• Runtimes
  • Creating attachments for spine-ts canvas runtime

Are there any examples of this? I'm trying to see how this works for loading separate image files for each. I don't really understand how the atlas would have to be loaded for this. Could this be dynamically generated and point to image files via full external path?

Related Discussions
...

What you will need to do is create an AttachmentLoader and pass that to SkeletonJson. The loader is reponsible to resolve attachments based on a skin name, attachment name, and path. Here's the AtlasAttachmentLoader used by default spine-runtimes/AtlasAttachmentLoader.ts at 3.7

The canvas backend currently expects attachments to contain a TextureAtlasRegion:

spine-runtimes/SkeletonRenderer.ts at 3.7

If you create a custom loader, you'll have to create your own TextureAtlasRegion instances from your images.

Thanks. What I'm looking to do is something similar to the skins demo, but every component would end up a separate image file, not already defined to a skin. The atlas will essentially be the same; images will all be the same size per component, but mainly different colors and such.

I've looked into the attachment loader, but this doesn't seem to work they way that I'm thinking since it points to only already defined attachments?

Defining these all in one sprite will be pretty bad for what I'm doing. The sprite will end up much too large.

Is the correct idea to create a new skin based on default and replace the attachments? Is there a texture packer for web? Or alternatively, can textures be created per individual image in spine, exported and then I can associate to the region?

The AtlasAttachmentLoader I linked to fetches regions from a TextureAtlas. In your case, you'd have to create the regions (and their references to WebGL textures) yourself, manually.

Yes, you can create a new skin based on the default and simply replace the attachments. For that you won't need an AttachmentLoader implementation, but you'll still need to load the WebGL textures and manually create regions from them to be set on your custom attachments.

I'm afraid there's no texture packer for the web in spine-ts. The Spine Editor doesn't let you export individual images to a individual regions as it only deals in texture atlases.

Thanks for your help. I did figure out a way to swap this.

For those who find this in the future, what I did was:

  • Take individual image components and draw them to an offscreen canvas, using mapping from the texture atlas
  • Snap the canvas toDataURL then create a new image (necessary to redraw to the spine canvas)
  • Create a new skin and replace the image with your newly generated one.