MakeBead

~ 免费像素精灵编辑器 ~

像素动画 · 精灵制作工具

一格一格画出像素精灵,添加帧,边画边播放像素动画,上一帧会淡淡显示在下面。下载循环 GIF,或 Godot、Unity、GameMaker 按帧尺寸切分的精灵图。免费,在浏览器里完成,无需账号。

8 fps

当前颜色

#000000 · Black

模板

点击模板即可加载到上方设计器。

怎样制作像素动画精灵

1

选择画布尺寸

点开尺寸按钮,选择 16×16、32×32、48×48 或 64×64,或者拖动滑块,把每边设成 4 到 100 像素之间的任意尺寸。画布默认 32×32,背景透明(以棋盘格显示)。

2

画第一帧

在 256 色像素调色板上使用画笔、填充、橡皮擦和取色器,也可以输入任意十六进制色值,或载入 Lospec 调色板。当前颜色旁边的明暗按钮会给出同一色相深一级和浅一级的颜色——像素精灵的明暗就是这样一级一级做出来的。

3

添加帧,做成动画

"复制帧"会复制当前这一帧,下一个动作只需要改动会动的那些像素。"新建帧"从空白开始。预览按你设定的速度依次播放各帧,洋葱皮把上一帧淡淡地显示在下面。

4

导出 GIF 或精灵图

"导出动画"可以下载 1×、2×、4× 或 8× 的循环 GIF,或者把各帧排成一行或网格的精灵图 PNG。每个像素都保持清晰的正方形,空像素保持透明。

这个工具能做什么

最多 32 帧

在画布上方的帧条里添加、复制、删除帧和调整顺序。按逗号(,)和句号(.)键切换到上一帧、下一帧;撤销既能撤销绘画,也能撤销帧的改动。

洋葱皮

上一帧会以较低的不透明度从当前帧的空白像素里透出来,每个姿势都能对着上一个姿势来画。想单独看一帧时可以关掉。

1–24 fps 实时预览

帧条旁边的小预览窗在你编辑时持续播放动画。改变速度后,预览、GIF 和保存的精灵都会使用新的速度。

导出 GIF 和精灵图

循环播放的动画 GIF 方便分享,PNG 精灵图用于游戏引擎;帧与帧之间没有空隙,按帧尺寸就能干净地切开。单独一帧仍可按"1 格 = 1 像素"精确导出。

真正的像素编辑器

可移动、翻转、旋转的矩形选区和套索选区,跨帧复制粘贴,区域擦除,替换颜色,可描摹的参考图,以及 50 步撤销。

边画边保存

你的精灵会在画的同时保存在这个浏览器里。保存到账号后可以在其他设备上打开,也可以复制图案代码——里面包含所有帧和播放速度。

做出在游戏画面里清楚可辨的像素精灵

先定尺寸,再按这个尺寸画

精灵的画布不是一张以后再缩小的图:你选的尺寸就是玩家看到的分辨率。16×16 的角色只剩轮廓和两个像素的眼睛,所以这个尺寸适合道具、图标和小个子主角。32×32 有空间画出脸、能看出来的手和一组明暗层次。64×64 已经接近插画,每一帧动画要画的像素是 32×32 的四倍。

尺寸应该按游戏里其他精灵来定,而不是按你想画多少细节来定。16 像素网格的瓦片素材,配 16 或 32 像素高的角色最合适。如果精灵需要变大,尺寸面板可以让画面贴着你选的边或角扩展,所有帧都按同样的方式调整,动画不会错位。

颜色越少,精灵越有力

大多数好的像素精灵只用四到十六种颜色。调色板小,每种颜色就都有自己的任务:轮廓、底色、一两层阴影、一个高光。选好底色后,用旁边的"更暗""更亮"按钮做出一组色阶;阴影里色相稍微往蓝偏,高光里稍微往黄偏,看起来就是光,而不是灰。

轮廓线能让精灵在任何背景上都和背景分开。小精灵用一圈深色的完整轮廓最稳妥;大一些的精灵,让轮廓跟随它所包住部分的颜色(选择性描边)会显得更柔和。避免把每个形状都从边缘往里一圈圈地加阴影("枕头式阴影"),那会让形体变平。光从一侧来,阴影落在另一侧。

做动画:帧、节奏和洋葱皮

游戏动画大多是短循环。待机的呼吸或上下晃动,两到四帧、每秒四到六帧就够了。走路循环通常是四到八帧、每秒八到十二帧:两个脚踩到地面的接触姿势,加上中间的过渡姿势。攻击或受击,用一帧较慢的预备动作、一两帧很快的动作帧,再加一个停住的姿势,最能表达力度。

