Spine 核心功能入门

核心功能入门

本文主旨是整理我在入手学习 spine 时的流程，以及对于基本功能的理解和常规 2D 动画实现的思路。
意在整理出一个简要的入门 spine 的流程，以及对于一些高阶功能的应用的思考。
本文基于 https://zh.esotericsoftware.com/ 官网教程进行思考与实践

导入

那一个 2D 动画必须是要基于 2D 图像的，所以一般流程是先在 ps 里进行人物或者场景的绘制。
然后将图像导出后导入到 spine 中，spine 对 ps 支持的很好，所以可以直接将 psd 文件导入到 spine 中，这里似乎要求图层不能重名
所以在绘制图像的时候，分层分块要注意，你想要独立进行运动的部分都需要单独给出一个图层。

基本导入- ps 生成 psd 文件导入

概念

骨架

一个项目可以有多个骨架，那其实每个独立完整的对象就对应一个骨架，比如你的人物1 对应一个骨架，人物2 对应另一个骨架，以此类推
每个骨架有唯一的 root 根节点，这个是一定有的，那后续的子集骨骼基于骨架进行创建和运动

骨骼

骨骼依附于骨架创建，那一般来说一个图片会对应一个骨骼，也就是说你人物的某个部分会对应一个骨骼，比如左手小臂图片会对应一个骨骼，而有些复杂的动画可能会一个图片对应多个骨骼，比如尾巴，这样骨骼动起来的时候图片就会变型。

那骨骼动画其实就是对这些骨骼设置关键帧引导其进行运动实现的，骨骼可以拥有子骨骼，子骨骼会随着父骨骼的运动而运动，这部分也可以单独设置不随父骨骼运动来实现一些其他动画效果。

对于一个长骨骼，我们可以通过拆分功能将其拆分为多个小的骨骼，那同时你也可以使用斐波那契拆分，这样可以快速做出递减的拆分，例如你想给一个尾巴的图片增加一串骨骼，那这是个好方法。

插槽

官网的狗屎一样的解释是这样说的：

插槽是骨骼的子级，骨骼是附件的容器，在任何给定时间只有一个附件(或没有附件)可见。插槽很重要的原因有很多，即使一开始人们可能很难重视它。插槽只是概念性的，它没有位置，也不会绘制。

反正我是看的云里雾里

简单来说：

插槽：可以看成一个口袋，专门用来放东西。
骨骼：是插槽的父母，可以动来动去，但本身不直接显示任何东西。
附件：是插槽里可以放的具体东西，比如图像、形状等。

在动画里，每个插槽一次只能放一个附件（或者什么都不放）。插槽本身不会显示出来，也没有具体的位置，只是用来决定哪一个附件应该显示在当前的骨骼上。

插槽的重要性在于，它让你可以很方便地更换显示的内容，而不需要重新设置位置、动画等。这样，你就可以用同一个骨骼结构实现很多不同的外观效果。

所以是这样 1 骨骼 -> 多个插槽 -> 每个插槽有多个附件，但是每个插槽一次只显示一个附件。

一个插槽可以对应多个附件，但在任何给定时间，只有一个附件可以显示。

举个例子来说明：

你有一个角色，它有一个手臂骨骼。
手臂骨骼上有一个插槽，叫“手持物插槽”。
这个“手持物插槽”可以放多个附件，比如一把剑、一把盾或者一个空手状态。
在动画播放时，你可以决定“手持物插槽”显示哪个附件，比如当前显示剑，下一帧显示盾。

这样，虽然插槽可以有多个附件，但每次只能显示一个附件。这种设计让你在动画中可以灵活地切换显示的物品。

可喜的是插槽可以修改绘制顺序，这样就可以改变对应附件的显示位置，并且绘制顺序可以创建关键帧

图片

正所谓无巧不成书（我在胡说些什么），图片即我们要制作动画的实际展示对象，是可视化的根本
你需要使用偏好的图片编辑软件如 Photoshop 来为骨骼创建图片。骨架每个可独立移动的部分都需要是一个单独的图片文件。
这里官方提到为一些常见的图片编辑器提供了脚本进行导出，以便获取图片分层和位置信息
我推荐使用 Photoshop ，在我尝试的版本中可以直接 psd 导入并且位置分层正确，无需再手动调整。

工具

认识一下工具 先说下有些同学可能懒得看这部分（比如我）但静下心来分几次认识了解一下对你的创作和使用会有很大帮助

最左侧区域为：姿势、权重、创建

姿势

姿势工具可以同时调整骨骼平移和旋转，无需切换工具即可实现快速骨骼操作。

权重

