# 图片

<callout>Spine只能使用一张张的图片文件来工作。如果你的图片在纹理图集中，可以将其[解压](/spine-texture-packer#纹理解包器)。</callout>

骨架可以有引用图片文件的附件。Spine不是一个图片编辑器，所以你需要使用偏好的图片编辑软件来为骨骼创建图片。骨架每个可独立移动的部分都需要是一个单独的图片文件。

如果你的图片在Photoshop、Affinity Designer或其它图片编辑器中位于不同的图层上，则使用[脚本](#脚本)将其放入Spine中的正确位置可以节省大量时间。否则，需要在Spine中手动放置每张图片。

设置骨骼的第一步是将每个图片作为[区域附件](/spine-regions)引入，这是一个附加到骨骼上的简单矩形图片。但是，在创建区域附件之前，Spine需要知道在哪里可以找到骨骼的图片文件。

# 图片路径

层级树中的`图片`节点有一个文件夹路径，Spine将在其中查找骨架的PNG和JPEG图片文件。图片路径可以是项目文件保存位置的相对路径，也可以是绝对路径。你可以使用`浏览`按钮指定路径，也可以输入路径，然后按`Enter`键。

一旦设置了路径，该文件夹中的图片文件就会出现在`图片`节点下。Spine会监视该图片文件夹，并会立即加载图片文件的任何更改。

![](/img/spine-user-guide/images/path.png)

默认情况下，只显示在图片文件夹中找到的前2,000个图片文件。这可以防止在意外指定错误路径时Spine扫描数百万个文件。取消选中`限制扫描`可允许Spine查找超过2,000个图片文件。

## 创建区域附件

在将`图片`节点下的图片文件拖入视口时，Spine会在该图片的根骨骼下创建一个插槽和一个区域附件。可以使用`shift`或`ctrl`(Mac上为`cmd`)在层级树中选择多张图片，一起拖动到视口中。

![](/img/spine-user-guide/images/slots.png)

还可以将图片拖动到层级树中的骨骼、插槽或附件。如果拖动到骨骼或插槽，则新区域附件会在骨骼上居中。如果拖动到附件，则该附件的变换将应用于新区域附件。

也可以通过按`P`或单击图片层级树属性中的`设置父级`按钮，然后选择视口中的骨骼或者层级树中的骨骼或插槽来创建区域附件。当骨架有许多骨骼时，在视口中选择骨骼通常最容易。

![](/img/spine-user-guide/images/set-parent.png)

如果没有被任何附件使用，`图片`节点下的每个图片文件都会有一个橙色图标，如果至少被一个附件使用，则显示一个绿色图标。

![](/img/spine-user-guide/images/used.png)

<callout>虽然可以手动放置区域附件，但使用[脚本](#脚本)将其放入Spine中所需的位置可节省大量时间。</callout>

在创建区域附件之后，可以使用`旋转`、`平移`和`缩放`工具将它们组合成“设置姿势”，即制作骨架动画之前的姿势。接下来，可以使用`创建`工具创建骨骼并将附件移动到骨骼。这些工具的使用将在[下一节](/spine-tools)中进行介绍。

## 查找图片文件

Spine通过查找`图片`节点下指定的路径并附加附件名称来查找附件的图片文件。附件名称不需要包含文件扩展名。Spine将查找文件扩展名为`.png`、`.jpg`或`.jpeg`的文件，但PNG文件最为常见。

例如，图片路径为`./images/`，附件名称为`head`，Spine将查找`./Image/head.png`、`./Image/head.jpg`和`./Image/head.jpeg`。请注意，某些操作系统区分大小写。

附件名称可以包含子文件夹。例如，图片路径为`./images/`，附件名称为`red/head`，Spine会查找`./image/red/head.png`。

如果附件设置了`路径`，则使用路径而不是附件名称来查找图片文件。同一插槽下的两个附件不能有相同的名称，但它们可以有相同的路径。

# 脚本

使用Spine外部图片编辑器创建骨架图片时，图片通常是分层创建的，并针对骨架的设置姿势设置了正确的位置。导出图片后在Spine中逐个重新复位会很繁琐。为了节省时间，我们为各种图片编辑器提供了脚本可导出图片和JSON数据文件。然后可以将该数据文件[导入](/spine-import)到Spine中，以便在设置骨架时节省大量时间：只需导入数据，创建骨骼，即可完成装配。

最新版本的脚本总是可以在GitHub上的[spine-scripts](https://github.com/EsotericSoftware/spine-scripts)上找到。有些图片编辑器不需要脚本，因为它们内置了Spine导出支持，如[Affinity Designer](https://affinity.serif.com/)。

我们提供了适用于[Adobe Photoshop](https://github.com/EsotericSoftware/spine-scripts/tree/master/photoshop)、[Adobe Illustrator](https://github.com/EsotericSoftware/spine-scripts/tree/master/illustrator)、[InkScape](https://github.com/EsotericSoftware/spine-scripts/tree/master/inkscape)、[GIMP](https://github.com/EsotericSoftware/spine-scripts/tree/master/gimp)及[Adobe After Effects](https://github.com/EsotericSoftware/spine-scripts/tree/master/aftereffects)的脚本。目前，Photoshop脚本是最复杂的，并且提供了最多的功能，例如在图层名称中添加标签来配置骨骼、插槽和皮肤。

# 视频

[Bilibili](https://www.bilibili.com/video/BV1Li4y1c7rL/)
<iframe src="//player.bilibili.com/player.html?bvid=BV1Li4y1c7rL&autoplay=0" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>!!

[youtube:WRki3xKS1hM&list=PLwGl7Ikd_6GRFo7d0uRu_fN2RIlvkxW7b]

[Bilibili](https://www.bilibili.com/video/BV1Ey4y1H7PZ/)
<iframe src="//player.bilibili.com/player.html?bvid=BV1Ey4y1H7PZ&autoplay=0" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>!!

[youtube:p7yZET00GeE]

[下一节: 工具](/spine-tools)
[上一节: 插槽](/spine-slots)
[Spine用户指南: 目录]