• Runtimes

  • Add a new bone with a slot and attachment at runtime

    anglais

Hello, I am trying to find an example on how i can add a new bone with a slot and attachment at runtime in Javascript. I can add new slots to existing bones, but how can i add a new bone? Thanks.

Related Discussions
...

To add a new bone with a slot and attachment at runtime in JavaScript, you can follow these steps:

  1. Create a new bone: You need to create a new BoneData object and add it to the skeleton's SkeletonData.
  2. Create a new slot: Create a new SlotData object and add it to the skeleton's SkeletonData.
  3. Create an attachment: Create an attachment and set it to the new slot.

Here is an example in JavaScript:

// Assuming you have a skeleton object
let skeleton = ...;

// Step 1: Create a new bone
let boneData = new spine.BoneData(skeleton.data.bones.length, "newBone", skeleton.data.bones[0]);
skeleton.data.bones.push(boneData);
let newBone = new spine.Bone(boneData, skeleton, skeleton.bones[0]);

// Step 2: Create a new slot
let slotData = new spine.SlotData(skeleton.data.slots.length, "newSlot", boneData);
skeleton.data.slots.push(slotData);
let newSlot = new spine.Slot(slotData, newBone);

// Step 3: Create an attachment
let attachment = new spine.RegionAttachment("newAttachment");
attachment.setRegion(...); // Set the region for the attachment
newSlot.setAttachment(attachment);

// Add the new bone and slot to the skeleton
skeleton.bones.push(newBone);
skeleton.slots.push(newSlot);

This example assumes you have a basic understanding of how to work with Spine's runtime in JavaScript. You need to replace the ... with your actual skeleton and region data.

For more detailed information, you can refer to the Spine Runtimes Guide and the API reference.

I see that the bone and slots are added in the console, but it does not seem to be rendered on the screen. I double checked the drawOrder and the slot was added to the end.

You must also call Skeleton.updateCache(), which will update some internal data structures responsible for calculating transformations and constraints in the appropriate order.

If you've already setup a proof of concept, it might be easier for us if you could share it, say as a Codepen, so we have a better idea what exactly you are doing.