在网格上画像素画、制作逐帧动画，并导出 PNG、GIF 或代码。
最后更新
Coddy 让你在浏览器里编写真实代码来学习：互动课程、即时反馈，卡住时还有 AI 帮忙。
像素画制作工具是一种围绕固定网格设计的绘图工具：你不是随手画线，而是一格一格地放置单个像素。这种限制正是像素画的魅力所在，游戏角色精灵、复古图标、头像和 8-bit 风格插画，都是靠精心选择每一个像素画出来的。
这个编辑器提供了经典精灵编辑器的全套工具：铅笔、橡皮擦、油漆桶填充和取色器，网格从 8x8 到 64x64，还支持带实时预览的逐帧动画。你可以把成品导出为任意尺寸的清晰 PNG、动态 GIF，或者直接给游戏引擎用的精灵图。
因为这是 Coddy，所以你的画同时也是代码。点一下，网格就能变成 Python 二维数组、JavaScript canvas 代码片段、CSS box-shadow 像素画、SVG，或者能用电子表格打开的 CSV。这是一种很有趣的方式，让你看清图像其实就是一组颜色值组成的数组。
从小网格开始：16x16 或 32x32。小网格会逼你画出简单、易认的形状，大多数经典游戏精灵都是 16x16 或 32x32。之后切换尺寸也不会丢失你的画。
用铅笔画轮廓线，用填充工具涂大块区域。先用一种颜色画出整体形状，再添加细节。右键（或橡皮擦）可以清除一个像素。
每种材质选 2 到 3 个色阶：一个基础色、一个高光色和一个阴影色。内置调色板的排列方式让这些色阶很容易找到，取色器则可以吸取画布上已有的任何颜色。
复制当前帧，稍微挪动几个像素，然后按播放。两三帧就足够做出眨眼、弹跳或火苗闪烁的效果。
下载最高 32 倍放大的 PNG、动态 GIF，或者所有帧排成一行的精灵图。也可以打开代码面板，把你的作品复制为 Python、JavaScript、CSS、SVG 或 CSV。
常用的画布尺寸和导出格式，以及各自适合的场景。
| 选项 | 最适合 | 说明 |
|---|---|---|
| 16x16 网格 | 图标、网站图标、迷你精灵 | 经典精灵尺寸，每个像素都很关键 |
| 32x32 网格 | 游戏角色、头像 | 细节和工作量之间的最佳平衡点 |
| 64x64 网格 | 细节丰富的场景、肖像 | 先规划好轮廓，4,096 个像素填起来很慢 |
| PNG 导出 | 头像、贴纸、素材 | 放大 16 倍或以上，像素才能保持锐利 |
| GIF 导出 | 用于聊天和网页的动画 | 使用你设置的 FPS；支持透明背景 |
| 精灵图 | 游戏引擎 | 所有帧并排放在一张 PNG 里 |
| 代码导出 | 学习、生成艺术 | Python、JavaScript、CSS、SVG 或 CSV |
PIXELS = [ [None, "#e43b44", "#e43b44", None], ["#e43b44", "#a22633", "#a22633", "#e43b44"], [None, "#e43b44", "#a22633", None], [None, None, "#e43b44", None],]
for row in PIXELS: print("".join("█" if c else " " for c in row))代码导出会把每个像素写成嵌套列表里的一个十六进制颜色，并附带一段 Pillow 代码，把它重新渲染成 PNG。这个迷你版本会在终端里打印出图形，证明图像不过就是一个二维数组。
.pixel-art { --px: 12px; width: var(--px); height: var(--px); box-shadow: calc(1 * var(--px)) 0 0 0 #e43b44, calc(2 * var(--px)) 0 0 0 #e43b44, calc(1 * var(--px)) calc(1 * var(--px)) 0 0 #a22633;}CSS 导出会把每个像素变成同一个 div 的一个 box-shadow 偏移，这是一个经典的前端技巧。把它粘贴到任何页面里，修改 --px 就能缩放整幅作品。
,#e43b44,#e43b44, #e43b44,#a22633,#a22633,#e43b44 ,#e43b44,#e43b44, ,,#e43b44,
CSV 导出会在每个单元格里放一个十六进制颜色代码。用 Google Sheets 或 Excel 打开，把列宽缩成正方形，再添加一条按单元格的值着色的条件格式规则，电子表格像素画就完成了。
像素画是一种在小网格上逐个像素构建图像的数字艺术，每一个方块都是刻意放置的。它是经典电子游戏的视觉风格，至今依然随处可见：独立游戏、头像、图标，以及 NFT 时代的头像图片。
从 16x16 的网格和 3 到 4 种颜色开始。先画出一个简单物体的轮廓，比如一颗心、一个蘑菇、一把剑，然后加上一个高光色和一个阴影色。内置的模板可以给你一个起始形状，你可以重新上色和修改。简单的像素画讲究的是干净的形状，而不是细节。
16x16 和 32x32 是经典的精灵尺寸，也是最适合入门的尺寸；32x32 的像素画适合大多数游戏角色和头像。只有在确实需要细节时才用 64x64。导出时放大 16 倍或 32 倍，像素在显示尺寸下才能保持锐利。
用“复制帧”按钮添加第二帧，改动几个像素（让眼睛眨一下、让火苗动一下），设置 FPS，然后按“播放”预览。“下载 GIF”会导出一个带透明背景、循环播放的动态 GIF，可以直接用在聊天应用、Discord 或网站上。
精灵图（sprite sheet）是把所有动画帧并排放在一起的一张图片。Unity、Godot 和 Phaser 等游戏引擎只需加载一次这张图，再通过移动视口来播放各帧。精灵图导出会把你的帧按统一的格子大小排成一行。
可以。画出每一个动画帧，用你游戏的帧率预览循环效果，然后导出一张透明背景的精灵图 PNG。SVG 和 PNG 导出也适用于界面图标和图块集。
它涵盖了和 Piskel 相同的核心流程：网格绘图、逐帧动画、GIF 和精灵图导出，完全在浏览器中运行，无需安装任何东西，还额外提供代码导出。如果你想找一个简单、持续维护的在线精灵编辑器，它正是为此而做的。
这是一个经典的课堂小技巧：把电子表格的单元格缩成正方形，再给它们涂色，拼成一幅图。CSV 导出会在每个单元格里放一个十六进制颜色代码，所以只需在 Google Sheets 或 Excel 里加一条条件格式规则，就能用彩色单元格还原你的画。
打开代码面板，选择一种格式。Python 会给你一个二维列表和一个 Pillow 渲染器，JavaScript 会把它画在 canvas 上，CSS 会把它渲染成单个 div 的 box-shadow 像素画，SVG 会生成清晰的矢量矩形，CSV 则可以导入电子表格。数组格式是初步了解图像在代码中如何表示的好方法。
免费，无需注册，没有水印。一切都在你的浏览器中本地运行：你的作品会自动保存在你的设备上，绝不会上传到服务器。
