LogoPixelBead
入门

完整制作流程

从美术到导出的一段完整骨骼动画实战:九大阶段 + 操作顺序与细节

打开编辑器 →

一次完整制作要走过哪些阶段

前面各章告诉你每个按钮是干什么的,这一章告诉你按什么顺序把它们用起来。 无论做人物走路、挥手还是怪物攻击,制作管线都遵循同一条主线——按下面的顺序推进, 能避免反复返工:

  1. 1① 准备美术:拆分图层、统一尺寸与参考点,素材决定后面一切;
  2. 2② 导入整理:命名 + 层级树,把素材组织成清晰的结构;
  3. 3③ 搭骨架:画骨骼、理父子、设绑定姿态;
  4. 4④ 挂图绑定:插槽挂附件 + 网格权重蒙皮,让肢体能弯曲;
  5. 5⑤ 加约束:IK / 换装 / 物理等让绑定更强、动画更省力;
  6. 6⑥ 分镜与 K 帧:先摆大姿势(blocking),再补中间帧;
  7. 7⑦ 细化润色:调曲线、加重叠与跟随、做循环;
  8. 8⑧ 事件与声音:脚步、打击点、音效对齐;
  9. 9⑨ 导出接入:JSON + 图集交给引擎或直接出视频。
!
两条铁律 — 铁律一:第 ③⑤ 步的“绑定结构”改动发生在 Setup 模式, 会影响所有动画;第 ⑥⑦ 步的关键帧只在 Animate 模式对当前动画生效。先摆好绑定,再动动画,切莫混着做。 铁律二:名字就是接口,先命名后创作,后面靠搜索与查找引用。

阶段一 · 准备美术资产

骨骼动画强在“一张图多种姿态”,所以美术通常按可动部件分层导出,而不是整张图一个文件。 是否分层取决于你想让它怎么动:

部件拆法典型用途
整身若不需要任何肢体弯曲,可整身一张图、只做位移与旋转NPC 冒泡、飘浮小怪
四肢分离手臂 / 腿 / 头各自一张,关节处做成圆润凸起方便弯曲挥拳、挥剑、待机呼吸
细碎部件手指、裙摆、披风、饰品单独拆,用于重叠与跟随动画毛发摆动、裙子惯性
同部件多姿态同一部位画几个不同方向(正面 / 侧面脸),用作皮肤或动画切换转头、表情、换武器

提交素材时的硬性要求

  • 透明背景 PNG(不要留白底或黑底),alpha 通道要干净;
  • 统一参考点:每个可动部件的“轴心”最好都在关节处或物体几何中心, 骨骼摆上去才自然;
  • 命名成体系:如 arm_upper_L、arm_lower_L, 左右带 _L / _R 后缀,方便后续复制镜像与批量处理;
  • 相邻部件留一点重叠量,防止弯曲拉伸时关节露出缝隙。
i
关于分辨率 — 图集 + 骨骼动画是矢量缩放,SPINE 一套资源可跑多种分辨率。不必为高清出超大图, 关键是把图集打包尺寸控制好,稍后在导出阶段设置(见“导出接入”)。

阶段二 · 导入图片并整理层级

1
导入图片
点 File → 打开图片… 可多选批量导入;或直接使用 File → 导入图片到当前插槽。 图片会生成一个 region 附件并挂在当前选中的插槽上。
2
先建插槽,再丢图
骨骼动画的“图层”概念是 插槽(Slot),图是插槽里可随时替换的 附件(Attachment)。好习惯是:在层级面板先新建插槽并命名, 再把对应图片作为附件放进去——这样以后换装、换表情只需换附件,不需要换整棵树。
3
按身体部位建根骨骼结构
一件角色(骨架)通常有一个 root,下面才是 body、 head、四肢等。先理清层级再画骨头,结构混乱会让后面的 权重和动画都难以下手。
4
命名与排布确认
在层级面板把每个插槽、附件改好名字,和美术命名一一对应。此时是 Setup 模式, 改动影响全局绑定,务必在这一步把名字订死。

推荐的主次结构

root
├── pelvis(骨盆 / 驱动下半身)
├── torso(躯干)
│   ├── chest(胸腔,可再加二级起伏)
│   └── head
│        ├── hair / face
├── arm_L(左上臂)→ forearm_L(左前臂)→ hand_L(左手)
├── arm_R(右上臂)→ forearm_R(右前臂)→ hand_R(右手)
└── leg_L(左大腿)→ shin_L(左小腿)→ foot_L(左脚)
    └── leg_R(右大腿)→ shin_R(右小腿)→ foot_R(右脚)
