快速上手
使用前准备与编辑器界面
准备好教程 PSD,认识画布、层级树、摄影表和两种编辑模式。
入门约 6 分钟适用 编辑器 v1.0 · 教程更新 2026年10月26日
下载教程同款 PSD完成本篇后
能够新建项目、找到主要工具,并在骨架模式与动画模式之间切换。
01
准备浏览器、示例和项目
快速教程可以匿名完成;需要云保存时再登录,不必先配置游戏引擎。
- 使用桌面版 Chrome 或 Edge,并保持浏览器缩放为 100%,方便跟随教程截图找到按钮。
- 下载教程同款 PSD,保留文件名 right_test.psd,稍后在文件选择器中找到它。
- 打开编辑器后会自动建立本地项目。匿名项目保存在当前浏览器;清理站点数据前请先导出成果。
02
认识四个工作区域
| 区域 | 主要用途 | 本套教程中的操作 |
|---|---|---|
| 顶部工具栏 | 模式、撤销、导入、导出、保存和视图 | 导入 PSD、保存项目、选择导出格式 |
| 主画布 | 观察角色并直接选择、创建和拖拽对象 | 调整骨骼、图片、网格、路径与约束 |
| 右侧层级树 | 管理骨骼、插槽、图片、约束、皮肤、事件和动画 | 检查 PSD 自动绑定结果,选择要编辑的对象 |
| 底部摄影表 | 管理动画轨道、播放头和关键帧 | 播放动画、切帧、设置缓动和编辑关键帧 |
- 1
先看右侧层级树
依次找到骨骼、约束、绘制顺序、皮肤、事件、动画、图片和音频栏目。栏目左侧的箭头用于展开或折叠。
检查结果空项目中这些栏目可以存在,但内部没有角色数据,这是正常状态。
- 2
再看底部摄影表
摄影表在动画模式下显示当前动画的轨道和关键帧。骨架模式下可以先忽略它。
检查结果能够明确区分“右侧管理对象”和“底部管理时间”。
03
区分骨架模式与动画模式
骨架模式用于搭建结构、绑定图片和调整初始姿势;动画模式用于随时间记录变化。导入 PSD 和自动绑定在骨架模式进行。
- 1
确认当前模式
查看顶部左侧的模式按钮。显示“当前:骨架模式”时,可以进行 PSD 导入。
骨架模式是 PSD 导入和结构编辑的起点。 - 2
切换到动画模式
点击模式按钮,或按 M。进入动画模式后,在右侧动画栏目选择要查看的动画。
检查结果摄影表显示当前动画轨道,导入按钮不可用,避免在动画状态误改骨架结构。
使用 M 可以在两种模式之间切换。
04
画布导航与内置帮助
| 操作 | 作用 |
|---|---|
| 鼠标滚轮 | 缩放画布 |
| 右键拖拽 | 平移画布 |
| 右键双击 | 重置视图 |
| Ctrl + Z | 撤销上一步 |
| Ctrl + Y / Ctrl + Shift + Z | 重做 |
- 1
打开画布与 PSD 帮助
点击画布左上角的问号按钮。这里可以查看当前版本的鼠标操作、快捷键和 PSD 人形命名规则。
检查结果帮助内容来自实际编辑器,可与本教程互相参照。
画布左上角问号打开内置帮助。