Spine(2D骨骼动画制作)

Spine 面向游戏与交互应用开发，专注于 2D 骨骼动画制作。软件提供完整的骨骼动画编辑能力，涵盖皮肤切换、自由变形、蒙皮绑定、网格权重绘制与 IK 约束，能够呈现肌肉起伏、衣物飘动一类复杂动态，使角色动作更细腻自然。在纹理利用方面，用户可在矩形边界内自定义多边形，提升贴图空间的使用效率；通过移动网格点，还能做出拉伸、挤压、弯曲、反弹等变形效果，突破矩形图片的局限。

Spine使用技巧

单帧全选（关键帧）：点击第一行（即动作名称所在行）上的关键帧图标，该帧上的全部关键帧便会被选中。同样的道理，选中任意一个父级对象后，它下面各属性中的关键帧也会一并被选中，骨骼就是一个例子。

多帧框选（关键帧）：这一行同样支持框选操作，框选之后场景内的全部关键帧便会一并被选中。

3.关键帧颜色含义：不同颜色对应不同属性；若某父级下多个属性均创建了关键帧，标记显示为白色。

按住Ctrl键再拖动鼠标，就能把需要的关键帧一起框选出来。这样做的好处在于：当鼠标指针正好落在某个关键帧上时，直接按下去容易变成单独点选，而配合Ctrl拖拽则可以避开这个麻烦。举个例子，从第0帧开始向右拉出选框，类似的情形想必不少人都遇到过、也为此头疼过。

5.想让关键帧挪到半帧的位置，可以按住Shift键再拖动它，不过这种操作尽量少用。

6.整体平移（关键帧）：需要整体挪动右侧全部关键帧时，可先按住Alt键，再拖动任意一个关键帧，所有关键帧便会一起移动。

7.复制关键帧：先按住 Ctrl + Shift 并在目标关键帧上点击鼠标左键，接着松开 Ctrl + Shift 但保持左键不松手，再把指针拖到需要放置的位置。

8.复制曲线：在功能区查看说明，即可找到匹配曲线。

9.循环播放快捷键为【Ctrl + R】，按下即可开启或关闭该功能

使用快捷键 Ctrl + R 可以在开启和关闭循环播放之间切换。

单帧全选（关键帧）：点一下第一行（即动作名称所在行）的关键帧图标，该帧上的所有关键帧便会被选中。同样地，选中任意一个父级对象后，其下属属性的关键帧也会一并被选中，骨骼就是这样的例子。

12.多帧框选（关键帧）：这一行同样支持框选操作，框选之后场景内的全部关键帧便会一并被选中。

关键帧颜色：标记色彩与所关联的属性相对应，若显示为白色，则说明该父级层级下有多个属性均已建立关键帧。

按住Ctrl键再拖拽鼠标，就能把需要的关键帧框选起来。这个设计解决了一个挺常见的小麻烦：当鼠标位置正好落在某个关键帧上时，直接按下左键往往会变成点选单个关键帧，而没法拉出选框。从第0帧开始往右框选的情形，想必不少人都遇到过这种尴尬。

15.非整数帧的移动方式：拖拽关键帧时配合按住Shift键，便能以半帧为单位进行调整。（建议尽量少用）

16.整体平移（关键帧）：拖拽关键帧时按下 Alt 键，右侧全部关键帧便会同步移动。

17.复制关键帧：将鼠标指针移到需要复制的关键帧上，按住 Ctrl+Shift 的同时点击鼠标左键，随后松开 Ctrl+Shift 但保持左键不松开，把该关键帧拖到目标位置即可。

复制曲线：可在功能区中查阅说明，并据此匹配曲线。

更新日志

v4.3.23版本

调整滑块动画期间，骨骼的修改操作不应被拦截。

滑块未启用时，框架文字处于隐藏状态。

切换到权重工具后，若网格已处于选中状态，则不再还原此前选定的内容。

当负重超过百分之百，骨骼便进入锁定状态。

修复了将关键点粘贴到已转移至其他骨骼的槽位时出现的问题。

修复了在删除文件夹过程中出现的崩溃现象。

常见问题解答

