简介:
Spine是一款编辑2D骨骼动画的工具。可以将图片绑定到骨骼上,然后通过控制骨骼实现动画。Spine主要知识点:Skeleton、bones(骨骼)、slots(槽位)、Skins(皮肤)、Events(事件)、Animations(动画)
bones(骨骼)
骨骼是动画的基本结构,每个骨骼都有自己的位置、旋转、缩放和父子关系,所以可以通过控制骨骼的这些属性可以实现动画效果。同时骨骼之间存在父子关系,父骨骼的变化会传递到子骨骼,即父骨骼能影响子骨骼变化。骨骼 - Spine用户指南
slots(槽位)
插槽是必须要在骨骼下,一个骨骼可以包含多个插槽。这也意味着我们可以对插槽进行切换(例如武器的更换)插槽 - Spine用户指南
插槽可以控制附件的一些渲染属性例如:颜色、混合、alpha等,会影响附件的渲染。
Attachments(附件)
附件通常是绑定到骨骼上,但是一般都附加到插槽上。附件可以是图片,也可以是检测碰撞的边界框(例如是武器的碰撞体)等。插槽可以加多个附件,而附件的可见与不可见由骨骼控制,在运行时,只能显示一个附件。附件 - Spine用户指南
spine 资源
spine资源有altas、png、json。atlas主要描述的是每个纹理在png中的位置、旋转、大小信息。png是一张图集,可存在多张。json主要包含动画的变换信息。下面主要介绍json数据结构。
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": {
// 其他动画的定义...
}
}
扩展:
- animations中还有Deform 用于在时间轴上 对网格的变形。
- IK约束:IK约束 - Spine用户手册。
动画效果演示:Spine: Demos