Replace Region with image on runtime with Spine

Phaser 3
1

I’d like to replace a Spine model’s Slot Region with a custom image during runtime. I found documentation on how to do this with Unity, but I can’t find out how to do this with Phaser3.

How can I do this with Phaser3?

2

You mean changing an attachment?
Take a look at topic #1042

3

Close! However, the example already has the image loaded in the atlas. I’m looking for a solution where you replace the image with a downloaded image somewhere with the same width & height (important).

4

I resorted to removing the dummy atlas image and simply loading an image over it. The image’s x, y, rotation, and scale values track the bone’s value so it moves just as an attachment would.

Not recommended, but it worked…

        // remove slot attachment.
        const slot = spineModel.findSlot(boneName);
        slot.setAttachment(null);

        // get bone to track animation.
        const bone = spineModel.findBone(boneName);

        // define update function.
        const updateImageTransform = () => {
          // cache bone value.
          const b = bone;
          // update card transform.
          img.rotation = b.rotation;
          img.x = spineModel.x + b.x;
          img.y = spineModel.y + b.y;
          img.scaleX = spineModel.scaleX * b.scaleX;
          img.scaleY = spineModel.scaleY * b.scaleY;
        }