• Runtimes
  • [spine-ts/spine-webgl] regionAttachment hit detection

Related Discussions
...

I'm using spine-webgl, which the version is 3.8.
I found the attachment type is regionAttachment.
I want to do hit detection with SkeletonRenderer and RegionAttachment. I follow the link below, but it doesnot work on RegionAttachment.
Can I use SkeletonBounds with RegionAttachment? I'm sorry about my poor English

[canvas/webGL] Mouseover Bounding Box?

SkeletonBounds is only for bounding box attachments, sorry. Most characters have many region attachments and checking them all for hit detection is often overkill. Even games where hit boxes are very important, such as Street Fighter, use rectangular hit boxes that don't necessarily match the character images.

You could simply add a bounding box that matches the region attachment, then you can use SkeletonBounds.

Or, you could put a bone in the center of your region attachment or character, then at runtime get the world X/Y of the bone and use it as the center of a bounding circle. It's very easy to check if a point is within X distance of the bone.

No worries, your English is fine!

Thanks for your reply.
I'm using the second method. I find a bone, and I get its world X/Y, I also get the local screen click X/Y, How can I transform the local screen X/Y to the world X/Y, so that I can check the hit.
Below is my code snippet.

onPersonClick (e) {
      const person = this.$refs['person']
      const canvas = person.gl.canvas
      const skeleton = person.skeleton
      let rect = this.$refs['person-wrapper'].getBoundingClientRect()
      console.log(rect)

  // get local screen x/y
  const offsetX = e.clientX - rect.left
  const offsetY = e.clientY - rect.top
  console.log('local coord:', offsetX, offsetY)

  const bone = person.skeleton.findBone('003')
  // get the bone's world x/y
  console.log(bone.worldX, bone.worldY)
 
  // how can I transform offsetX to worldX, so that I can compare with bone's worldX
  ......
}

The bone's world X/Y is in relation to the skeleton's world 0,0 which is where the skeleton is positioned. Do you position the skeleton using the skeleton's X/Y? You'll need to take that into account. It looks like you are in a browser? You may also need to consider the position of the canvas.

Yes! I'm in a browser, I get the click x/y in the canvas(They are offsetX/offsetY in the above code).

My code is extended from the example from here spine-runtimes/index.html at 3.8.

What else I didn't do?