PixelCraft Pro 像素艺术工坊与精灵图动画编辑器

PixelCraft Pro · 像素艺术工坊与精灵图动画编辑器

项目简介

PixelCraft Pro 是一款面向游戏独立开发者、UI/像素设计师与复古艺术爱好者的纯前端像素艺术工坊与精灵图（Sprite Sheet）多帧动画编辑器。

无需安装庞大笨重的桌面设计软件，用户可直接在现代浏览器中享受毫秒级像素涂抹、经典调色盘自选、4 向泛洪填充（BFS Flood Fill）、直线与中点圆光栅化算法、多帧时间轴洋葱皮编辑以及复古 8-bit 原生声效反馈，并能一键导出高清单帧 PNG、横向拼版 Sprite Sheet 精灵表以及免图片资源的纯 CSS Box-Shadow 像素矩阵代码。

---

核心功能亮点

1. 多规格像素画板与高精度光标追踪

• 自由切换 16×16、24×24、32×32 经典复古网格规格。

• 毫秒级光标十字矩阵追踪，实时指示 X/Y 像素网格坐标。

• 内置中轴镜像对称（Symmetry Drawing）绘制辅助。

2. 专业级像素绘图工具矩阵

• 画笔 (Pen)：连续插值无断点像素涂抹。

• 橡皮擦 (Eraser)：精准清除像素 Alpha 通道。

• 油漆桶 (Bucket)：基于 BFS（广度优先搜索）算法的高效 4 向泛洪连通填充。

• 吸管 (Color Picker)：画布像素瞬时采样拾色。

• 几何光栅化 (Line & Circle)：经典 Bresenham 直线与中点圆算法。

• 高光加亮 (Lighten)：像素亮度智能增益。

3. 经典复古色盘与多预设图案

• 内置 PICO-8、Game Boy 经典4色、Cyberpunk 霓虹、Classic 16 色盘。

• 提供像素心、勇者剑、魔力药、金币旋转、幽灵漂浮、烈焰动画等经典图案一键载入。

4. 多帧动画时间轴与洋葱皮模式 (Timeline & Onion Skin)

• 自由增删、复制、重排动画帧序列。

• 124 FPS 循环动画实时播放引擎。

• 前帧半透明洋葱皮透视辅助，实现丝滑流畅的逐帧精灵图动画制作。

5. 多端工程代码生成与 Sprite Sheet 导出

• CSS Box-Shadow 代码生成：纯 CSS 渲染像素图标，免图片资源加载。

• JSON 帧矩阵数据：便于游戏引擎（Phaser / Godot / Unity）直接解析。

• Sprite Sheet Atlas：横向无缝排布多帧高保真精灵图一键导出。

6. Web Audio 原生 8-bit 声效合成

• 无需外挂音频文件，使用 Web Audio API OscillatorNode 实时合成方波/三角波操作反馈音效。

---

系统架构与工作流

架构模块说明

• 视图表现与交互层：提供 1632 网格视口、中轴镜像辅助与经典色盘选择器。

• 核心算法与图形引擎：驱动 Canvas 2D 像素缓冲、BFS 泛洪填充与几何光栅化。

• 动画时间轴与洋葱皮：多帧独立像素矩阵状态快照与 124 FPS 逐帧播放器。

• 资产编译与音效合成：Sprite Sheet 横向无缝拼接排版、CSS 矩阵生成与 Web Audio 8-bit 声效合成。

---

开源仓库与在线体验

• 代码仓库：https://gitcode.com/wdxb/pixelcraft-pro

• 使用方法：直接在浏览器中打开 index.html 即可开始体验！
• 项目地址：开发者作品展览馆 https://gallery.developer.huaweicloud.com/gallery/00-4471ff0ff3000