图片

整个骨架是由附加在骨骼上的图片所组成的,在骨架中需要独立运动的部分,都应该在其骨骼的插槽上附加一张图片。另外需要注意,Spine不能制作原始图片,也不能能代替一些专业的图片处理软件,如PS、AI等。

如果图片是使用 Photoshop 或 Gimp 分层设计的,可以用一个 脚本将这些已组装好的图片导入 Spine,从而节省大量时间。否则,就需要在Spine中手动组装图片。

装配骨架的第一步是将每张图片以 区域附件(附在骨骼上的简单矩形图片)形式导入。详见区域附件

Spine 需要获知骨架图片位置才能创建区域附件。

图片节点

层级树中的图片节点可以设置骨架图片的文件夹路径。图片路径可以是相对路径,也可以是绝对路径。相对路径就是,如Spine工程的文件夹名字叫做spineboy,图片所保存的文件夹名是images,而images文件夹在spineboy文件夹下,那么可以用./images来表示相对路径,绝对路径就是把这个文件夹的全部路径表示出来,如c:\spineboy\images,就叫做绝对路径。可点击游览按键指定路径,也可输入路径并按回车。设定路径后,该文件夹中的图片就会出现在图片节点下。Spine会实时更新文件夹中的内容。

将图片从层级树拖到编辑区,Spine 会在根骨骼下为每张图片创建一个同名插槽和一个同名区域附件。可用 shiftctrl(Mac 上则为 cmd)在层级树中选择多张图片,同时拖曳到编辑区。也可以直接将图片拖到骨骼或层级树的插槽。

要创建区域附件,可以选中图片然后按 P 或点击层级树下方图片属性的 设置父级 按钮。进入 设置父级 模式后,就可以点击编辑区的骨骼或者层级树的骨骼或插槽。对于拥有多个骨骼的骨架,最简单的方法一般是在编辑区—,而非在层级树选择骨骼。

图片 节点下的图片如果未被任何附件使用,会显示红色图标,否则显示绿色图标。

创建完所有区域附件后,就可以使用 缩放旋转移动 等工具在SETUP模式下将区域附件进行组装。接着,可以使用 创建 工具来创建骨骼,将附件移至骨骼。下一节将详细阐述这些工具的用法。

图片文件查找

Spine 会通过 图片节点下指定的路径和附件名称去匹配附件所需的图片。附件名称不需要包含文件扩展名。Spine 会查找 .png.jpg.jpeg文件。比如,对于 ./images/图片路径和名为 head 的附件,Spine 将查找 ./images/head.png./images/head.jpg./images/head.jpeg。注意,有些操作系统区分大小写。

附件名称可包含子文件夹。比如,对于 ./images/ 图片路径和名为 red/head 的附件,Spine 将查找 ./images/red/head.png

如果附件设置过 路径,就可以不通过附件名而用路径来查找图片。位于同个插槽的附件名称不能重复,但路径可以相同。

绘制顺序

绘制附件的顺序定义于层级树中的 绘制顺序 节点。位于绘制顺序表高位的插槽会放在低位插槽之上。可以通过上下拖动插槽来改变绘制顺序。此外,键盘上的加(+)键或减(-)键也可以改变选定图片的绘制顺序。按住 shift 键可一次移动 5 个物体。

层级树筛选

调整绘制顺序最简单的方法就是使用层级树视图左上角的筛选按钮来隐藏骨骼和附件,令 插槽 节点下方的层级树只显示插槽。这些插槽也代表绘制顺序,可以上下拖动。

一般来说,选定了编辑区的附件,也就选定了层级树中对应的附件。对层级树进行过滤时,不会包含附件,而是会选定层级树的插槽,因此直接显示附件所处的绘制顺序。

脚本

使用 Spine 之外的图片编辑程序来创建骨架图片时,图片很可能是分层创建的,并且骨架的装配也是正确的。要导出图片并逐一重新配置到 Spine 会比较没有效率,也没有乐趣。为了节省时间,Spine 针对多种图片编辑程序推出了相应脚本,以导出图片和坐标数据。因此,在装配骨架时可以将此类数据导入到 Spine,从而大大节省时间。

用户可以在 Spine 安装文件夹的 scripts 子文件夹中找到脚本。您也可点击此处找到这些脚本的最新版本。

Photoshop

构成骨架的图片在 Photoshop PSD 或 Gimp 文件中是分层存在的。脚本运行时,会将每一层作为独立图片文件导出,以 Spine 格式创建 JSON 文件。用户可依次点击左上角的Spine 徽标、 导入数据导入该 JSON 文件。导入的骨架会有一个骨骼,附于骨骼上的所有 Photoshop 图片会使用与在 Photoshop 相同的位置和绘制顺序。用户需要做的,就是用 创建工具创建骨骼,该过程将在下一节进行阐述。

脚本设置:

  • 图层作为 PNG 写入 (Write Layers as PNGs) 分别为各个图层创建图片文件。
  • 写入模板图片 (Write a template PNG) 创建一张包含组装骨架图像的图片,以作为模板使用。
  • 写入 Spine JSON (Write Spine JOSN) 创建可导入 Spine 的 JSON 文件。
  • 忽略隐藏图层 (Ignore hidden layers) 忽略隐藏分组和图层。
  • 将分组用作皮肤 (Use ignore as skins) 为各个分组创建皮肤,在其子文件夹中创建皮肤图片。
  • 将用户标尺坐标设为 0,0 (Use ruler origin as 0,0) 导入 Spine 时,Photoshop 标尺坐标将匹配 0,0 世界坐标。
  • PNG 缩放 (PNG scale) 写入图片文件前先缩放图层。在 Photoshop 处理高分辨率作品时用这招,会比在 Spine 更有效。
  • 填充 (Padding) 每张图片周围的像素。这样可以防止图片边缘的不透明像素形成混叠伪像。
  • 图片输出目录 (Images) 写入图片文件的文件夹。
  • JSON 输出目录 (JSON) 写入 JSON 文件的文件夹。应与包含 Spine 项目的文件夹为同一个,否则骨架图片路径可能需要调整。

Spine 论坛发布了若干可选 Photoshop 脚本(例子)。

Illustrator

Illustrator 脚本与 Photoshop 脚本相似,不过功能略少。如有需要,在 Illustrator 中可点击 文件导出PSD,然后用 Photoshop 打开导出的 PSD,运行上述 Photoshop 脚本。

Gimp

Gimp 脚本既可写入图层 PNG,也可写入 JSON 文件。如有需要,也可以导出到 Photoshop,然后使用上述Photoshop 脚本。

After Effects

After Effects 脚本将 After Effects 动画数据导出为 Spine 的 JSON 格式。Spine 不支持的某些功能无法导出,如扭曲或辉光效果。

Inkscape

Inkscape 脚本既可导出图层,也可导出 JSON 文件。

视频

在YouTube 上觀看「图片」。

下一节: 工具 上一节: 基本概念