1、如何用最省事的办法给角色加上脊柱？

虽然图像也能导入Spine后手动摆放，但更高效的做法是借助脚本自动完成这一过程。其中Photoshop脚本最为普遍，Gimp、Illustrator等工具同样提供了相应的脚本支持。

2、能否把 Spine 中的数据导出到别的程序里使用？

可以。Spine 支持将数据导出为自身定义的 JSON 或二进制格式，当其他程序需要读取这些数据时，您可以把 Spine 数据从上述任一格式转换成对方能够识别的形式。

3、能否把其他程序里的数据导入到脊柱中？

Spine 支持以 JSON 和二进制两种格式输出数据，输出的格式与其自身导出的格式保持一致。若要将其他程序中的数据用于 Spine，需要先将其转换为这两种格式中的任意一种。

4、能否让多名成员同时参与同一个 Spine 项目文件的协作？

可以。不过存在一些限制：动画可以从一个项目导入到另一个项目，但前提是动画师在制作过程中必须始终停留在动画模式内，不能新建骨骼、插槽或其他骨架信息，否则导入会失败。具体做法是先把项目复制一份交给动画师，由他们在副本上制作新动画，完成后再将这些动画导回项目的主副本。

5、导出的 GIF 播放速度为何与 Spine 中不一致？

GIF 的播放依赖帧与帧之间的延迟设定，可多数浏览器对低于 0.02 秒的延迟并不支持，并且延迟时间最好取 1/100 秒的整数倍。想要最流畅的播放效果，可将帧率设为 50 FPS（即 0.02 秒）；若做不到，也可以依次尝试 33（约 0.03 秒）、25（0.04 秒）、20（0.05 秒）、17（约 0.06 秒）、14（约 0.07 秒）、11（约 0.09 秒）或 10（0.1 秒）。

软件特点

角色移动、奔跑与攻击等行为构成游戏动作系统的核心内容，其实现方式通常有两种选择：帧动画或骨骼动画。

帧动画的做法，是把角色在某个姿态下的样子逐帧拍成一张张画面，播放时连贯起来形成动作，画面顺不顺、滑不滑，全看帧数够不够多。骨骼动画走的是另一条路：先把角色各个身体部位的图片分别绑到一根根相互连接、彼此带动的“骨头”上，再靠调整这些骨骼的位置、旋转角度和缩放比例，让动画动起来。

骨骼动画对处理器性能的要求高于传统逐帧动画，不过它带来的好处也更多，例如：

1、更少的美术资源

骨骼动画用到的素材是拆分开的角色各部位，像头部、手部、胳膊、腰部这些分别做成独立小块，美术人员不再需要逐帧交出完整画面。素材体积因此明显减小，省下来的人力与物力可以更多放到游戏开发本身。

2、更小的体积

帧动画得把每一帧画面都备齐，骨骼动画则不同，它仅需少量图片素材，动画数据会存进一个 json 文件（后面会讲到），占用的空间非常小，还能让游戏拥有别具一格的动画表现。

3、更好的流畅性

骨骼动画通过插值算法推算出关键帧之间的过渡画面，因此动画播放时能够始终维持顺滑自然的观感。

4、装备附件

角色动画通过将图片附着到骨骼上完成驱动。若有需要，还能便捷地替换角色装备以适配不同场景，甚至调整角色外貌，从而让同一套动画素材得到重复利用。

5、不同动画可混合使用

在Spine里，多套骨骼动画能够叠加使用——以角色为例，它可以一边行走，一边完成转头与射击动作。

6、程序动画

Spine 支持以编程方式驱动骨骼动画，开发者可借助代码让角色做出跟随鼠标方向射击、目光锁定敌人，以及在上坡时身体自然前倾等动态表现。

功能介绍

1、摄影表

动画制作里，摄影表承担着最关键的角色。动画的创建、时间轴的精细调整，都依赖它来完成，其中记录着各项重要细节。

2、曲线编辑器

在曲线编辑器里，对贝赛尔曲线加以调节，能够把控相邻两帧之间的差值，从而做出逼真生动的动画效果。

3、反向动力学工具

姿势工具可借助反向动力学，让姿势调整变得更加顺手。

