像素画编辑器

关于星之谣像素画编辑器

像素画（Pixel Art）是一种以单个像素为基本单元的数字艺术形式，起源于 8 位/16 位游戏时代的游戏美术。随着复古游戏风潮和独立游戏的兴起，像素画重新成为流行的艺术风格。本编辑器基于 LeaferJS 矢量渲染引擎，将每个像素映射为场景图中的 Rect 节点，提供专业级像素画绘制体验。

玩法详解

1. 选择画布尺寸

提供四档画布：16×16、32×32、48×48、64×64。16×16 适合做小图标、emoji 表情、简单角色；32×32 适合做游戏精灵；48×48 与 64×64 适合做精细角色、场景插画——配合行合并渲染引擎，大画布也能流畅绘制与逐帧动画。

2. 工具栏使用

• 画笔（✏️）：点击或拖拽绘制像素，使用当前选中的颜色
• 橡皮（🧽）：清除像素，使其变为透明
• 吸管（💧）：取画布上已有像素的颜色作为当前颜色
• 填充（🪣）：油漆桶工具，点击某个区域会将所有相邻同色像素全部改为当前颜色
• 选区（🔲）：框选一块区域后可直接拖动移动、Delete 删除重画、Ctrl+C/V 复制粘贴，还能把画好的眼睛等局部复制到其他帧微调——做角色动画的必备工作流
• 悬停十字辅助：鼠标移到画布上时，当前行和列会以淡紫色十字高亮，画布下方实时显示「第几行 · 第几格 · 行连续 N 格 · 列连续 N 格」——画横线、竖线时不用再眯着眼睛数格子
• 对称绘制：调色板上方可切换 ⇄ 左右镜像 / ⇅ 上下镜像 / ⊕ 中心对称，画动漫角色的对称脸、对称眼睛只需画一半，另一半自动生成
• 右键临时橡皮：画的时候按住右键直接擦除，松开自动回到画笔，不用来回切工具
• Shift 拉直线：拖动中按住 Shift，从上一落笔点拉一条可实时预览的直线，松手落定——画地平线、剑、围栏的利器

3. 调色板与实际大小预览

预设 16 色调色板参考 PICO-8 经典配色，涵盖黑白灰、红橙黄绿青蓝紫粉等基础色相。点击调色板下方圆形按钮可使用浏览器原生颜色选择器自定义任意颜色。最近使用的 8 种颜色会自动记录，方便快速切换。调色板顶部的「实际大小」小图始终以 1:1 显示当前画作——放大格子画细节时容易失真，瞟一眼它就知道最终效果。

4. 撤销重做与快捷键

每次完成一笔绘制（pointerUp 后）自动保存快照，最多保留 20 步历史。支持 Ctrl+Z 撤销、Ctrl+Y 或 Ctrl+Shift+Z 重做。工具切换快捷键：B 画笔、E 橡皮、I 吸管、G 填充。

5. 导出 PNG

选择放大倍数（1x / 4x / 8x），点击"导出 PNG"按钮即可下载。导出图片为透明背景，可直接用于游戏开发、网页图标、社交分享。文件名自动带日期和尺寸标识，例如 pixelart_16x16_8x_20260719.png。

6. 翻转与旋转

工具栏提供 ↔ 水平翻转、↕ 垂直翻转、⟳ 顺时针旋转 90° 三种变换操作，方便快速制作镜像素材或旋转方向。每次变换自动记录到撤销历史，可 Ctrl+Z 回退。

7. 帧动画、洋葱皮与 GIF 导出

底部帧管理面板支持添加空白帧、复制当前帧、删除帧，点击帧缩略图可切换编辑。开启洋葱皮（🧅 或按 O）后，画布会半透明显示上一帧和下一帧的轮廓，照着参考画中间帧，走路循环、眨眼动画轻松对位。每帧可独立设置时长（50ms 到 1 秒），比如让角色眨眼前定格一下再眨，节奏感立刻出来。满意后点击"导出 GIF"生成循环播放动图，采用全局调色板优化、逐帧时长还原，帧间颜色无闪烁。发小红书、抖音等平台建议用"导出 WebM"——视频格式在这些平台兼容性更好（Safari 浏览器会自动降级为 MP4）；动画不足 3 秒时自动录制 2 个循环。

8. 自动保存

作品会自动保存到浏览器 localStorage，刷新页面或意外关闭后再次打开可恢复之前的画作和所有帧。更换浏览器或清除缓存后数据会丢失，重要作品请及时导出 PNG 或 GIF。

使用场景

• 独立游戏开发：制作角色精灵、道具图标、场景元素
• 网页与 App 设计：favicon、UI 图标、loading 动画帧
• 社交内容创作：朋友圈像素风头像、emoji 表情包
• 教学与娱乐：像素画入门练习、儿童美术启蒙
• 复古美术设计：8 位风格海报、复古风品牌物料

适合人群

• 像素画爱好者和艺术家
• 独立游戏开发者和游戏美术
• UI/UX 设计师、网页设计师
• 社交媒体内容创作者
• 学生和美术初学者
• 复古游戏爱好者

技术特色

本编辑器技术亮点：

• 基于 LeaferJS 2.x 矢量渲染引擎，四层场景图（洋葱皮 / 像素 / 网格 / 选区）互不干扰
• 行合并渲染（run-length）：横向连续同色像素合并为单个 Rect 节点，典型画面节点数降低 60–80%，64×64 大画布依然流畅
• 脏行增量更新：单格绘制只重建所在行，撤销/重做/切帧走全量行合并渲染
• Bresenham 直线算法插值，画笔拖拽无跳格
• BFS 广度优先搜索实现油漆桶连通区域填充（索引指针代替 shift()，O(1) 出队）
• 像素数据数组快照实现撤销/重做，最多 20 步历史
• 选区引擎：框选/拖动/复制/跨帧粘贴共用一套数据搬运逻辑，越界自动拦截
• 对称绘制引擎：镜像点动态展开（最多 4 点同步写入），与 Bresenham 插值、Shift 直线、撤销快照天然兼容
• Shift 直线快照预览：拉线时先恢复笔画快照再绘制，方向随意调整不留扇形残影
• 全局调色板 GIF 编码：一次量化所有帧复用，避免帧间颜色闪烁；逐帧独立时长写入 GIF delay
• 离屏 Canvas 直接绘制导出，透明背景 PNG，1x/4x/8x 多倍放大
• localStorage 持久化：作品、帧数据与帧时长自动存储，刷新不丢失
• 移动端响应式：按屏幕宽度自适应像素尺寸，最大画布也能完整显示
• 纯前端运行，零后端依赖，免登录直接使用