How to make a joint draggable

mspanish

Hi I've looked a the stretchyman code which I know should give me all I need, but there has to be an easier way to do this!

I've created an ASL (sign language) puppet in Spine, and am using Spine Pixi to load him and make his arms move to represent the different movements in signs. Switching attachments, rotations, and colors at runtime is very straightforward. But I'm using a really hacky solution to try and allow the user to place the arms quickly rather than using the rotation buttons - I've done a quick and dirty hover feature where I look for the current X, Y value and see if it matches up to one of the specified areas in each body region.

It'd be WAY better to actually allow the user to drag and position the joint manually!

Does anybody have any really straightforward code (Spine TS) that would help with this? Or even some links to online examples of a project that does this? Maybe I need to dive into stretchyman again but that is some really dense code and would love to see something easier to implement.

thanks in advance to anyone who might be able to help!

Stacey

mspanish

Luke

Hello, I'll make an example for you, and will post an update as soon as it's done!

mspanish

Hey Luke that would be great. Hopefully would help a few other people too as this is a super cool feature of Spine in terms of user interaction.

Nate

We have an web demo that shows that:
Spine: Demos: Inverse kinematics

The source for it is here:
https://github.com/EsotericSoftware/spine-runtimes/blob/4.0/spine-ts/spine-webgl/demos/hoverboard.js

The source is a bit convoluted since it uses some utility code that all the demos share. Basically it uses spineDemos.closest, which is here:
https://github.com/EsotericSoftware/spine-runtimes/blob/4.0/spine-ts/spine-webgl/demos/utils.js#L114

That goes through the "control bones", which are the bones you can drag, and finds the one closest to a point (usually the mouse). The calling code remembers which bone is closest to the mouse, then when the mouse is dragged it adjusts the bone using spineDemos.dragged to move the bone to the mouse location, which is here:
https://github.com/EsotericSoftware/spine-runtimes/blob/4.0/spine-ts/spine-webgl/demos/utils.js#L135

If you allow an IK target bone to be dragged, you can easily have other bones adjust automatically.

mspanish

Hey thanks! I'll take a look at all of that. This could be a Firefox (Linux) thing - but on your first link I see this page.

Nate

Weird, it works on Firefox and Chrome on Windows. It should work the same on Linux. 🙁 Do you have any Firefox extensions that might be disrupting the page?