怎样制作像素动画精灵
选择画布尺寸
点开尺寸按钮,选择 16×16、32×32、48×48 或 64×64,或者拖动滑块,把每边设成 4 到 100 像素之间的任意尺寸。画布默认 32×32,背景透明(以棋盘格显示)。
画第一帧
在 256 色像素调色板上使用画笔、填充、橡皮擦和取色器,也可以输入任意十六进制色值,或载入 Lospec 调色板。当前颜色旁边的明暗按钮会给出同一色相深一级和浅一级的颜色——像素精灵的明暗就是这样一级一级做出来的。
添加帧,做成动画
"复制帧"会复制当前这一帧,下一个动作只需要改动会动的那些像素。"新建帧"从空白开始。预览按你设定的速度依次播放各帧,洋葱皮把上一帧淡淡地显示在下面。
导出 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×64 | Boss、头像立绘和特写角色;每一帧的工作量是 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,或者在拼豆设计器里打开图案,按颜色统计豆子数量。