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

Piskel 完整指南3 步跑通免费 Web 像素画与精灵动画编辑器【免费下载链接】piskelA simple web-based tool for Spriting and Pixel art.项目地址: https://gitcode.com/gh_mirrors/pi/piskelPiskel 是一款开源Apache-2.0 协议的 Web 像素画与精灵图编辑器用纯 JavaScript、HTML 和 CSS 构建无需安装任何桌面软件。它同时承担两大任务一是提供画笔、图层层级、多帧动画等完整的像素创作工具链二是把成品一键导出为 GIF、PNG 精灵表、ZIP 帧序列甚至 C 语言数组直接喂给游戏引擎。接下来我们从功能全景、本地运行、绘制流程、导出选项、源码阅读五条主线走一遍这个项目的完整用法。Piskel 核心功能速览4 个模块覆盖像素创作全流程先建立整体认知Piskel 的能力可以拆成 4 个模块后面的操作都围绕它们展开。绘制工具15 个工具覆盖像素创作的全部动作——画笔快捷键 P、竖向镜像画笔V、油漆桶B、擦除E、描边L、矩形R、圆形C、取色O、加色U、抖动T、形状选择Z等还支持 1–4 像素的笔刷粗细调节。调色板系统最多 256 色见 src/js/Constants.js数字键 1–9 直接取色X 键交换主副色调色板模型源码在 src/js/model/Palette.js。图层与帧动画每个图层是一列帧帧之间用洋葱皮AltO对齐参考默认 32×32 画布、12 FPS画布最大支持 4096×4096。导入导出导入支持 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 startnpm start会先执行 sprite 图标生成和vite build再启动本地服务浏览器打开即可使用。若只想构建产物单独跑npm run build即可。两点环境须知浏览器支持最新版 Chrome、Firefox、EdgeBrave 需关闭 canvas 指纹功能。项目明确不支持移动端。依赖库GIF 编码走 gif.jsWeb Worker 加速ZIP 打包走 jszip取色器是 spectrum清单见 README.md。环境就绪后打开设置面板即可看到画布背景的明暗与透明度选项右侧竖排图标依次是偏好设置、缩放、保存、导出、导入下图即设置页中浅色系画布背景的实时效果工具栏入口与图层的代码组织方式我们放到最后读源码时再看。现在进入真正的绘制环节。从空白画布到第一组动画5 步绘制像素精灵这一章演示一条最小完整流程配色 → 绘制 → 描边 → 加帧 → 检查。建帧与配色新建画布默认 32×32。用 AltP 打开调色板创建弹窗或点右侧调色板区新建一个调色板选中某色后按数字键快速切换。主体绘制按 P 切画笔勾勒轮廓按 B 用油漆桶填大面积色块。右侧工具区的工具按钮由 src/js/tools/ToolIconBuilder.js 动态生成悬停可看各工具说明。修边与对齐描边工具L可补齐锯齿边绘制重复元素时用竖向镜像画笔V一次画两侧。快捷键全表按 ? 键随时调出对应 src/templates/dialogs/cheatsheet.html。加帧做动画N 新建一帧ShiftN 复制当前帧再改细节AltO 开启洋葱皮上一帧以半透明叠在当前画布上对齐动作轨迹。做无缝平铺纹理时偏好的无缝模式会在画布四周显示接缝参考效果如下图预览检查预览窗口支持 Alt1原始尺寸、Alt2最佳尺寸、Alt3全尺寸三档预览控制器在 src/js/controller/preview/。到这里你手上已经有一个带帧动画的 .piskel 工程下一步就是把它变成可用的素材文件。导出选项清单GIF、PNG、ZIP、C 文件 4 种输出怎么选这一章回答成品交给谁、选什么格式。打开右侧导出面板4 个标签页对应 4 类消费场景模板源码在 src/templates/settings/export/格式适用场景关键选项GIF网页动图、表情循环播放开关超过 256 色会提示无法保留原始颜色或透明度PNG游戏引擎精灵表行列布局、单帧导出、data-uri 直出、PixiJS 格式精灵表 JSON 元数据ZIP逐帧 PNG 序列自定义文件名前缀、按图层拆分、以图层名命名Others嵌入式开发导出 C 文件每帧渲染为数组导出前先拖滑块设置 Scale1–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 里保持主线程流畅。两个进阶玩法桌面版打包npm run build:mac基于 nw.js 输出 macOS 应用package.json 里有build:desktop和build:mac两个入口。测试体系单元测试用 Karmanpm run unit-tests端到端测试用 Playwrightnpm run e2e绘制行为的录制回放机制在 tests/e2e/data/drawing/tests/ 下有 30 多个真实用例可参考。项目接受小型、直接的 PR文档修正、错别字、小 bug大型重构和新功能暂不合并规则见 README.md 的 Contributing 章节。从画一只 16×16 的小怪物到把导出管线接进 CIPiskel 覆盖的是像素资产生产的完整闭环——这正是它比在线小工具走得远的原因。【免费下载链接】piskelA simple web-based tool for Spriting and Pixel art.项目地址: https://gitcode.com/gh_mirrors/pi/piskel创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考