Spine Skeleton 组件参考

在 层级管理器 中选中需要添加 ArmatureDisplay 组件的节点，然后点击 属性检查器 下方的 添加组件 -> Spine -> Skeleton 按钮，即可添加 Skeleton 组件到节点上。

下面通过一个范例介绍 Spine 如何换装。

首先在 层级管理器 中新建一个 Canvas 节点，然后在 Canvas 节点下新建一个空节点并命名为 girl。选中 girl 节点并在 属性检查器 中添加 Skeleton 组件，将资源拖拽至 Skeleton 组件的 SkeletonData 属性框中。可更改 Skeleton 组件的 Animation 属性用于设置想要播放的动画。
在 资源管理器 中新建一个 TypeScript 脚本并命名为 SpineSkin，编写组件脚本。脚本代码如下：
然后将脚本挂载到 Canvas 节点上，即将脚本拖拽到 Canvas 节点的 属性检查器 中。再将 层级管理器 中的 girl 节点拖拽到 SpineSkin 脚本组件对应的属性框中，并保存场景。
接下来我们需要利用 Button 组件的点击事件来触发 SpineSkin 脚本中的 change 回调，实现通过点击按钮来切换皮肤。

在 层级管理器 的 Canvas 节点下新建一个 Button 节点并命名为 change_skin，根据需要调整其位置、大小、文字显示等属性。

然后在 属性检查器 中设置 change_skin 节点的点击事件，将挂载了 SpineSkin 脚本组件的 Canvas 节点拖拽到 ClickEvents 属性的 cc.Node 属性框中，指定脚本组件为 SpineSkin，并设置回调为 change：
根据需要调整场景结构，保存场景后点击编辑器上方的预览按钮，点击 change skin 按钮，可以看到人物皮肤已被替换。

顶点效果只有当 Spine Skeleton 组件的 Animation Cache Mode 属性设置为 REALTIME 模式时有效，下面通过一个范例介绍 Spine 如何设置顶点效果。

首先在 层级管理器 中新建一个 Canvas 节点，然后在 Canvas 节点下新建一个空节点并命名为。选中 Spine 节点，并在 属性检查器 中添加 Skeleton 组件，将资源拖拽到 Skeleton 组件的 SkeletonData 属性框中，设置好 Skeleton 组件属性。
在 资源管理器 中新建一个 TypeScript 脚本并命名为 SpineExample，编写组件脚本。脚本代码如下：
然后将 SpineExample 脚本挂载到 Canvas 节点上，即将脚本拖拽到节点的 属性检查器 中。再将 层级管理器 中挂载了 Skeleton 组件的 Spine 节点拖拽到脚本组件对应的 Skeleton 属性框中，并保存场景。
点击编辑器上方的预览按钮，即可看到 Spine 动画顶点抖动的效果。详情可参考 SpineMesh（ | Gitee）范例。

在使用骨骼动画时，经常需要在骨骼动画的某个部位上挂载节点，以实现节点与骨骼动画联动的效果。我们可以通过使用编辑器和脚本两种方式来实现 Spine 挂点。下面通过一个范例来介绍 Spine 如何使用挂点将星星挂在龙的尾巴上，并随一起晃动。

首先在 层级管理器 中新建一个 Canvas 节点，然后在 Canvas 节点下新建一个空节点并命名为 Spine。选中 Spine 节点，并在 属性检查器 中添加 Skeleton 组件，将资源拖拽到 Skeleton 组件的 SkeletonData 属性框中，设置好 Skeleton 组件属性。
在 层级管理器 中右键点击 Spine 节点，选择 创建 -> 空节点 在 Spine 节点下添加一个空节点并命名为 targetNode。然后在 targetNode 节点下添加 Sprite 子节点并命名为 star。然后将星星资源拖拽到 属性检查器 中 Sprite 组件的 SpriteFrame 属性上。
然后设置 Sockets 中的 Path 和 Target 属性，Path 的下拉框中会列出所有的骨骼，选择想要挂载的目标骨骼，这里以龙的尾巴为例，然后将 targetNode 节点拖拽到 Target 属性框中。即可在 场景编辑器 中看到星星挂在了龙的尾巴上。
保存场景，点击编辑器上方的预览按钮，也可以看到星星挂在龙的尾巴上，并随着龙的尾巴一起晃动。具体可参考官方 SpineAttach（ | Gitee）范例。

前两个步骤与通过编辑器实现的一致。
然后将 SpineAttach 脚本挂载到 Canvas 节点或者其他节点上，即将脚本拖拽到节点的 属性检查器 中。再将 层级管理器 中挂载了 Skeleton 组件的 Spine 节点和 targetNode 节点分别拖拽到脚本组件对应的 Skeleton 属性框和 AttachNode 属性框中，并保存场景。
点击编辑器上方的预览按钮，即可看到星星挂在龙的尾巴上，并随着龙的尾巴一起晃动。

通过 Spine 挂点功能可以对骨骼动画的某个部位做碰撞检测。下面通过一个范例来介绍 Spine 如何实现碰撞检测，通过判断人物脚与地面接触与否来实现当人物跑动时，动态地改变地面颜色。

首先需要在编辑器菜单栏的 项目 -> 项目设置 -> 功能裁剪 中将 2D 物理系统 设置为 内置 2D 物理系统。
与 Spine 挂点的前两个步骤一样，创建好 Spine 节点和其空子节点（命名为 frontFoot），以及 Sprite 节点作为地面（命名为 Ground），并设置好位置大小等属性。
在 层级管理器 中选中 frontFoot 节点，在 属性检查器 中点击 添加组件 -> Physics2D -> Colliders -> Polygon Collider2D 添加碰撞组件，然后设置好碰撞组件参数。

参考通过编辑器实现 Spine 挂点的第 3、4 个步骤，将 frontFoot 节点挂载到 Sprite 节点的目标骨骼上（例如脚上），frontFoot 节点便会随着骨骼动画一起运动，从而碰撞组件的包围盒也会实时地与骨骼动画保持同步。
在 层级管理器 中选中 Ground 节点，在 属性检查器 中点击 添加组件 -> Physics2D -> Colliders -> BoxCollider2D 添加碰撞组件，然后设置好碰撞组件参数。
在 资源管理器 中新建一个 TypeScript 脚本并命名为 SpineCollider，然后将脚本挂载到地面节点 Ground 上。脚本代码如下：