Esoteric Software

[vladislavrr]

I am interested in creating UI in Unity and want to test it with the given example Spinosauris.But the issue is I can't find any information how to do so.

I just want to load the spinosaurus animation and after it finishes when my cursor hovers over a button to trigger the hover animation and when i click on it to do something else. It seems so simple but I just couldn't find anything related to UI for spine.

[Harald]

Integration with the Unity UGUI system can be done in multiple ways.

It starts with having your skeleton instantiated as a SkeletonGraphic GameObject as a child of a Canvas object in your scene. If you want to let the Spine skeleton display all elements, then you need to add the respective Unity GUI interaction elements for each menu entry. This can be done by creating a child GameObject for each menu item with a BoneFollowerGraphic component added, which takes over following the location of the menu item.

In order to react to mouse click and hover events, you need a component that is a raycast target and can capture PointerClick, Select, Deselect and similar events. If you don't want to write your own script, you could e.g. use an Image or RawImage component and set the Color to completely transparent (alpha = 0) and clear Texture and Material in order not to render anything. This will capture mouse events.

To trigger your desired behaviour code (play a hover animation, start a game, open settings window, etc), you need something that either handles the events at the raycast target GameObject, or easier, forwards the events to a common menu script component. This can be done e.g. by attaching an EventTrigger component at your BoneFollowerGraphic menu item GameObject, where you can react to any event by calling a custom method at any other GameObject.

spine-skeleton-ugui-menu.png

You would then create a simple script that can play a target animation on your skeleton, e.g. like this:

public void OnPlayPressed () {
Debug.Log("Play");
skeletonGraphic.AnimationState.SetAnimation(0, animationPlay, false);
}

Please let us know if this makes sense to you. The above is definitely not a perfect solution, better ways would be to create a single script component that serves as a raycast target and provides forwarding the needed events, without the overhead of both a RawImage and EventTrigger component.

There are also other solutions to use Spine skeletons for menu animation, you could e.g. use Spine only for position and scale animation but not for rendering, and use normal UGUI Button elements to follow their corresponding menu item bones.

[vladislavrr]

Thank you, I like the BoneFollowerGraphic solution just tested it and it works like a charm.

[Harald]

Glad to hear, thanks for getting back to us.