यह साइट एक आधुनिक ब्राउज़र में सबसे अच्छी तरह से देखी जा सकती है जिसमें जावास्क्रिप्ट सक्षम है।

Creating UI with Spine

torus

Hello!

I'm working on a UE4-based adventure game called Ukiyo.

I'd like to ask the best practice and/or tips for creating UI (HUD) with Spine.
I'm wondering how we should create the Spine animation for UI and hook them up with the game engine. If there are some tutorials it would be very helpful.

We are using UE4, but tips for Unity is also welcome!

Thanks!
Toru

Mario

For UE4, we have the Spine UMG widget, which allows you to integrate Spine animations with your UI.
spine-ue4 Runtime Documentation: Spine widget for UMG UI

These are just plain old UMG widgets, so wiring up events works like with any UMG widget.

For Unity, I'll let Harald explain.

Harald

On Unity a menu could be created as follows:
The spine-unity runtime provides the SkeletonGraphic component allowing you to render Spine skeletons using a CanvasRenderer. If you create a skeleton for e.g. your main menu, you can then add GameObjects with a BoneFollowerGraphic component for each interactable menu element (i.e. button) to add e.g. a bounding box and other components to handle mouse interaction (to trigger events upon hover or click). Then you could play Spine animations upon any button click, to create nice animated transitions from one menu to the next.

Another way to implement UI elements using Spine skeletons would be to replace normal image elements, e.g. each button, of your UI with a Spine skeleton. Then you could have a button with fancy skeletal animation instead of static images that only change their color upon hover and click events.

torus

Thank you very much for the answers, Mario and Harald!
So, now, I'm wondering how I should layout several UI elements on a single screen.
I made a basic button skeleton that is capable of 9-slice like stretching. Then I put multiple of them on a single Spine project by importing the button skeleton.

If I export this project for UE4 then Spine generates four skeletons. That allows me to control each of them individually.
But I'm not sure if this is a reasonable way to deal with more complicated UI since it might be a bit tedious to put many skeletons on a UMG widget one by one.
Do you have any recommendations about UI layout?

Mario

I would recommend using UMG for layouting, specifically to adapt to different screen aspect ratios and resolutions, and Spine for individual UI elements, i.e. single buttons, health bars, what have you.

torus

That makes sense. Thank you for your help!