Clicking transparent parts in skeletongraphic assets

zombonline

Hi folks,

Joined up as I'm struggling to find a fix for the issue I currently havewith spine in Unity.
I'm trying to use a spine SkeletonGraphic asset as a button by using an event trigger attached to it, it seems to be registering transparent parts of the asset for the events however (and only some parts, not even all of them). Please let me know if there is more info I can provide.

Misaki

zombonline I think Spinebot's mention of Cull Transparent Mesh was a good insight, but I believe it should have also mentioned the following: There are two ways to hide specific parts—deactivating the attachment, or setting the slot color alpha to 0 to make it invisible. As a general rule, in the former case the attachment will no longer be drawn, while in the latter case it will remain part of the render process. This distinction is explained in the following section of the user guide:
https://esotericsoftware.com/spine-slots#Color

Fortunately, for spine-unity, transparent attachments are no longer rendered starting from version 4.2-beta. If you are using a runtime version 4.2 or later, this should not be an issue.
https://en.esotericsoftware.com/forum/d/17328-are-attachments-rendered-when-slot-color-alpha--0

Since you mentioned that “only some parts” of the transparent area register clicks, I suspect you might be using an older spine-unity runtime and are hiding parts by setting the slot color alpha to 0, which could explain the inconsistent behavior.

If you want to define a hit area independently of the mesh, the bounding box attachment is often used for that purpose. After setting it up in Spine, you can use the BoundingBoxFollower component to assign that shape to the PolygonCollider2D. (It’s typically used together with the BoneFollower component.) This can be helpful when you want precise control over hit detection.

Spinebot

To address the issue of transparent parts of a SkeletonGraphic asset registering events in Unity, you can try disabling the Cull Transparent Mesh option in the CanvasRenderer component of the SkeletonGraphic. This setting can sometimes cause unexpected behavior with transparency and event registration. Additionally, ensure that your material settings are correctly configured for the SkeletonGraphic component, as it uses a CanvasRenderer instead of a MeshRenderer. You might also want to check if the Event Trigger component is set up correctly and consider using a custom hit test to ignore transparent areas.

zombonline

Spinebot Thanks, If I set up a custom hit test, what would I access from the SkeletonGraphic asset in order to read the pixel values of the cursor hit location?

seraphki

Hello!

I too am interested in using a SkeletonGraphic with a button and having only the visible areas clickable, but it seems to me like the entire rect is the clickable area. If the skeleton animates outside the rect at any point that part no longer detects a click and any part inside the rect that is transparent is clickable.

If I use "Match Rect Transform with Mesh" during a bigger animation and it grows the rect, the new area becomes clickable, which is what convinces me its just using the rect area for click detection.

I believe I'm using a runtime earlier than 4.2, do I need to upgrade to make this possible without setting up bounding boxes as Misaki suggests, or is that my only option?

Misaki

seraphki Unfortunately, it may be difficult to fully understand your situation based solely on text. Could you please create a minimal Unity project that reproduces the problem and send it to us via email?: contact@esotericsoftware.com
Please include the URL of this forum thread in the email so we know the context. Then we can take a look at what's wrong.

Harald

seraphki I believe I'm using a runtime earlier than 4.2

You can check your runtime version by looking at `Assets/Spine/version.txt.
Or if you've installed it via Package Manager, the version listed there.

seraphki

Harald Ah, yes we're using Package version: spine-unity-4.1-2024-06-19

Misaki Ok I've sent you an email with a little project zipped up.

Harald

@seraphki Thanks for sending the additional info via email, that helped a lot with understanding your problem.

I'm afraid if you need more than a single rectangle as raycast-interaction shape / click shape, there is no straightforward solution when using SkeletonGraphic or Canvas UI elements in general. Canvas GraphicRaycaster is not really intended for mesh shapes, it's designed for simpler rectangular UI elements. You could create multiple UI elements however, and let each one receive a click or hover action in the normal way, and then handle the interaction accordingly at a common script. You could use a BoneFollowerGraphic component to let a UI click-shape element follow a certain bone.

If switching from SkeletonGraphic to SkeletonRenderer and SkeletonAnimation respectively is an option, that would make things easier as you could then set up bounding box attachments in Spine and use the BoundingBoxFollower component in Unity.

You could also use bounding box attachments in Spine and use a BoundingBoxFollower component just to detect which bounding box is active and enable and disable certain pre-setup Canvas RectTransform elements which mirror your collision shapes.

In general please note that it's usually preferrable to use larger (more generously enclosing) hit boxes than your actual mesh shape. Otherwise if collision shapes are too tight, missing it by just a bit often feels like a bug. Street Fighter for example uses only coarse rectangles as can be seen in this older posting by Nate:
https://esotericsoftware.com/forum/d/14667-spine-libgdx-collision-detection/3

seraphki

Ok thank you! I'll start digging into these options 🙂