4、皮肤

皮肤功能支持为已完成的动画替换图片素材，只需更改绑定在骨骼上的图片，就能让同一段动画复用到不同形象上。

5、边界框

骨骼可挂载边界框，框体随骨骼一同位移。这类边界框主要服务于碰撞检测与物理系统的接入。

6、网格

支持在矩形范围内自行划定多边形区域，多边形之外的像素会被直接跳过，从而让最终纹理贴图集更充分地利用可用空间；对移动设备而言，这项优化尤为关键。网格还具备自由变形与蒙皮能力。

7、自由变形

自由变形（Free-Form Deformation，简称FFD）的核心在于通过拖动网格上的控制点来改变图像形态。借助这一方式，原本平直的矩形图片可以获得拉伸、挤压、弯曲、反弹等效果，这些形变是常规矩形图片难以做到的。

8、蒙皮

蒙皮的作用是把网格里选定的点绑定到特定骨骼上。绑定完成后，这些点会跟随骨骼一起运动，网格也就相应地产生形变。借助骨骼动画来驱动角色图像，就能实现弯曲变形的效果了。

9、输出格式

Spine 支持将项目动画输出成 JSON 或二进制文件，这些文件在 Spine 运行时库中能够完整还原动画效果。GIF 动画、PNG 与 JPG 序列图，以及 AVI 或 QuickTime 格式的视频文件，也都在可导出范围之内。

10、导入

Spine 支持从外部工具生成的数据文件中查找并导入内容，可识别 JSON 与二进制两种符合规范的格式。用户还能将其他 Spine 项目里的骨架与动画直接引入当前工程。

11、纹理打包

Spine 具备将图片整合为纹理贴图集的能力，借此可提升游戏运行时的渲染效率。该纹理贴图打包工具提供了剥离空白区域、旋转、自动缩放等多项功能，核心目标在于让空间得到充分运用。

Spine功能区翻译

PS：界面内容全部为英文，下面把主界面上各项功能对应的含义逐条做个简要说明。

一、装配模式功能区

主菜单：点开此处会唤出 Spine 的主菜单。按照地球人的常规做法，打开、保存、新建、导出、导入、系统设置这类功能通常都集中放在这里。

2.项目名称：此处显示当前项目的文件名

3.当前模式：【ctrl + tab】用于在Spine的装配模式与动画模式之间进行切换

层级树窗口按钮：按下【ctrl + T】即可打开或收起层级窗口，窗口大小可通过拖拽来调整。

层级树窗口：这个窗口用树形结构呈现大纲目录，项目里的全部对象都集中在此，功能上类似于Windows资源管理器左侧的导航窗格。

功能面板位于层级窗口的下方，是一个会随当前选中对象而动态调整的扩展区域，作用上接近 Photoshop 顶部的选项栏。针对节点的新建、删除、复制、重命名、层级调整以及属性修改等大部分操作，都集中在这个面板中完成。不妨分别选中不同类型的节点，观察它随之呈现的变化。

试用标识：该提示仅出现在试用版本中，作用就是标明当前使用的是试用版。看到这一提示后，就不必再询问为何无法导出或保存之类的问题了。

当前对象：显示当前所选对象的名称；若同时选中多个对象，则仅显示所选数量。

9.视图缩放控制：使用【ctrl + F、ctrl + shift + F、ctrl + shift + alt + F】这几组快捷键，可以对场景中的对象进行放大或缩小，便于更好地展示画面。那几个图标不妨逐个点击试试，观察各自的效果。

工具：该面板名为“工具”，自上而下依次为 IK【B】、权重【G】、创建骨骼【N】。需要留意的是，这里的 Pose 与右侧层级目录中的 Constraints 并非同一回事——在其他软件里，这两项通常合并为 IK 一个功能，而此处将其拆分成了两部分。

变换工具：该区域集中了旋转、位移与缩放三项操作，右侧的小钥匙图标即为K帧按钮。颜色含义如下：绿色代表数值未发生变动，黄色说明数值已被修改但尚未生成关键帧，红色则意味着数值已改变且关键帧已经建立。