先画关键姿势,再补中间的帧。"复制帧"就是为此准备的:复制当前帧,只改会动的像素,身体就不会一帧一帧地抖动。打开洋葱皮后,上一帧会淡淡地透在空白像素下面,手臂只要挪一两个像素,不用重画。想让某个姿势停得久一些,就把那一帧复制一份——GIF 里每一帧的播放时间都相同。

用游戏里实际的速度看预览。慢放时很流畅的动作,全速播放时往往一顿一顿的;解决办法几乎总是减少帧与帧之间变化的像素,而不是增加帧数。

精灵图和游戏引擎

精灵图(Sprite Sheet)就是把动画的每一帧排在同一张图上。本工具导出的精灵图,帧与帧之间没有边距也没有空隙,任何引擎都只需要按帧尺寸就能切分:一个 8 帧的 32×32 精灵,导出为 256×32 的一行,或最后一格空着的 3×3 网格。

给引擎用时按 1× 导出,放大交给引擎。在 Godot 里把纹理过滤设为 Nearest,像素才会保持锐利。在 Unity 里把 Filter Mode 设为 Point (no filter),关闭压缩,并让 Pixels Per Unit 等于精灵尺寸。在 GameMaker 里导入这一行图并填上帧数。透明像素导入后仍是透明的,精灵可以放在任何背景上。

分享就用 GIF

原尺寸的 32×32 GIF 比缩略图还小,而大多数网站放大小图时会把它糊掉。改用 4× 或 8× 导出:每个像素变成 4×4 或 8×8 的同色色块,GIF 对这种连续的同色压缩得很好,文件依然很小。

GIF 的透明其实是把一种颜色设成"不显示",所以有些聊天软件和社交平台会把它显示成黑色或白色。如果要发到无法控制背景的地方,就用白色背景导出。

常用的精灵尺寸

像素画师最常用的几个尺寸,以及每个尺寸能装下什么。这里每边 4 到 100 像素的任意尺寸都可以用,宽和高也不必相同。

尺寸常见用途
8×8很小的道具、粒子、子弹和像素字体。
16×16道具、图标、瓦片和小角色:两个像素的眼睛也能认出来的轮廓。
24×24脸部稍有余地的角色,用于 24 像素瓦片网格的游戏。
32×32有表情、有手、有明暗层次的玩家角色和敌人;主角最常用的尺寸。
48×48更大的角色和细致的道具,或需要挥舞武器空间的 32 像素角色。
64×64Boss、头像立绘和特写角色;每一帧的工作量是 32×32 的四倍。

常见问题

这个像素动画工具免费吗?需要注册账号吗?

免费。画图、做动画和所有下载都不需要账号。你的精灵会在画的同时保存在这个浏览器里。只有想保存到"我的图案"并在其他设备上打开时,才需要账号。

一个动画最多能有几帧?

最多 32 帧,每一帧都和画布一样大,长一些的走路循环或攻击动作都绰绰有余。播放速度为每秒 1 到 24 帧。

怎样把精灵做成动图 GIF?

用"复制帧"或"新建帧"加一个第二帧,画出变化的部分,然后点帧条里的"导出动画"。选择 GIF、倍数(分享建议 4× 或 8×)和透明或白色背景,再点"下载"。GIF 会按预览里的速度无限循环播放。

精灵图怎样在 Godot 或 Unity 里使用?

按 1× 导出精灵图。各帧紧挨着排列、没有边距,按"导出动画"按钮下方显示的帧尺寸切分即可。Godot 里使用 SpriteFrames 资源或 AnimatedSprite2D,并把纹理过滤设为 Nearest;Unity 里把纹理类型设为 Sprite (Multiple),在 Sprite Editor 中按单元格尺寸切分,Filter Mode 设为 Point (no filter)。

可以用自己的调色板吗?

可以。在颜色搜索框里输入任意十六进制色值就能直接用这个颜色画;常用的颜色可以存进"我的颜色";粘贴 Lospec 调色板的名称就能载入那套调色板。载入调色板时,画面也会转换成这套调色板的颜色。

可以把一张图片变成精灵吗?

先用像素画转换器把图片转成你想要尺寸的像素网格,再在像素画编辑器里打开结果。编辑器的"帧"按钮提供同样的帧条、洋葱皮和 GIF 导出,转换出来的图也可以做成动画。

可以把精灵做成拼豆吗?

可以,一个像素就是一颗豆。29×29 的精灵正好放满一块 Perler 大号方形豆板。可以从侧边栏的"导出"把某一帧导出为可打印的图纸 PDF,或者在拼豆设计器里打开图案,按颜色统计豆子数量。

更多像素画工具

发送反馈

发现了 bug、功能缺失,或者只是想打个招呼?我们阅读每一条消息。

或直接发邮件: contact@makebead.com