mirror of
https://github.com/smallmain/cocos-enhance-kit.git
synced 2025-06-02 05:14:03 +00:00
84 lines
2.5 KiB
Markdown
84 lines
2.5 KiB
Markdown
---
|
||
sidebar_position: 2
|
||
description: "随心所欲地控制动态合图的使用。"
|
||
---
|
||
|
||
# SpriteFrame 换装
|
||
|
||
引擎提供了一个替换插槽的 attachment 对象进行换装的方法，可以在 [Spine 组件参考](https://docs.cocos.com/creator/2.4/manual/zh/components/spine.html) 官方文档进行了解。
|
||
|
||
但是这种方法比较绕，并且 Spine 动画中有切换 attachment 的关键帧时会导致失效。
|
||
|
||
而 attachment 对象都持有着一个 region 对象，region 对象有点类似引擎的 SpriteFrame，所以我们可以通过更换 region 对象来进行换装。
|
||
|
||
---
|
||
## Region 与 SpriteFrame 互转
|
||
|
||
首先服务包提供了 Region 与 SpriteFrame 对象相互转换的接口。
|
||
|
||
SpriteFrame 转为 Region：
|
||
|
||
```js
|
||
const region = sp.SkeletonData.createRegion(spriteFrame);
|
||
```
|
||
|
||
Region 转为 SpriteFrame：
|
||
|
||
```js
|
||
const spriteFrame = sp.SkeletonData.createSpriteFrame(region);
|
||
```
|
||
|
||
:::caution 注意
|
||
|
||
Spine 的 Region 支持 `0`、`90`、`180`、`270` 四种旋转角度，而 Cocos Creator 的 SpriteFrame 只支持 `0` 与 `270` 两种旋转角度，所以如果是 Region 转为 SpriteFrame 则可能导致方向不同的问题，**要进行换装的话使用的是 SpriteFrame 转为 Region，所以不用担心这个问题。**
|
||
|
||
:::
|
||
|
||
---
|
||
## 替换 Region 对象
|
||
|
||
使用上面的接口将 SpriteFrame 转为 Region 后，就可以调用服务包提供的设置 Region 接口来进行换装了。
|
||
|
||
这个接口在 Spine 组件上：
|
||
|
||
```js
|
||
spine.setRegion(slotName, attachmentName, region);
|
||
```
|
||
|
||
还有一个获取 Region 对象的接口：
|
||
|
||
```js
|
||
a.getRegion(slotName, attachmentName);
|
||
```
|
||
|
||
将转换与设置的代码结合，你就可以使用一行代码进行换装了。
|
||
|
||
```
|
||
spine.setRegion('head', 'head', sp.SkeletonData.createRegion(spriteFrame));
|
||
```
|
||
|
||
效果就像这样：
|
||
|
||
|
||
|
||
---
|
||
## 注意事项
|
||
|
||
|
||
### 多实例问题
|
||
|
||
替换 Region 对象实际上是在 Spine 组件所使用的 SkeletonData 上进行替换的，所以所有使用这个 SkeletonData 进行渲染的组件都会被替换。
|
||
|
||
如果你只想替换其中一个组件的显示，那么就可以让所有组件都使用不同的 SkeletonData 进行渲染。
|
||
|
||
服务包提供了一个克隆接口来实现这个需求，你可以使用：
|
||
|
||
```js
|
||
const clonedSkeletonData = skeletonData.clone();
|
||
```
|
||
|
||
克隆 SkeletonData，然后再进行换装，赋值给 Spine 组件。
|
||
|
||
---
|
||
以上所有用法你可以在 [演示项目](https://smallmain.github.io/cocos-service-pack/demo/web-desktop/index.html) 中找到示范代码。
|