坐标系分为当前、父级与世界三种模式。这部分内容属于基础概念，此处不再展开说明，若有不清楚的地方可自行搜索了解。

抵消变换：当父对象发生旋转、位移或缩放时，借助该功能可让子对象保持原有位置与状态不变。

选项：此处提供了一组控制开关，分别用于骨骼、图片与边界框，可独立设置各自是否可选中以及是否显示。

二、动画模式功能区

摄影表（时间轴）：按住Dopesheet按钮再配合Ctrl+D拖拽，就能调整这个窗口的尺寸。动画师日常操作的核心区域就在这里，全部关键帧数据都集中呈现于其中。摄影表同样以层级方式来组织数据：当没有选中任何对象时，它默认展示整个角色的关键帧信息，首行对应当前动作的名称，也就是层级树（Tree）>动画节点（Animations）里当前所显示的那个动作（小眼睛那一列控制显示开关）。

当前帧：输入数字后即可跳转至对应位置。

3.循环起点设定：将当前帧点选为起始帧，再点一次即可取消。该功能仅在循环已开启且已设定结束帧的情况下生效。

4.循环结束点：把当前帧设为结束帧，只需点击一次；再点一下即可取消。该功能仅在循环已开启且起始点已设定的情况下生效。

5.自动关键帧：此功能含义不言自明，不再赘述。

6.幻影：这实际上相当于FLASH中的洋葱皮功能，即便之前没接触过FLASH也无妨，搜索一下便能了解。该功能仅用于辅助查看动画调整时的预览效果，无法输出成最终文件。

7.播放控制

层级收放：对摄影表内的分层对象进行折叠与展开操作。

锁定显示：可对摄影中显示的对象执行锁定操作；之后即使改选其他对象，摄影表中的显示内容仍保持不变。

10.刷新摄影表：当摄影表处于锁定状态时，使用该功能可让摄影表更新为当前所选对象的显示内容。

选取摄影表对象：当摄影表处于锁定状态时，借助该操作能迅速选中摄影表内呈现的对象。

复制、剪切、删除与粘贴：这些基础操作就不再赘述了。

13.整体平移关键帧：这一功能对应的是按住Alt键拖动关键帧的操作方式。

在多帧上同步调整对象：例如让角色在所有帧中统一向前位移N个单位。

翻转动画：当框选关键帧进行缩放并越过另一侧边界时，画面会出现翻转效果。（这一行为似乎本就默认生效，无论是否开启该选项，表现都一致。）

16.播放按钮：全球通行的那套图标，无需多言。

17.循环播放控制：按下【Ctrl + R】即可切换循环播放的开启与关闭状态。

曲线编辑器：按理说这里本该是动画师最核心的操作区域，但在Spine里它并没有占据这样的地位，功能上仅能呈现两帧之间的过渡效果。

过渡方式：提供线性、贝塞尔与步进式三种选择。

20.匹配曲线：这个功能用来把一条曲线复制到其他帧上。操作时先选定作为来源的那一帧，再挑出想要同步的一个或多个目标帧；此时源帧曲线显示为亮色，目标帧曲线则是灰色。接着点击贝塞尔手柄，目标帧便会自动套用相同的曲线形状，鼠标移到手柄附近时会有响应提示。换个角度理解：若未启用此功能，调整曲线只会作用于最先选中的那一帧；启用之后，所有被选中的帧都会一起受到影响。

三、层级树窗口功能区

显示过滤开关：涵盖骨骼、资源夹（Slot）以及附件（attachments）三类对象，开启对应选项即呈现相应内容，关闭后则不再显示。

选择即定位：在场景里点选某个对象后，层级树会随之自动跳转并把它展示出来。

3.文本替换

层级树主体由三列构成：首列用于显示开关状态，第二列为关键帧按钮（仅在动画模式下出现），第三列则呈现层级节点。

5.节点介绍：

a) 角色骨架：采用顶级小人图标呈现。同一项目支持建立多个角色骨架，每个骨架之下包含若干主要类型子节点。角色骨架的创建入口与其它节点略有差异，需通过主菜单中的按钮来完成。

b) 骨骼：这里保存的是角色骨骼之间的层级结构关系。