权重工具与权重视图结合使用，可以设置骨骼对网格顶点的影响。

创建

创建工具可创建新骨骼，只能在设置模式下完成。在创建新骨骼之前，首先选择将成为父骨骼的骨骼。接下来，单击可创建零长度骨骼，或拖动以创建骨骼并设置其长度。

变换工具

然后顺序介绍旁边的变换工具

旋转、移动、缩放、剪切

看名字都知道是干啥的了吧，实际效果可以在应用内尝试一下，这里聊一些细节。

根据选定骨骼会在后面空位展示出对应数值，可以通过在数字上滚动鼠标滚轮或上下拖动来更改该值。按住Shift同时使用鼠标滚轮或拖动可以较小的增量调整值。

轴

再后是轴选项，轴选项会影响变换，所以轴和对应变换会联动介绍，再使用的时候也应该考虑你是通过哪个轴进行变换的

旋转

旋转骨骼的轴心点始终是骨骼的原点。拖动时按住“Shift”可将旋转限制为15度增量。

轴的类型

本地（Local）
- 定义：本地轴是相对于骨骼的父项来说的。旋转是基于父项的方向。
- 使用场景：当你希望骨骼的旋转跟随父项的方向变化时使用。比如，一个角色的手臂骨骼旋转时，需要保持与身体骨骼的相对关系，这样可以保证手臂动作与身体动作协调一致。
- 例子：角色的前臂相对于上臂的旋转。
父级（Parent）
- 定义：选择父级轴并不会改变实际旋转的数值，它只是显示为本地旋转。实际效果和本地轴相同。
- 使用场景：这种选择更多是为了查看和调节方便。它帮助你在处理复杂的层级关系时更直观地看到每个骨骼的相对旋转。
- 例子：你需要调试一个多层次的骨骼动画，可以通过父级轴查看和调整每个子骨骼的旋转。
世界（World）
- 定义：世界轴是相对于整个世界坐标系的。0度向右，90度向上，180度向左，270度向下。它不受父项方向的影响。
- 使用场景：当你希望骨骼的旋转与整个场景的方向保持一致时使用。适用于需要固定在世界坐标中的骨骼，比如一些场景元素或独立物体的旋转。
- 例子：角色的头部总是朝向一个固定方向，无论身体怎么旋转，头部都始终保持与世界坐标系一致的方向。

什么时候用什么轴

本地（Local）：大部分情况下使用本地轴，因为它能保持骨骼和父项之间的相对关系。这在角色动画中尤为重要，可以保证动作的自然连贯。
父级（Parent）：当你需要查看或调整骨骼和父项的相对关系时，可以选择父级轴进行调试，但实际应用中效果和本地轴一样。
世界（World）：在特定情况下使用，比如你希望骨骼始终保持与世界方向一致，或者一些固定不动的场景元素需要独立于角色的动作。

对于骨骼，设置模式下的旋转限制为0-360度，指示骨骼的指向。在动画模式下，本地旋转可以超出该范围，指示旋转方向和骨骼将进行的完整旋转次数。但是，请注意，当选择世界轴时，即使在动画模式下，旋转也被限制为0-360度，因为它指示骨骼在世界坐标中的指向。在这种情况下，在键入旋转值时，世界轴按钮会亮显为橙色以示提醒。

平移

有些解释是有必要的，但是字数多了反而让人提不起阅读的欲望，这似乎是没办法的事，这里我啰嗦两句，实际使用中再体会轴的用处即可

当你使用平移工具拖动骨骼时，可以通过拖动工具上的X或Y控制柄，将移动限制在单个轴上。这意味着你可以让骨骼只在X轴或Y轴上移动，而不会在其他方向上移动。

轴的类型

本地（Local）
- 定义：使用项目自身的本地轴，数值表示从项目（骨骼）到它的父项的距离。X轴指向项目的旋转方向。
- 使用场景：当你希望骨骼沿着自己的旋转方向移动时使用。比如，你希望角色的手臂沿着它的自然方向（即它的本地X轴）移动。
父级（Parent）
- 定义：也是到父项的距离，但使用父项的本地轴。X轴指向父项的旋转方向。
- 使用场景：当你希望骨骼按照父项的方向移动时使用。比如，你希望角色的手臂沿着身体的方向（即父项的本地X轴）移动。
世界（World）
- 定义：数值表示从项目（骨骼）到世界原点的距离。
- 使用场景：当你希望骨骼在整个场景中的绝对位置移动时使用。比如，你希望角色的手臂向世界坐标系的某个方向移动。

具体应用

