How to spine skleton slot hide show?

Cocos Creator
#1

I didnot find any proper code or method to hide or show slot of spine animation in cocos creator . i am using cc v3.4.

#2

This api is for showing slots in debug view

1 Like
#3

@pandamicro I did not understand the exact syntax as
the method ā€œdebugSlotā€ is only returning Boolean value, can you send an example code that shows and hide the spine animation slot?
thanks for the reply and waiting for more help.

#4

Itā€™s a boolean property, so you can set it to show and hide the debugging slots

skeleton.debugSlots = true;
// or
skeleton.debugSlots = false;
#5

what i want to achieve is i have a spine with 10 items but at a time I want to show only one item and other 9 items (spine slots) would be hidden. i am confused how debugSlot will be used to achieve that , for example in cocos 2dx we use findSlot and use opacity(slotName.a = 0), but donā€™t know how to achieve this in cocos creator

@pandamicro

#6

Oh, sorry I miss understood your need, in that case, we treat all spine animations as a whole, including mesh animation, skeleton animation, color & opacity animation, so you need to do that in Spine editor to hide certain slot.
If the slots you want to show are in a range, you can try to use setSlotsRange

#7

I have total 50 slots and at some particular time I am showing that particular item(which is spine slot) so how will it be possible to do it by spine because as per my knowledge spine animation have all slots included in single file and we show and hide as per our need , thatā€™s what we are doing in cocos 2dx.
now I want to achieve this in creator but as you said skeleton is treated as a whole, than how these slots will be differentiated, and how these 50 items(slots will be used).
if you know how to do this in spine that will also be helpful, thank you for all the help.

@pandamicro

#8

I tried with setSlotsrange method but I have a spine file having 100 slots like this and how will I know which one to show in a range as I donā€™t have specific number.

#9

after 2 days of trails and errors I found the solution and posting here so that someone who needs this can find it.
so if you want to hide slot of spine animation use this:
this.getComponent(sp.Skeleton).findSlot(ā€œSlot_nameā€).setAttachment("", ā€œā€);

(NOTE: keep attachment parameters empty.
now, if you want to show this again :slight_smile:
this.getComponent(sp.Skeleton).setAttachment(ā€œSlot_nameā€, ā€œattachment_nameā€);

(NOTE: in my case attachment and slot name are same).

thank you communityā€¦

Smooth transition Between the Spine animation
#10

Oh thank you so much for sharing, sorry Iā€™m not very familiar with spine API and not being so helpful. I thought spine slot and attachment are rendered separately, so didnā€™t thought about removing attachment.

1 Like
#11

Starting with version 3.5.0, the engine supports setting bone.active to control the display and hiding of spine bone slots. The code used is as follows:

this.node.getComponentļ¼ˆsp.Skeletonļ¼‰.findBoneļ¼ˆā€œgunā€ļ¼‰.active = false;

If you need to support this feature in version 3.4, you need to refer to this pr modification engine: fix spine rendering confusion by xianyinchen Ā· Pull Request #10348 Ā· cocos/cocos-engine Ā· GitHub 3.4.x currently has some error in the engine compilation function on the editor, so I still recommend that you use 3.5 and above.

#12

thanks for shring this, will try this in my next project