c) 显示层级：它与骨骼层级并不是同一回事，图片之间谁前谁后的遮挡关系，正是在此处进行调节的。

d) 图片路径：该区域展示的是硬盘中的图片资源，Spine 仅通过路径来引用图片，并不会将文件导入项目之中，硬盘文件夹里的内容会原样呈现出来。

e) 皮肤：这项功能用于更换角色的外观表现，例如官方示例中哥布林形象以及男女形态的切换。皮肤与蒙皮属于两种不同的概念。角色可以建立多套皮肤方案，这些方案都会统一保存在该节点之下。

f) 动画：同一个角色能够建立多个动作，这些动作均被保存于该节点之中。

g) 事件：它的用途主要是在程序运行过程中向程序传递参数。做法是先建立一个事件对象节点，再根据程序的需要，在指定的帧上把对应的参数打上关键帧。看到“事件”这个词不必觉得难以理解——在编辑器里完全可以把它当作一根骨骼来看待，Integer、Float、String 这三个属性跟旋转、位置、缩放本质上没有区别，照平常的习惯，按需要在相应时间点打帧就可以了。

h) 约束功能：可对IK进行锁定，从而做出踩踏关键帧的效果，这也就是角色动画里通常所说的“定脚”。

6.节点名称：即该节点的称呼。右侧三个按钮依次用于复制、重命名和删除操作。

骨骼长度：当骨骼长度设为零时，界面上会呈现一个十字形图标。这仅仅是显示效果上的差异，该骨骼与其他骨骼在功能上并无区别。

继承变换：子物体默认会跟随父级的变换属性。缩放与旋转是否要一并继承，可根据实际需要勾选或取消。

骨骼配色：染上颜色之后，辨认起来确实方便不少。

创建功能：支持在骨骼层级下新建骨骼、资源夹（Slot）、皮肤占位符（Skin Placeholder）以及边界框（Bounding Box）。图片的添加方式是从图片（Images）面板直接拖拽进来，这一点前面已经说明过了，就不再多作解释。

设置父级：【P】。先选中对象，按下 P 键，然后点选想要作为父级的目标，所选对象便会自动归入该目标之下成为其子级。在层级树中用鼠标直接拖拽同样可以完成这一操作，而且更为顺手。

激活边界：点击该选项后，它会形成一个边界框，能够用于碰撞检测。

图片路径的确定方式：Spine 本身并不存储图片，它只是对硬盘上图片文件的引用。那么这个引用路径是怎么计算出来的？由三部分拼接而成——项目所在目录、Images 的 Path 属性值、以及图片自身的路径，三者合在一起就是最终用于显示的完整图片路径。遇到图片显示异常时，可以把这三段依次拼合，检查指向的位置是否准确。

启用网格：选中此项后，图片即转换为网格对象。

启用“参考背影”后，该图片即转为参考图，在场景中无法被选中，仅在编辑动画期间可见，并且不会被写入最终输出的动画数据。

颜色叠加：可对颜色进行叠加处理并调节透明度。该设置仅在装配模式下生效，动画播放过程中无法修改。若需制作颜色或透明度动画，请对资源夹（Slot）上的对应属性进行操作。

显示层级：图片之间的前后叠放顺序可在此处调节。用鼠标直接拖拽即可完成调整；也可以先选中图片，再通过小键盘上的【+ -】键来改变层级，配合 Shift 键还能做更多操作。选取图片时不必局限于层级树，在场景中直接点选同样有效，之后照样能用小键盘【+ -】调整。补充一点：动画模式下图片无法被选中，原因是图片本身不具备可动画的属性；不过只要找到网格就能选中它，因为网格带有可动画的属性。

图片文件夹：这里展示的是硬盘中的内容。实际硬盘路径由项目文件所在目录与 Path 值拼接而成。若修改 Path 后未见变化，可点击 Refresh 进行刷新。

皮肤功能：界面里仅设有一个创建入口，其余操作无需赘述。

20.动画：此处的可选项同样仅剩“创建”一项。

事件：此处同样仅支持新建操作。

约束条件：此处同样仅支持创建一个。