✓
为什么躯干分这么多级 — 走路时骨盆会上下颠、胸腔会左右扭、头要保持朝前。拆得越细,动画越有“活人感”, 代价是 K 帧更繁琐。新手可以先粗后细,别一上来就把树做得过深。

阶段三 · 搭建骨骼并设定绑定姿态

骨骼只负责运动学层级,本身不画图。用 C(Create 工具)在视口里按住拖拽:从父骨末端拉向子骨位置即创建一条新骨骼并自动成为选中父骨的孩子。

1
从 root 画起,自上而下
先画 root(通常藏在骨盆或中心点,作为整体位移和缩放的把手), 再沿身体自下而上或自上而下逐级拖出躯干、头、四肢。
2
父子关系即“跟随关系”
子骨的位置 = 父骨变换 + 自己的局部偏移。所以想让谁跟着谁动,就把它做成谁的孩子: 手臂动 → 手跟着;躯干动 → 头跟着。层级错了,动一处带动一片就乱套。
3
用 <Code>X</Code> 观察实际骨骼
按 X 可在视口里切换是否显示真实骨骼。绑定阶段建议始终开着骨骼显示, 确认每条骨的关节落在图片的轴点上。
4
命名规范化
每条骨一个可读名。命名直接影响后面:时间轴按名字找轨道、命令控制台按名字批处理、 复制镜像靠 _L/_R 后缀。宁可多打几个字。
5
设定绑定姿态(Bind Pose)
摆好“A 或 T 自然站姿”作为绑定姿态。它会作为权重刷取和部分导出的参照, 也是换动画时角色回到的默认样子。此阶段仍是 Setup 模式。

骨骼工具速查(此时常用)

工具快捷键干什么用
CreateC拖拽画新骨、给骨续子骨
TranslateV平移选中骨 / 插槽 / 附件
RotateR旋转(FK 调姿势的主力)
ScaleS缩放(附件的非均匀缩放可用)
Bone LengthenL只拉长骨骼不改父子姿态
Order EditO调整插槽前后遮挡顺序
!
Setup 阶段的“姿势”不等于动画 — 在这里旋转手臂,只是改变绑定姿态,不会生成任何关键帧,也不会出现在时间轴上。 一定要切到 Animate 模式,动作才会被记进动画。

阶段四 · 挂图、换皮肤与权重蒙皮

结构到位后,把美术图“贴”到骨架上。这分两条路线:region 刚性绑定(适合四肢甩动) 与 mesh 网格蒙皮(适合需要弯曲/变形的躯干与关节)。

4.1 刚性部件直接挂 region

1
在层级面板选中目标插槽
选中的插槽在视口会被高亮,属性面板随之显示该插槽的参数。
2
把图片设为该插槽的附件
在层级面板插槽下的附件列表里选一张,或在属性面板附件下拉里选择; 图片立即显示并跟随该插槽所在骨骼运动。
3
摆到对齐位置
用 V 移动、R 旋转附件,把它对齐到骨骼与相邻部件。 若不想手动对齐,可勾选工具栏底部的图片补偿 / 骨骼补偿让位置自动贴合。

4.2 需要弯曲的部件转网格 + 权重

1
转成网格
选中插槽 → 属性面板点 Convert to mesh,把 region 变成可变形网格, 生成默认三角剖分顶点。
2
绑定(Bind)
切到权重工具 W,点属性面板的 Bind, 编辑器按顶点到骨骼的距离自动把各顶点分配给若干骨骼。弯曲处通常横跨两条骨。
3
平滑(Smooth)过渡
点 Smooth 数次,让关节附近顶点的权重在两条骨之间“渐变”, 弯曲时才不会出现硬折角。数量视弯曲柔度而定。
4
手工精修个别顶点
W 下按住某顶点并拖动可分配 / 移除权重(Shift 增减)。 若整体崩坏,点 Recompute 按距离重算兜底。
✓
关节区顶点别只绑给一根骨 — 肘、膝附近的顶点若 100% 只属于上臂,弯起来就会把前臂“切”走。让这些顶点在两侧各占一部分权重, 弯曲才会是平滑的圆弧。

4.3 用皮肤组织换装

把“同一角色的一套图”组织成 皮肤(Skin),就可在不重建骨架的前提下整体切换外观 (换武器、换衣、换脸)。不同皮肤可以指向不同名字的附件,互不干扰。

阶段五 · 加约束让动画省力

约束是“规则”,让某些骨自动推算位置/角度,从而省去手工逐帧。绑定阶段加约束, 动画阶段就会自动跟着约束工作。

约束做什么典型场景
IK 逆运动学末端位置固定,反推整条链的关节角度脚踩地、手抓把、刀尖稳定
Transform子对象跟随/混合父对象的某几项变换头发随头转、父子联动、局部继承控制
Path 路径对象沿一条样条路径运动眼球扫视、尾巴沿路径甩
Physics受重力/阻尼/力影响做物理摆动毛发、裙子、项链的自动惯性
Slider一个滑块同时驱动多个目标一拉整手收拳、整体表情控制

最常搭配:双脚 IK + 整体位移

走路时脚要“钉”在地上不滑动,最好的做法是给两条腿各加 IK, 让角色整体(root 或骨盆骨)前移时,IK 自动把脚保持在落地点, 再靠 IK 目标与脚的错位完成抬脚动作。这一套也是“同姿势循环”的核心。

!
约束在哪个模式加? — IK / Transform / Path 这类是骨架级约束,在 Setup 模式创建与配置; 它们产生的影响会在 Animate 里体现,也可在 Animate 里给“约束混合强度”K 帧实现“有时失效、有时生效”。

阶段六 · 新建动画,先分镜再 K 帧

切换到 Animate 模式,此时所有改动才开始进动画。一条成熟的动画通常不是一帧一帧堆的, 而是“先摆大姿势占关键帧,再逐段补中间”——也就是业内说的 Blocking → Splining。

1
规划动画列表
在时间轴左上角动画下拉点 New Animation 新建,并规划好: 一份工程可含 idle、walk、attack……多个动画, 它们共享同一套骨架与权重,只是关键帧不同。
2
命名并设长度
给动画命名,时间轴右侧设置动画时长(如走路循环设 1s / 30fps = 30 帧)。循环动画建议 时长固定且首尾帧姿势一致。
3
Blocking:只摆关键姿势
把播放头依次拖到 0、0.25s、0.5s…等“姿势转折点”,每个点上用 R / V 摆好 pose,按 K 给所有选中对象打一帧,先不看中间过程,只验证几个大姿势(起/止/极端)连起来的故事是否成立。
4
Splining:补中间与穿插
拖动不同对象错开时间(stagger / 错峰):先动躯干、再甩手臂、头发最后跟上, 制造“一节推一节”的惯性感,而不是全身一起动。
5
首尾对齐做循环
循环动画把最后一帧复制回第 0 帧,保证 walk 播放到末尾能无缝接回开头。 用复制 / 粘贴关键帧快速实现首尾一致。

时间轴走带控制速记

操作快捷键含义
播放 / 暂停Space从头播放当前动画(再按暂停)
到上一 / 下一关键帧←→逐关键帧步进定位
打关键帧K给当前时间点选中对象打一帧
到动画首 / 尾HomeEnd跳到第 0 帧 / 动画末尾
✓
先小后大,先粗后细 — 先把大肢体(躯干、腿)的节奏做对,再补手臂与头,最后才轮到手指、眼神等细节。 顺序反了往往要推倒重来。

阶段七 · 曲线与润色

K 帧只定“节点”,两点之间的快慢由曲线(缓动)决定。动作是否“活”,一半看姿势、一半看缓动。

1
单击关键帧打开曲线编辑器
在时间轴单击某个关键帧,底部弹出曲线编辑器,显示该帧前后两段的速度曲线; X 轴是时间,Y 轴是该属性值。
2
套用常用缓动
选中帧后点 Linear / Stepped / Ease In / Ease Out / Ease InOut 等预设一键切换。启动动作多带 Ease Out(快出缓停),收尾动作偏 Ease In。
3
拉贝塞尔手柄微调
点出帧上的控制柄,垂直拖动可把曲线的拐点压低/拉高,做出“回弹”“过头再回正”这类细腻的二次运动。
4
按空间轴判断
位移用曲线的斜率(速度)判断节奏;旋转曲线过陡意味着瞬间猛转, 一般动画里很少需要直线到顶的旋转。

让动作“活”起来的三件套

重叠动作
先动主骨,附属(尾巴、披风、发梢)延迟一拍再跟进,产生自然惯性。
跟随 / 缓冲
主体停下后附属还会再荡一下再停下(次运动),不要所有东西同时停死。
缓入缓出
绝大多数真实运动都从缓起动到缓停;只有机械、机器人或瞬间变招才用线性/阶梯。

阶段八 · 事件、声音与节奏对齐

动画不只是视觉位移。要让动画能驱动游戏逻辑(播放音效、出手判定、镜头震动), 需要往里打事件(Event);要对口型或踩音乐节奏,就要用音频面板。

1
加一个事件轨道
在时间轴左侧轨道列表上点+ → 事件(Event),新建事件轨道并命名,如 footstep、hit。
2
在关键时机放事件
把播放头拖到“脚落地的瞬间 / 武器命中的那一帧”,点击事件轨道加上一个事件标记并起名。 运行时可通过监听对应事件触发音效与伤害判定。
3
导入音频踩点
用 File → 打开音频 导入脚步声 / 口型音。切到音频时间轴面板,波形会清晰标出每个冲击点,把事件或关键帧对准波峰即可严丝合缝。
4
用声音反推动作节奏
音乐驱动的动画,先在音频面板铺好节拍(每拍一条参考线),再顺着节拍打姿势关键帧, 角色就会和 BGM 完全同步。

阶段九 · 导出与接入引擎

骨骼动画交付通常分两路:给引擎用的数据(.json + 图集 .atlas + 图片),与 给人看的成片(GIF / 视频)。常见导出如下:

导出项用途产物
导出 Spine JSON骨架、动画、皮肤、事件的全部数据(含图集引用).json
导出纹理图集把所有图片打包成 1~2 张图 + 坐标说明.png + .atlas
打包项目为 ZIP把 .json + 图集 + 图片 + 音频整体归档,方便迁移.zip
导出动画把当前动画直接渲染成可分享的成片GIF / WebM / PNG 序列
1
先在图片路径面板配好搜索目录
为避免“图丢了”,先在图片路径面板把素材所在目录加进搜索路径, 让导出能正确引用图片文件。
2
导出数据用“Spine JSON + 图集”
点 File → 导出 Spine JSON,随后 File → 导出纹理图集 把图打包。注意工程 JSON 通常不内嵌像素图(为控制体积), 所以要保证 .atlas/.png 与 .json 同目录一起交给引擎。
3
运行时接入
运行时加载 .json + .atlas,创建 SkeletonData 后播放 idle 等命名动画;监听自定义事件触发音效与判定;通过换 Skin 换装。
4
出成片(可选)
需要预览 / 演示时用 File → 导出动画 直接渲成 GIF 或视频, 记得先在视图里调好相机与循环,别把 Setup 网格线也录进去。
i
两个导出常踩的坑 — 坑一:导出后图片丢失——多半是没配图片搜索路径或 .atlas 没和 .json 放一起。 坑二:视频/图片导出带上了网格辅助线——导出前到视图菜单把调试显示关掉。

一页速查:从 0 到成品

P1 美术
透明 PNG、部件分层、关节留重叠、命名带 _L/_R 后缀、轴心对齐
P2 导入整理
批量导入 → 先建插槽 → 附件入槽 → 按部位理顺层级,名字在 Setup 订死
P3 搭骨架
C 画骨、父子即跟随、X 看骨、设绑定姿态;根节点管整体位移/缩放
P4 挂图绑定
刚体用 region,弯曲用 mesh:Convert → Bind → Smooth;皮肤管理换装
P5 约束
双脚 IK + root 位移是走路标配;物理/路径留给毛发、尾巴、扫视
P6 K 帧
Animate 模式下先摆大姿势 K 帧,再补中间;错峰与穿插制造惯性
P7 曲线
曲线编辑器决定快慢;缓入缓出 + 重叠跟随让动作“活”
P8 事件声音
事件驱动游戏逻辑;音频波形对齐打击点与音乐节拍
P9 导出
.json + .atlas 交付引擎;GIF/视频出成片;ZIP 归档工程
!
铁律一 · 再次强调 — 第 P3~P5 步都属于绑定(Setup),改了会影响所有动画; 第 P6~P8 步才进 Animate,只影响当前动画。动画做到一半回头大改骨架 = 关键帧全部错位,务必先“绑定冻结”再开动动画。