SpriteLab

像素动作工坊
MyWeb
YOUR LITTLE WORLD32 × 32
一格像素,一个小世界。 在画布上改一笔,再去右边看看它动起来。
浏览器需支持 Canvas。你也可以在支持 Canvas 的现代浏览器中打开此站。
X — · Y —32 × 32 · 第 1 帧
1600%
ANIMATION
ms
START SOMETHING SMALL

从一个小动作开始

先画,再试。可编辑示例让你更快找到感觉。

一张空白画布

透明底,从第一格像素开始。

新建会替换当前本机草稿。需要保留时,先点击「保存项目」下载源文件。

导入 PNG 精灵图

按规则网格从左到右、从上到下切帧。原图不会被缩放或裁切。

MADE BY YOU

带走你的作品

导出仅包含你的作品,不含棋盘格、网格或洋葱皮。

调整画布尺寸

所有动作、所有帧一起调整,居中保留像素。缩小会裁掉边缘,可立即撤销。

A LITTLE PRACTICE GOES A LONG WAY

亲手,让它动起来

  1. 先改一笔

    选颜色,在大画布绘制。画笔会连接拖动轨迹,橡皮擦回透明。触屏可直接画;放大后可在画布周围滚动查看。

  2. 再复制一帧

    复制当前帧,改一点姿势。洋葱皮用淡色显示前后帧,便于对齐。每帧停留时间可以不同。

  3. 在舞台里试试

    切到「小舞台试跑」,方向键或 A / D 移动,空格跳跃,也可使用屏幕按钮。舞台用于检查节奏,不代表游戏引擎的物理效果。

  4. 保存可编辑的作品

    自动保存只属于当前浏览器。点「保存项目」下载源文件,可备份、换设备或发给别人。新建或导入前,请先保存需要保留的作品。

快捷键

B画笔E橡皮G填充I取色L直线R矩形M选区V移动D复制帧Esc清除选区Ctrl / ⌘ Z撤销Ctrl / ⌘ Shift Z重做

选区与图层

框选后切「移动」拖动;选区外透明像素不会盖掉目标。按 Delete 清除选区。未选区时移动和翻转作用于当前图层。图层设置在全部动作中共用,每一帧独立保存像素。

制作与许可

SpriteLab 由 4c 制作。内置角色、场景与调色板为本项目原创示例,可自由修改并用于你的作品。ZIP 打包使用 MIT 许可的 fflate;查看许可。本站不上传作品,也不提供云端同步。

替换当前草稿?

当前作品会被替换。可先下载项目保留副本。