SpriteFrame 换装

引擎提供了一个替换插槽的 attachment 对象进行换装的方法，可以在 Spine 组件参考 官方文档进行了解。

但是使用替换插槽的 attachment 对象这种方法比较绕，并且 Spine 动画中有切换 attachment 的关键帧时这种方法就没用了。

而 attachment 对象持有一个 region 对象，这个对象类似引擎的 SpriteFrame，所以我们可以通过修改 region 对象的数据来进行换装。

---

认识 RegionData

请勿混淆 RegionData 与 region，RegionData 主要作为 SpriteFrame 和 region 对象之间的桥梁，实现两者的相互转换。

将 SpriteFrame 转换为 RegionData：

const regionData = new sp.RegionData(spriteFrame);

将 RegionData 转换为 SpriteFrame：

const spriteFrame = regionData.toSpriteFrame();

将 attachment 对象的 region 数据转换为 RegionData ：

const regionData = new sp.RegionData(attachment);

将 RegionData 数据更新到 attachment 对象上：

regionData.assignToAttachment(attachment);

注意

Spine 的 Region 支持 0、90、180、270 四种旋转角度，而 Cocos Creator 的 SpriteFrame 只支持 0 与 270 两种旋转角度，所以如果是 RegionData 转为 SpriteFrame 则可能导致方向不同的问题。

要进行换装的话使用的是 SpriteFrame 转为 RegionData，所以不用担心这个问题。

---

使用 SpriteFrame 修改 Region 数据

虽然使用上面的 RegionData 即可实现使用 SpriteFrame 换装的需求，但我们还在 Spine 组件上提供了两个更方便的接口：

只使用 regionData.assignToAttachment(attachment) 只会修改 SkeletonData 的数据，但不会触发 Spine 组件的渲染更新。

推荐直接使用：

skeletonComponent.setRegionData('Head', 'Head', new sp.RegionData(spriteFrame));

在修改的同时刷新组件的渲染实现换装，并且不会打断当前正在播放的动画。

还提供了一个通过 attachment 名称获取 RegionData 的接口：

a.getRegion(slotName, attachmentName);

---

注意事项

多实例问题

由于是直接修改 Spine 组件所使用 SkeletonData 的 attachment 数据，所以所有 Spine 组件都会受到影响。

如果你只想替换其中一个组件，那么就可以克隆这个 SkeletonData 让每个组件都使用不同的 SkeletonData 实例进行渲染。

社区版提供了一个克隆数据的接口来实现这个需求：

const clonedSkeletonData = skeletonData.clone();

使用以上代码克隆 SkeletonData 后再进行换装，赋值给 Spine 组件，那么替换操作就只会对这个 Spine 组件生效。

---

以上所有用法你可以在演示项目中找到示范代码。