Pixel Editor
逐像素打造精灵图与图块地图:帧、洋葱皮、调色板、逐图块碰撞、法线贴图、九宫格拉伸,以及 GIF 或 Aseprite 导出。
一句话概括#
一个既能舒服地在 32×32 上工作、也能舒服地在 1024×1024 上工作的精灵图与 图块地图编辑器,配有理解调色板的动画帧与色彩工具。
界面布局#
![]()
| 菜单栏 | File · Edit · View · Plugins |
| 模式页签 | Sprite 和 Tilemap |
| 工具栏 | New、撤销/重做、画布尺寸、裁剪、图层拼合、水平和垂直翻转、网格、导入、导出、Save |
| 选项行 | 画笔尺寸、画笔形状、不透明度、分屏视图和预设 |
| 左侧工具栏 | 铅笔、形状、填充、渐变、文字、选区、吸管、颜色对、调色板 |
| 中央 | 画布,带当前工具和颜色的小型读出区,以及一个 1:1 的Preview |
| 右侧 | Layers,然后是 Effects、Normal map、Reference 和 Modes |
| 底部 | 帧时间轴,然后是调色板栏 |
| 状态栏 | 画布尺寸、当前图层、缩放 |
你可以做什么#
绘制#
![]()
Space + 拖动可以平移,滚轮缩放,0 重置视图。画笔有尺寸和形状(默认为
方形),以及不透明度。Preview面板会在你放大工作时,以 1:1 显示精灵图,
这是唯一能诚实呈现一张像素精灵图的视图。
图层#
命名、可重新排序,各自带有混合模式和不透明度,外加颜色标签和一个在图层 很多时用来筛选的搜索框。Effects以非破坏性的方式应用。
制作动画#
底部的timeline是一条帧的长条。可以添加、复制、删除、重新排序;为每一 帧设置以毫秒为单位的时长;正向、反向或来回播放。读出区会告诉你这些 加起来是多少,例如 1 frame • 100 ms • ~10 fps。
Onion(洋葱皮)会把相邻的帧淡淡地显示在当前帧下面,这正是防止一个走 路循环走着走着就跑偏的办法。
颜色#
![]()
![]()
调色板栏是值得花时间学习的部分:
| Palette | 当前工作的调色集,带计数和 + Add |
| Recent | 你最近选用过的颜色 |
| Shades | 从当前颜色生成的一条明到暗的色阶 |
| Harmony | 互补色、三角色和类似色的建议 |
| Ramp | 一条你自己搭建并保留下来的色阶 |
当前颜色可以用十六进制编辑。
图块地图#
Tilemap页签把工作模式从绘制一张精灵图切换到把它当作图块来布局。结果 会去到 Engine,那里有它自己的、用于关卡本身的 图块地图编辑器。
法线贴图#
Normal map部分从精灵图推导出一张法线贴图,这样一张 2D 精灵图就能在 Engine 里被真正打光,而不是一直保持平面。
参考#
把一张图片拖进Reference部分,它就会停留在画布后面,供你描摹作画。
各个面板#
一共九个,最后四个是把一张精灵图变成一件游戏素材的关键:
| Tool Palette | 工具本身 |
| Layers | 图层堆栈 |
| Timeline | 动画帧 |
| Reference | 画布后面的一张参考图 |
| Effects | 图层上的非破坏性效果 |
| Tileset | 从画布切出一个图块集,图块尺寸可选 |
| Tilemap | 把这些图块铺成一张地图 |
| Collisions | 逐图块的碰撞形状 |
| Normal Map | 推导并编辑一张法线贴图 |
图块集与图块地图#
Tileset面板把画布切成图块(默认 16 像素);Tilemap面板把它们铺成 带有图层的一张地图,并且可以调整尺寸。
图块地图以 .tilemap 保存,并有两种导出方式:as one file(合并为一个
文件),或者separately(分开导出):地图以 JSON 格式导出,每个图块集
作为独立图片导出,这正是外部引擎通常想要的形式。
碰撞#
每个图块都带有一个碰撞形状,画在图块集之上,而不是写在代码里声明:
| Full | 整个图块参与碰撞 |
| None | 可通行 |
| Top / Bottom / Left / Right half | 部分碰撞 |
| Slope up / Slope down | 带角度的碰撞 |
Show Collisions会把它们叠加显示出来,整套设置以 JSON 导出。在这里做好 这件事,意味着 Engine 收到的图块地图已经知道玩家 能在哪里行走。
法线贴图#
Generate Normal Map从精灵图推导出一张法线贴图,带一个strength
参数;Normal Map Editor接着让你手动(P)绘制法线方向,这是修正自动
生成结果出错之处的唯一办法。
九宫格与轴心点#
9-Slice guides标出一张 UI 精灵图可拉伸的区域,Pivot / Origin设置 精灵图旋转和锚定所围绕的点。两者都会随精灵图一起进入 Engine。
对称#
Mirror X 和 Mirror Y 会同时绘制两侧:水平、垂直、两者都要,或者 径向。
色阶与调色板#
Color Ramp弹窗能规规矩矩地搭建一条色阶,而不是靠肉眼判断,调色板可以
从 .gpl(大多数像素画调色板所使用的 GIMP 调色板格式)导入。
导出#
| 格式 | 用途 |
|---|---|
| PNG | 单帧 |
| GIF | 动画,到处都能用 |
| APNG | 动画,带真正的透明通道 |
| Aseprite | 回到 Aseprite,图层保持完整 |
| Atlas / sprite sheet | 游戏引擎 |
.tilemap | 地图,合并导出或拆成 JSON + 图片 |
支持读写的文件#
| 原生格式 | .editor |
| 导入 | .png、.jpg、.aseprite、.tilemap、.gpl(调色板) |
| 导出 | .png、.gif、APNG、.aseprite、精灵图集、.tilemap(合并或拆分)、碰撞 JSON |
向其他模块发送内容#
产出 像素画。接受 像素画和图片。
像素画被 Inkwell、Composer、 Animator、Matter 和 Engine 接受:一张精灵图集可以直接进入游戏,不需要 先绕道经过一个文件。
与他人协作#
Pixel Editor 按逐个操作同步:场景数据、素材、动画和脚本。
局限与常见问题#
- 缩放不是分辨率。 状态栏显示真实的画布尺寸;Preview以 1:1 显示它。
- 一支柔边画笔不是像素画笔。 不透明度低于 100% 会给边缘做抗锯齿处理, 这通常不是你在一张精灵图上想要的效果。
- 帧时长是按帧设置的,不是按整段动画设置的。一个 12 帧、每帧 100 毫秒 的循环,跑起来大约是 10 fps,不管别的帧怎么设置。