移动多个骨骼：
- 当你使用本地轴或父级轴来移动多个骨骼时，可以让这些骨骼朝着不同的方向移动相同的距离。这样做的一个例子是同时延长角色的双臂。使用本地轴或父级轴，可以确保每个手臂按照它的自然方向（或身体的方向）延长相同的距离，而不是按照世界坐标系的方向移动。

总结

本地轴（Local）：适用于骨骼沿自身旋转方向移动。
父级轴（Parent）：适用于骨骼按照父项的方向移动。
世界轴（World）：适用于骨骼在整个场景中的绝对位置移动。

缩放工具的使用

你可以拖动视口中缩放工具的X或Y控制柄，将缩放限制在单个轴上。这意味着你可以让骨骼只在X轴或Y轴上缩放，而不会在其他方向上缩放。

轴的类型

本地（Local）
- 定义：本地缩放是相对于骨骼自身的旋转方向的缩放。X轴指向骨骼的旋转方向。
- 使用场景：当你希望骨骼按照它自己的方向进行缩放时使用。比如，你希望角色的手臂在它自身的方向上变长或变短。
父级（Parent）
- 定义：选择父级轴不影响实际的缩放值，它只是显示为本地缩放值。
- 使用场景：这种选择更多是为了查看和调节方便。它帮助你在处理复杂的层级关系时更直观地看到每个骨骼的缩放效果。
世界（World）
- 定义：世界缩放是骨骼和所有父级骨骼的组合缩放值。
- 使用场景：虽然你不能直接编辑世界缩放值，但它表示骨骼在整个场景中的整体缩放效果。

具体应用

缩放始终使用本地轴：缩放时始终是相对于骨骼自身的方向，红色的X轴总是指向骨骼的旋转方向。
编辑缩放值：
- 你不能直接编辑世界缩放值。当你聚焦缩放文本框时，显示的数值会自动切换为本地缩放值。你输入的数值将作为本地缩放值应用。在这种情况下，本地轴按钮会亮显为橙色，提醒你正在编辑本地缩放值。
翻转：
- 翻转是通过将一个或两个轴的缩放值设为-1来实现的。比如，如果你想让角色的手臂翻转，可以将X轴或Y轴的缩放值设为-1。

总结

本地轴（Local）：适用于骨骼按照自身旋转方向进行缩放。
父级轴（Parent）：用于查看和调整，但实际效果和本地轴一样。
世界轴（World）：显示骨骼在整个场景中的整体缩放效果，但不能直接编辑。

调整骨骼的变换和补偿

简单来说，如果你只想调整当前骨骼而不影响它的附件或子骨骼，那么就可以尝试开启补偿功能。

一般情况：
- 当你调整骨骼的位置、旋转或缩放时，任何连接到这个骨骼的附件（如图片）和子骨骼也会随之变化。
- 这种情况下，附件和子骨骼会一起移动或旋转，使整体效果一致。
补偿的作用：
- 补偿：是指在调整骨骼时，不影响它所连接的附件和子骨骼。
- 应用场景：比如，你需要调整骨骼的位置或旋转中心，但不希望附件或子骨骼也跟着移动。
补偿的使用方法：
- 图片补偿（Image Compensation）：
  - 用途：移动骨骼但不影响附件的位置。
  - 操作：启用图片补偿后，附件会以相反的量变换，这样附件看起来像没有移动过一样。
  - 有效性：在设置模式和动画模式下都有效，但在动画模式下，区域附件不支持补偿。
- 骨骼补偿（Bone Compensation）：
  - 用途：移动骨骼但不影响子骨骼的位置。
  - 操作：启用骨骼补偿后，子骨骼会以相反的量变换，使它们看起来像没有移动过一样。
  - 注意事项：在动画模式下，必须为子骨骼的变化设置关键帧。关键帧之间的插值可能会导致子骨骼移动。
补偿的注意事项：
- 关闭补偿：在不再需要补偿时，务必关闭它以避免混淆。启用补偿时，按钮会闪烁橙色提醒你补偿已开启。
- 缩放补偿的局限性：当骨骼的缩放不均匀（X轴和Y轴的缩放值不同）时，由于附件位置的存储方式，图片补偿可能无法完全调整附件位置，使其看起来像没有移动一样。

总结

调整骨骼通常会影响附件和子骨骼。
补偿允许你调整骨骼时，不影响附件或子骨骼。
图片补偿用于不影响附件的位置，骨骼补偿用于不影响子骨骼的位置。
在动画模式下，补偿需要设置关键帧，并注意补偿的开启和关闭状态。

自动关键帧，这个非常重要，关键帧是制作动画的最关键部分，这个我放到下面单独聊

