Spine Skeletal Component References

Select the node and choose Add Component -> Spine -> Skeleton on the Inspector panel to add the Skeleton component to the node.

• For information on using the Spine Skeleton component, please refer to the Spine Skeleton example case for details.
• For Spine Skeleton component related scripting interfaces, please refer to the for details.

Here is an example of how Spine replaces the texture.

1. First, create a new Canvas node in the Hierarchy panel, and then create a new empty node and name it to girl under the Canvas node. Select the girl node and add the Skeleton component in the Inspector panel, drag and drop the asset into the SkeletonData property box of the Skeleton component. The Animation property of the Skeleton component can be changed to set the animation that the developer wants to play.

2. Create a new TypeScript script and name it SpineSkin in the Assets panel to write the component’s script. The script code is as follows:

   ```ts import { _decorator, Component, sp } from ‘cc’; const { ccclass, property } = _decorator;

   @ccclass(‘SpineSkin’) export class SpineSkin extends Component {

1. Next, attach the SpineSkin script to the Canvas node, i.e. drag and drop the script into the Inspector panel of the Canvas node. Drag and drop the girl node in the Assets panel into the property boxes corresponding to the SpineSkin script component and save the scene.

   

2. Next, use the Button component’s click event to trigger the change callback in the SpineSkin script to replace the texture by clicking the button.

   Create a new Button node under the Canvas node in the Assets panel and name it change_skin. Adjust its position, size, text display, and other properties as needed.

   Set the click event of the change_skin node in the Inspector panel, drag the Canvas node attached with the script component into the cc.Node property box of the ClickEvents property, specify script component as SpineSkin, and set the callback to change.

3. Adjust the scene structure as needed, save the scene and click the Preview button at the top of the editor. Click the change skin button to see that the character skin has been replaced.

   

The vertex effect is only available when Spine’s Animation Cache Mode is in the REALTIME mode. Here is an example of how to set the vertex effect in Spine.

1. First, create a new Canvas node in the Hierarchy panel, and then create a new empty node under the Canvas node. Select the node and add the Skeleton component in the Inspector panel, drag and drop the asset to the SkeletonData property box of the Skeleton component, and set the Skeleton component properties.

2. Create a new TypeScript script in the Assets panel and name it SpineExample, write the component script. The script code is as follows:

3. Next, attach the SpineExample script to the Canvas node, i.e. drag and drop the script into the node’s Inspector panel. Drag the Spine node with the Skeleton component attached in the Hierarchy panel to the corresponding Skeleton property box of the script component, and save the scene.

4. Click the Preview button at the top of the editor to see the effect of vertex jitter of the Spine animation. For example, please refer to the SpineMesh example.

When using skeleton animation, nodes are often attached on a certain part of the skeleton animation to achieve the effect of linkage between the nodes and the skeleton animation.

Spine Attachments can be implemented by using both editor and script. Here is an example of how Spine uses an attachment to attach a star to the dragon’s tail, and shake it with the dragon’s tail.

1. First, create a new Canvas node in the Hierarchy panel, and then create a new empty node and name it to Spine under the Canvas node. Select Spine and add the Skeleton component to the Inspector panel. Drag and drop the asset into the SkeletonData property box of the Skeleton component and set the Skeleton component properties.

2. Second, right-click on the Spine node in the Hierarchy panel and select Create -> 2D Objects -> Sprite to add a child node for it and name it star. Drag the star asset to the SpriteFrame property of the Sprite component in the Inspector panel.

3. Next, set the Path and Target properties of the Sockets. The Path drop-down box will list all the skeletons, select the target bone you want to attach, here take the dragon’s tail as an example, drag the star node to the Target property box. Notice the star attached on the dragon’s tail in the Scene panel.

   

4. Finally, save the scene and click the Preview button on top of the editor to see the star hanging on the dragon’s tail and swaying along with it. Please refer to the example for details.

Implementing via code

1. The first two steps are the same as those implemented via the editor.

2. If the name of the target bone is unknown, set the Sockets property in the Skeleton component to 1 and then look for the name of the desired target bone in the Path drop-down box. When the search is complete, restore the Sockets property to 0.

3. Next, attach the SpineAttach script to the Canvas node, i.e. drag and drop the script into the node’s Inspector panel. Drag and drop the Spine node with the Skeleton component attached and the star node in the Hierarchy panel to the Skeleton property box and the AttachNode property box of the script component, respectively, and save the scene.

4. Click the Preview button at the top of the editor to see the star hanging from the dragon’s tail and shaking along with the dragon’s tail.

   

The Spine attachment function allows for the detection of a collision of a part of the skeleton animation. The following is an example of how Spine implements collision detection, by determining whether the character’s feet are in contact with the ground or not to dynamically change the ground color when the character is running.

1. First, set the 2D Physics System to Builtin 2D Physics System in the Project -> Project Settings -> Feature Cropping of the editor menu bar.

   

2. Create the Spine node and its children (an empty node and named frontFoot), as well as the Sprite node as the ground (named Ground), and set the position, size, and other properties, as in the first two steps for the Spine attachment.

3. Select the frontFoot node in the Hierarchy panel, click Add Component -> Physics2D -> Colliders -> Polygon Collider2D in the Inspector panel to add a collision component, and set the collision component parameters.

   

   Referring to steps 3 and 4 of the Spine attachment, attach the frontFoot node to the target bone (“foot” for example) of the Sprite node. The frontFoot node will then move along with the skeletal animation, and thus the collision component’s bounding box will be synchronized with the skeletal animation in real time.

4. Select the Ground node in the Hierarchy panel, click Add Component -> Physics2D -> Colliders -> BoxCollider2D in the Inspector panel to add a collision component, and set the collision component parameters.

5. Create a new TypeScript script in the Assets panel and name it SpineCollider. Then attach the script on the node. The script code is as follows: