快速上手
10 分钟完成:从 PSD 导入到播放动画
使用教程同款朝右 PSD,完成自动拼装、骨骼绑定、IK 创建和默认动画播放。
完成本篇后
得到一个包含角色图片、骨架、插槽、IK 和 7 套默认动画的可播放项目。
开始前请准备
- 已完成“使用前准备与编辑器界面”,并下载 right_test.psd。
打开 PSD 导入参数
- 1
确认处于骨架模式
如果顶部显示动画模式,按 M 返回骨架模式。建议从空白项目开始,避免与已有骨骼或图片混合。
检查结果右侧层级树中没有上一项目的角色内容。
- 2
点击顶部导入按钮
顶部中间的向下箭头是导入按钮。点击后选择“导入PSD文件”。
导入菜单中的“导入PSD文件”和示例下载入口。 - 3
不要先选文件
此时会先出现 PSD 导入参数对话框。朝向和自动化选项确认后,才进入文件选择。
检查结果看到正面、反面、朝右三个选项和四个导入开关。
先设置参数,再选择 PSD 文件。
使用教程的导入参数
| 参数 | 本篇设置 | 作用 |
|---|---|---|
| 角色朝向 | 朝右 | 与 right_test.psd 的角色方向一致,并允许生成默认动画 |
| PSD 仅可见 | 开启 | 导入可见切片,隐藏的 full 参考层不作为角色部件参与拼装 |
| PSD 自动拼装 | 开启 | 按图层位置放置切片,并建立可编辑的项目结构 |
| 自动绑定骨骼 | 开启 | 按人形图层名称创建骨链、插槽、图片绑定和 IK |
| 自动生成 7 个动画 | 开启 | 生成 idle、walk、run、jump、attack、hurt、death |
- 1
逐项核对开关
确保朝右已选中,四个开关均为开启。正/背面不会自动生成动画,本篇不要切换朝向。
快速教程使用的完整参数组合。 - 2
继续选择 PSD
点击“继续选择 PSD”,在系统文件选择器中选择刚下载的 right_test.psd。
检查结果文件选择后出现“选择目标文件夹”对话框;此时尚未开始解析。
- 3
新建 default 图片文件夹
选择“新建文件夹”,输入 default,再点击“导入”。文件夹只组织图片资源,不改变 PSD 图层名称。后续换装教程会用它作为绑定参照。
检查结果编辑器开始解析 PSD;解析期间不要重复点击导入。
文件选择后还要确认图片目标文件夹,再开始正式导入。
检查自动绑定结果
- 1
等待导入完成
解析完成后,画布应出现完整角色。顶部通知会汇总切片、绑定、IK、识别部件和动画数量。
检查结果角色没有明显缺件,右侧层级树不再为空。
right_test.psd 的真实自动绑定结果。 - 2
检查骨骼和图片
在右侧展开骨骼与各插槽,选择手臂或腿部骨骼,确认对应图片位于该骨骼的插槽下。
检查结果选择骨骼时能在画布看到对应关系;图片不是孤立的未绑定资源。
- 3
检查自动 IK 和动画
展开约束栏目可以看到四肢 IK;展开动画栏目可以看到 7 套默认动画。
检查结果idle、walk、run、jump、attack、hurt、death 均出现在动画列表。
自动生成的动画可以继续编辑,不必从空白时间轴开始。
播放并保存项目
- 1
进入动画模式
按 M 或点击模式按钮。在动画列表选择 idle,再点击摄影表的播放按钮;空格键也可以播放或暂停。
检查结果角色开始播放待机动画,播放头沿时间轴移动。
先播放 idle,确认骨架、图片和动画能够共同工作。 - 2
逐套快速检查
暂停后切换 walk、run、jump、attack、hurt 和 death,各播放一遍。death 是倒地终态,不要求首尾循环。
检查结果每套动画都有可见动作,没有图片脱离骨骼或突然消失。
- 3
保存到本地
点击顶部保存按钮,将当前状态写入浏览器本地存储。以后从同一浏览器打开项目时可以继续编辑。
检查结果出现本地保存成功反馈。
本地保存对应浏览器 IndexedDB;关键阶段可手动点击该按钮,刷新后从同一浏览器继续编辑。