视口选项

最后一块，这里视口主要控制骨骼和附件的禁用选择、可见性和名称标记。

第一列控制是否可以选择骨骼、区域和网格附件以及其他附件。这可以通过防止意外选择来简化某些任务。仍然可以通过在层级树中单击项目来选择这些项目。

第二列控制骨骼、区域和网格附件以及其他附件的可见性。在设置动画时隐藏骨骼以减少混乱通常很有用。隐藏骨骼后，它们仍可被选中，并在鼠标光标下时显示。

第三列控制骨骼、区域和网格附件以及其他附件的名称标签的可见性。名称标签增加了复杂骨骼的杂乱程度，但可以更容易地找到特定的骨骼或附件。可以点击名称标签来选择该项目。

动画

在设置关键帧之前，请确保你处于动画模式，并通过在层级树视图中设置动画可见点或在动画视图中选择它来激活动画。

选择层级树中的Animations节点，点击新建... Animation可新建动画。同样这里也可以新建文件夹进行分类

新建动画后就可以对当前动画进行关键帧的设置了。

关键帧

自动关键帧设置：
- 未启用自动关键帧时，动画模式下的骨架更改不会自动保存为关键帧。
- 时间轴位置更改会导致未设置关键帧的更改丢失。
手动设置关键帧的方法：
- 手动设置关键帧：单击已更改属性的钥匙按钮。
- 使用热键K：为所有修改的属性设置关键帧。
关键帧按钮颜色表示：
- 绿色：无关键帧。
- 橙色：已更改但未设置关键帧。
- 红色：已设置关键帧。

可设置的关键帧属性

以下各节列出了可以在Spine中设置关键帧的所有属性，以及在哪里可以找到设置关键帧按钮。

骨骼变换

通过单击主工具栏中相应工具的数字输入旁的钥匙按钮，可以设置旋转、平移、缩放或剪切的关键帧。

此外，如果骨骼的旋转、平移、缩放或剪切有任何未设置关键帧的更改，则层级树中该骨骼旁边会出现一个橙色钥匙按钮。单击此按钮将为未设置关键帧的变换更改创建关键帧。

分离X和Y

很多时候可能用不上这些功能，但是需要知道有这些功能，以便有相关需求场景可以想到使用这些功能可以解决

默认情况下，骨骼的每个平移、缩放和剪切关键帧都会设置X和Y。这对于许多动画已经足够，并减少了在摄影表和曲线图中显示的时间轴数。它的效率也略高一些，因为需要在运行时应用的时间轴更少。

对于需要分离的动画，可以通过选中层级树属性中骨骼的分离复选框来分别设置X和Y的关键帧。分离后，骨骼的X和Y将分别显示在当前动画的曲线图和摄影表中。

插槽附件

层级树中的骨骼和插槽的可见性点仅用于隐藏编辑器中的骨骼和插槽，以减少混乱。隐藏骨骼和插槽是不可设置关键帧的，并且不会影响导出的数据。

要设置插槽的哪个附件可见，可点击可见点以在层级树中隐藏或显示所需的附件。要为插槽的附件可见性设置关键帧，可点击层级树中插槽旁的钥匙按钮，此处显示为橙色:

可以通过设置插槽附件的关键帧来实现逐帧动画，以便每隔几帧显示一张不同的图片。有关使用示例，请参阅逐帧示例演示或示例项目。

spine 还提供了皮肤的功能，就是类似换装，更换装备、时装。这个功能我比较感兴趣，下文会着重谈论一下

插槽颜色

要为插槽颜色设置关键帧，请单击层级树中颜色按钮旁边的钥匙按钮。

分离颜色和Alpha

目前没想到有啥用，也许做无敌闪烁的动画可以用到

默认情况下，插槽的每个颜色关键帧会同时设置颜色(RGB)和Alpha(A 透明度)。这对于许多动画来说已经足够了，并且减少了在摄影表和曲线图中显示的时间轴的数量。它的效率也略高一些，因为需要在运行时应用的时间轴更少。

对于需要分离的动画，可以通过选中层级树属性中插槽的分离复选框来分别设置颜色和Alpha的关键帧。

分离后，插槽的颜色(RGB)和Alpha(A)时间轴将分别显示在当前动画的曲线图和摄影表中。此外，插槽颜色会显示两个颜色按钮。左按钮使用Alpha显示颜色，并允许对Alpha设置关键帧。右按钮显示不透明颜色，并允许对颜色设置关键帧。单击任一按钮将打开相同的插槽颜色对话框，该对话框可以更改Alpha和/或颜色。