企业官网建设流程全解析

Piskel 完整指南：3 步跑通免费 Web 像素画与精灵动画编辑器

【免费下载链接】piskelA simple web-based tool for Spriting and Pixel art.项目地址: https://gitcode.com/gh_mirrors/pi/piskel

Piskel 是一款开源（Apache-2.0 协议）的 Web 像素画与精灵图编辑器，用纯 JavaScript、HTML 和 CSS 构建，无需安装任何桌面软件。它同时承担两大任务：一是提供画笔、图层层级、多帧动画等完整的像素创作工具链，二是把成品一键导出为 GIF、PNG 精灵表、ZIP 帧序列甚至 C 语言数组，直接喂给游戏引擎。接下来我们从功能全景、本地运行、绘制流程、导出选项、源码阅读五条主线，走一遍这个项目的完整用法。

Piskel 核心功能速览：4 个模块覆盖像素创作全流程

先建立整体认知：Piskel 的能力可以拆成 4 个模块，后面的操作都围绕它们展开。

1. 绘制工具：15 个工具覆盖像素创作的全部动作——画笔（快捷键 P）、竖向镜像画笔（V）、油漆桶（B）、擦除（E）、描边（L）、矩形（R）、圆形（C）、取色（O）、加色（U）、抖动（T）、形状选择（Z）等，还支持 1–4 像素的笔刷粗细调节。
2. 调色板系统：最多 256 色（见 src/js/Constants.js），数字键 1–9 直接取色，X 键交换主副色，调色板模型源码在 src/js/model/Palette.js。
3. 图层与帧动画：每个图层是一列帧，帧之间用洋葱皮（Alt+O）对齐参考，默认 32×32 画布、12 FPS，画布最大支持 4096×4096。
4. 导入导出：导入支持 PNG、JPG、BMP、动图 GIF 和 .piskel 工程文件；导出支持 GIF、PNG 精灵表、ZIP 帧序列和 C 文件，导入向导源码见 src/js/controller/dialogs/importwizard/。

工具链的每个环节都能对上快捷键，熟练后几乎可以全程不碰鼠标。下面把编辑器跑起来，边操作边验证。

本地环境搭建：2 条命令启动像素编辑器

这一章解决"如何在自己电脑上打开它"。Piskel 用 Vite 构建，本地开发只需克隆加构建两条链路。

git clone https://gitcode.com/gh_mirrors/pi/piskel cd piskel && npm install && npm start

npm start会先执行 sprite 图标生成和vite build，再启动本地服务，浏览器打开即可使用。若只想构建产物，单独跑npm run build即可。

两点环境须知：

• 浏览器：支持最新版 Chrome、Firefox、Edge；Brave 需关闭 canvas 指纹功能。项目明确不支持移动端。
• 依赖库：GIF 编码走 gif.js（Web Worker 加速），ZIP 打包走 jszip，取色器是 spectrum，清单见 README.md。

环境就绪后，打开设置面板即可看到画布背景的明暗与透明度选项，右侧竖排图标依次是偏好设置、缩放、保存、导出、导入，下图即设置页中浅色系画布背景的实时效果：

工具栏入口与图层的代码组织方式，我们放到最后读源码时再看。现在进入真正的绘制环节。

从空白画布到第一组动画：5 步绘制像素精灵

这一章演示一条最小完整流程：配色 → 绘制 → 描边 → 加帧 → 检查。

1. 建帧与配色：新建画布默认 32×32。用 Alt+P 打开调色板创建弹窗，或点右侧调色板区新建一个调色板；选中某色后按数字键快速切换。
2. 主体绘制：按 P 切画笔勾勒轮廓，按 B 用油漆桶填大面积色块。右侧工具区的工具按钮由 src/js/tools/ToolIconBuilder.js 动态生成，悬停可看各工具说明。
3. 修边与对齐：描边工具（L）可补齐锯齿边；绘制重复元素时用竖向镜像画笔（V）一次画两侧。快捷键全表按 ? 键随时调出，对应 src/templates/dialogs/cheatsheet.html。
4. 加帧做动画：N 新建一帧，Shift+N 复制当前帧再改细节；Alt+O 开启洋葱皮，上一帧以半透明叠在当前画布上，对齐动作轨迹。做无缝平铺纹理时，偏好的无缝模式会在画布四周显示接缝参考，效果如下图：

5. 预览检查：预览窗口支持 Alt+1（原始尺寸）、Alt+2（最佳尺寸）、Alt+3（全尺寸）三档；预览控制器在 src/js/controller/preview/。

到这里你手上已经有一个带帧动画的 .piskel 工程，下一步就是把它变成可用的素材文件。

导出选项清单：GIF、PNG、ZIP、C 文件 4 种输出怎么选

这一章回答"成品交给谁、选什么格式"。打开右侧导出面板，4 个标签页对应 4 类消费场景，模板源码在 src/templates/settings/export/：

导出前先拖滑块设置 Scale（1–32 倍缩放）或手动改分辨率。批量处理时不用开界面，项目自带 CLI：在仓库内安装后执行

piskel-cli monster.piskel --scale 5 --columns 1 --frame 0

常用参数包括--scale、--columns、--rows、--frame、--crop、--dest，完整清单在 cli/README.md。CLI 让 Piskel 从交互工具升级为素材生产管线的一环，比如接进 CI 自动出图。

格式选对了，素材就到手了。想改它、加功能，就需要看懂代码怎么组织的。

深入路径：源码目录地图与 2 个进阶玩法

这一章给准备读源码或二次开发的人一张导航图。Piskel 没有框架黑魔法，目录即架构，全部业务代码在 src/js/ 下：

• model/：核心数据模型，src/js/model/Piskel.js 管图层与帧，src/js/model/Layer.js、src/js/model/Frame.js、src/js/model/Palette.js 各司其职。
• controller/：UI 状态到模型的双向绑定，如 src/js/controller/FramesListController.js 驱动帧列表。
• service/：服务层，调色板导入/排序在 src/js/service/palette/（支持 GPL、PAL、TXT、图片取色 4 种格式读取），快捷键在 src/js/service/keyboard/Shortcuts.js。
• rendering/：Canvas 渲染与洋葱皮、帧表渲染，src/js/rendering/OnionSkinRenderer.js 值得一读。
• worker/：帧取色与图像哈希跑在 Web Worker 里，保持主线程流畅。

两个进阶玩法：

1. 桌面版打包：npm run build:mac基于 nw.js 输出 macOS 应用，package.json 里有build:desktop和build:mac两个入口。
2. 测试体系：单元测试用 Karma（npm run unit-tests），端到端测试用 Playwright（npm run e2e），绘制行为的录制回放机制在 tests/e2e/data/drawing/tests/ 下有 30 多个真实用例可参考。

项目接受小型、直接的 PR（文档修正、错别字、小 bug），大型重构和新功能暂不合并，规则见 README.md 的 Contributing 章节。从画一只 16×16 的小怪物，到把导出管线接进 CI，Piskel 覆盖的是像素资产生产的完整闭环——这正是它比"在线小工具"走得远的原因。

【免费下载链接】piskelA simple web-based tool for Spriting and Pixel art.项目地址: https://gitcode.com/gh_mirrors/pi/piskel