Esoteric Software

[BackHa]

Hi guys, I would like to use some Spine animations in my Vue project and wonder if I could have some interactions on the Spine's bone which may trigger a DOM event; e.g.: Binding a Click event on the tail of a Spine dragon that will display a modal with some dynamic content got from API in JS code. Is it possible?

My first thought was just binding a click event on the spine player canvas, get the cursor pointer and the bone coordinates, then detect whether the bone area got clicked. But I would like to know if there is any other solutions that might be more simple. Thank you!

[Nate]

Sure, we do it on the demos page, eg the IK demo:
Spine: Demos: Inverse kinematics

The demos use some helper code, so it's a bit hard to follow:
https://github.com/EsotericSoftware/spine-runtimes/blob/4.1/spine-ts/spine-webgl/demos/hoverboard.js#L96
https://github.com/EsotericSoftware/spine-runtimes/blob/4.1/spine-ts/spine-webgl/demos/utils.js#L114

You could use the Input class yourself though:
https://github.com/EsotericSoftware/spine-runtimes/blob/4.1/spine-ts/spine-webgl/src/Input.ts

Oh, we actually have a draggable bones example:
https://github.com/EsotericSoftware/spine-runtimes/blob/4.1/spine-ts/spine-webgl/example/bone-dragging.html

[BackHa]

Thank you Nate, that's great, I will check it