UI sprite image between slots "Draw order

RTpro

Hello
I try to make an UI where I've got a UI box that cover the Sprite image and the sprite image is following the bone in the same Spine animation. So it looks like that:
root

box_cover
item bone (sprite image attached)
box_bg

I can't figure out how to attached the sprite image so it will not cover the "box_cover" but in the same time will be on the top of "box_bg"

Spinebot

To achieve the desired draw order where the sprite image is between the "box_cover" and "box_bg", you need to adjust the draw order of the slots in your Spine project. In Spine, the draw order is determined by the order of the slots. You can change the draw order by dragging the slots in the Draw Order node in the Spine editor.

Here's how you can set it up:

Ensure that the "box_cover" slot is above the "item bone" slot in the draw order.
Ensure that the "item bone" slot is above the "box_bg" slot in the draw order.

This way, the "box_cover" will be drawn first, then the "item bone" with the sprite image, and finally the "box_bg". This will make the sprite image appear between the "box_cover" and "box_bg".

If you need to change the draw order dynamically at runtime, you can do so by accessing the draw order property of the skeleton and adjusting the slots' order programmatically.

RTpro

Spinebot Ok but I need to do it in Unit3D not in Spine project

Harald

@RTpro I'm not sure I understand your setup clearly. Are the box_cover and box_bg attachments normal Spine attachments and are you programmatically replacing an attachment item bone with a Unity Sprite (as shown in the Spine Examples/Other Examples/Mix and Match and Mix and Match Equip example scenes)? Or do you want to sandwich (layer in-between) a separate Sprite Unity GameObject between two attachments in your Spine skeleton?

If you want to use a separate GameObject, you need to split the skeleton into multiple parts, which can be done via the SkeletonRenderSeparator component for SkeletonAnimation and SkeletonMecanim, and via the Advanced Inspector section of the SkeletonGraphic component, Separator Slot Names.

If you just want to change the draw order, you can do this via separate animations which just modify the draw order and play these accordingly, or by modifying SkeletonGraphic.Skeleton.DrawOrder. Note that if you key draw order in playing animations, it's important when you modify the draw order so that you override the draw order after animations have been applied (see the documentation on the update order here).