To be more precise, the code relevant to your question is here:
https://gist.github.com/lukeeingram/f8326635b7d998736bb1cf57044d2755#file-click-example-html-L42
It sets a click listener on the canvas. In case the user clicked, the head
bone is fetched from the skeleton and the mouse coordinates of the click are checked for whether they are within a specific radius of the headbone position.
I've created a codepen so you can play around with it: https://codepen.io/badlogicgames/pen/yLpyJxG?editors=1010
If you have Spine Professional, you can also create bounding box attachments in your skeleton. These allow for much more precise hit detection. Spineboy has a bounding box around his head:
In code, you then create a SkeletonBounds instance, update it with the current pose of the skeleton (skelBounds.update(skeleton)
) and then use one of the hit/intersection testing methods to check if a bounding box attachment was hit. (skeltBounds.containsPoint(mouseX, mouseY)
). I've created a codepen demonstrating this here:
https://codepen.io/badlogicgames/pen/WNdbpea?editors=1010