Pixel Editor

逐像素打造精灵图与图块地图:帧、洋葱皮、调色板、逐图块碰撞、法线贴图、九宫格拉伸,以及 GIF 或 Aseprite 导出。

一句话概括#

一个既能舒服地在 32×32 上工作、也能舒服地在 1024×1024 上工作的精灵图与 图块地图编辑器,配有理解调色板的动画帧与色彩工具。

界面布局#

Pixel Editor:工具栏、画布、图层、帧时间轴和调色板栏

菜单栏File · Edit · View · Plugins
模式页签SpriteTilemap
工具栏New、撤销/重做、画布尺寸、裁剪、图层拼合、水平和垂直翻转、网格、导入、导出、Save
选项行画笔尺寸、画笔形状、不透明度、分屏视图和预设
左侧工具栏铅笔、形状、填充、渐变、文字、选区、吸管、颜色对、调色板
中央画布,带当前工具和颜色的小型读出区,以及一个 1:1 的Preview
右侧Layers,然后是 EffectsNormal mapReferenceModes
底部时间轴,然后是调色板栏
状态栏画布尺寸、当前图层、缩放

你可以做什么#

绘制#

工作缩放下的像素画布,带网格

Space + 拖动可以平移,滚轮缩放,0 重置视图。画笔有尺寸和形状(默认为 方形),以及不透明度。Preview面板会在你放大工作时,以 1:1 显示精灵图, 这是唯一能诚实呈现一张像素精灵图的视图。

图层#

命名、可重新排序,各自带有混合模式和不透明度,外加颜色标签和一个在图层 很多时用来筛选的搜索框。Effects以非破坏性的方式应用。

制作动画#

底部的timeline是一条帧的长条。可以添加、复制、删除、重新排序;为每一 帧设置以毫秒为单位的时长;正向、反向或来回播放。读出区会告诉你这些 加起来是多少,例如 1 frame • 100 ms • ~10 fps

Onion(洋葱皮)会把相邻的帧淡淡地显示在当前帧下面,这正是防止一个走 路循环走着走着就跑偏的办法。

颜色#

Pixel 工具栏:绘图工具和当前颜色

调色板栏:工作调色板、最近使用、明暗、和谐色和一条色阶

调色板栏是值得花时间学习的部分:

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 XMirror 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

向其他模块发送内容#

产出 像素画。接受 像素画和图片。

像素画被 InkwellComposerAnimatorMatterEngine 接受:一张精灵图集可以直接进入游戏,不需要 先绕道经过一个文件。

与他人协作#

Pixel Editor 按逐个操作同步:场景数据、素材、动画和脚本。

局限与常见问题#

  • 缩放不是分辨率。 状态栏显示真实的画布尺寸;Preview以 1:1 显示它。
  • 一支柔边画笔不是像素画笔。 不透明度低于 100% 会给边缘做抗锯齿处理, 这通常不是你在一张精灵图上想要的效果。
  • 帧时长是按帧设置的,不是按整段动画设置的。一个 12 帧、每帧 100 毫秒 的循环,跑起来大约是 10 fps,不管别的帧怎么设置。