2025年第一篇：Spine 相关的基本知识点和术语

大家好，我是讯享网，很高兴认识大家。

简介：

Spine是一款编辑2D骨骼动画的工具。可以将图片绑定到骨骼上，然后通过控制骨骼实现动画。Spine主要知识点：Skeleton、bones（骨骼）、slots（槽位）、Skins（皮肤）、Events（事件）、Animations（动画）

bones（骨骼）

骨骼是动画的基本结构，每个骨骼都有自己的位置、旋转、缩放和父子关系，所以可以通过控制骨骼的这些属性可以实现动画效果。同时骨骼之间存在父子关系，父骨骼的变化会传递到子骨骼，即父骨骼能影响子骨骼变化。骨骼 - Spine用户指南

slots（槽位）

插槽是必须要在骨骼下，一个骨骼可以包含多个插槽。这也意味着我们可以对插槽进行切换（例如武器的更换）插槽 - Spine用户指南

插槽可以控制附件的一些渲染属性例如：颜色、混合、alpha等，会影响附件的渲染。

Attachments（附件）

附件通常是绑定到骨骼上，但是一般都附加到插槽上。附件可以是图片，也可以是检测碰撞的边界框（例如是武器的碰撞体）等。插槽可以加多个附件，而附件的可见与不可见由骨骼控制，在运行时，只能显示一个附件。附件 - Spine用户指南

讯享网

spine 资源

JSON信息

Skeleton：spine数据的hash值，spine版本信息、

bones：记录了所有的骨骼信息，骨骼的名字、骨骼的父骨骼名字、以及在父骨骼中的旋转、位置、缩放、长度、如何继承父骨骼的变化、骨骼的颜色等。

slots：记录了所有的插槽信息。每条信息含有插槽名字、附加的骨骼名字、附件名字。

skins：记录了所有的皮肤信息。每条信息一般的结构如下：

"skins": {     "newSkin": {//皮肤名称       "slotName1": {//插槽名称         "attachmentName1": { //附件名          "type": "mesh",          "uvs": [0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 1.0, 1.0],  // 顶点的纹理坐标          "triangles": [0, 1, 2, 2, 3, 1],  // 三角形的顶点索引          "vertices": [x1, y1, x2, y2, x3, y3, x4, y4],  // 顶点的坐标          "edges": [0, 1, 1, 2, 2, 3, 3, 0]  // 边缘顶点索引         },   "attachmentName2": {//附件名 "type": "region",//可省略、默认是region类型 "x": 10, // 附件的水平位置 "y": 20, // 附件的垂直位置 "rotation": 45, // 附件的旋转角度 "width": 100, // 附件的宽度 "height": 50, // 附件的高度 "scaleX": 1.0, // 附件的水平缩放 "scaleY": 1.0, // 附件的垂直缩放 "color": "ffffff" // 附件的颜色，通常使用十六进制表示 }         、、、、、、    }  } }

讯享网

事件（Events）：主要用于在特定的帧上触发特定的操作，可以是触发脚本中的函数（可携带参数）、音效、粒子效果等。数据结构

讯享网 "events": [ { "name": "event_name", // 事件的名称 "int": 42, // 事件的整数参数 "float": 3.14, // 事件的浮点参数 "string": "event_description", // 事件的描述 "audio": "event_sound.ogg", // 与事件关联的音频文件 "volume": 0.5, // 音频音量 "balance": 0.0 // 音频平衡（左右声道） }, // 其他事件... ]

动画（animations）：主要是记录了动作的时间轴列表。每个动作中包含插槽时间轴列表，指定了时间轴所使用的附件。骨骼的时间轴列表，指定了所使用到的骨骼在时间轴上的变化情况，例如：旋转、缩放、位移等。简单的数据结构如下

"animations": { "idle": { "slots": { "slot1": { "0": [{ "attachment": "attachment1" }], "30": [{ "attachment": "attachment2" }], "60": [{ "attachment": "attachment3" }] }, "slot2": { "0": [{ "attachment": "attachment4" }], "45": [{ "attachment": "attachment5" }], "90": [{ "attachment": "attachment4" }] } }, "bones": { "bone1": { "0": { "rotation": 0 }, "45": { "rotation": 45 }, "90": { "rotation": 0 } }, "bone2": { "0": { "rotation": 0 }, "60": { "rotation": -30 }, "120": { "rotation": 0 } } } }, "walk": { // 其他动画的定义... } }

Spine: JSON导出文件格式

扩展：

animations中还有Deform 用于在时间轴上对网格的变形。
IK约束：IK约束 - Spine用户手册。

动画效果演示：Spine: Demos