首页/新闻资讯/正文详情

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

发布时间:2026/11/3 10:19:34 来源:云帆数科 栏目:资讯中心
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),仅供参考

相关推荐

OInt CLI深度手册:参数类型、二进制输出与脚本自动化技巧完整指南
OInt CLI深度手册:参数类型、二进制输出与脚本自动化技巧完整指南

【免费下载链接】OpenIntegrations Набор инструментов интеграции с популярными сервисами и технологиями для 1С:Предприятие, OneScript и CLIMCP (Telegram, VK, Bitrix24, Google, Янд… · 2026/11/3 10:19:34

【PMSM例程分享】(10)永磁同步电机(PMSM)基于EKF的转速与转子位置观测与控制
【PMSM例程分享】(10)永磁同步电机(PMSM)基于EKF的转速与转子位置观测与控制

原创代码,附下载链接。可联系我获取定制和讲解,请勿翻卖 文章目录程序简介算法与仿真设置结果分析程序特点运行结果命令行输出MATLAB源代码程序简介 本程序基于MATLAB搭建永磁同步电机(PMSM)仿真模型,采用扩展卡尔曼滤… · 2026/11/3 10:19:34

【计组】输入输出系统 I/O系统
【计组】输入输出系统 I/O系统

目录 1 基本概念 1.1 I/O系统演变过程 1.2 I/O系统基本组成 1.2.1 I/O软件 1.2.2 I/O硬件 1.3 I/O方式简介 2 外部设备 2.1 输入输出设备 2.2 外存储器 2.2.1 磁盘存储器(机械硬盘) 组成情况 性能指标 磁盘地址 硬盘的工作过程 磁盘阵列 … · 2026/11/3 10:19:34

Excel计量修约漏洞:用SWL函数实现国标GB/T 8170四舍六入逢五奇进偶舍
Excel计量修约漏洞:用SWL函数实现国标GB/T 8170四舍六入逢五奇进偶舍

简介:本资源是一份面向计量、质检及数据分析领域从业者的Excel高级数值处理技术文档,专门解决Excel原生函数无法实现“四舍六入、逢五奇进偶舍”(GB 8170—87修约规则)的实务难题。文档完整提供自定义VBA函数SWL(x, y)的原理说明、… · 2026/11/3 10:55:25

WebSphere MQ 核心原理:WAL日志与双状态机如何保障消息不丢
WebSphere MQ 核心原理:WAL日志与双状态机如何保障消息不丢

简介:本资源是一份面向中间件初学者与企业级Java/.NET开发者的IBM WebSphere MQ系统性入门教程,聚焦消息队列核心原理与生产环境落地能力培养。PDF文档共217页,结构清晰、内容扎实,完整覆盖中间件概念优势、WebSphere MQ的生产者-… · 2026/11/3 10:55:25

Hough-Contour瞳孔检测:精度99.8%、320×240单帧60ms
Hough-Contour瞳孔检测:精度99.8%、320×240单帧60ms

简介:围绕红外视频中的瞳孔精确检测,这份PDF文献提出Hough-Contour算法,将改进的Hough梯度法与轮廓匹配相结合,面向图像处理、计算机视觉方向的研究人员和工程师,也可供心理健康研究、犯罪侦查、医疗诊断等需要高精度瞳… · 2026/11/3 10:55:25

COMSOL一维瞬态导热:从建模到erfc解析解验证
COMSOL一维瞬态导热:从建模到erfc解析解验证

简介:这份文档围绕 COMSOL 求解一维热传导方程展开,面向已具备 PDE 与传热基础、希望用多物理场软件完成仿真闭环的工程人员与学习者。内容以固体传热物理场和瞬态研究为主线,依次说明几何区间 0 到 14 的建立、导热系数/密度/恒压热容取 1 的… · 2026/11/3 10:55:25

SpringBoot整合TrueLicense:内网离线授权与硬件指纹校验
SpringBoot整合TrueLicense:内网离线授权与硬件指纹校验

简介:《SpringBoot 整合 TrueLicense 实现 License 的授权与服务器许可》是一份面向 Java 后端开发者与架构师的实战型 PDF 文档,围绕客户内网部署场景下的软件授权、服务器许可校验与离线许可分发展开,适合需要保护知识产权、限制应用运行环… · 2026/11/3 10:55:25

Qt5.1.1与MinGW 4.8环境搭建:从安装到Hello World的完整指南
Qt5.1.1与MinGW 4.8环境搭建:从安装到Hello World的完整指南

简介:《C Qt5 范例开发大全》中文版面向希望系统掌握 Qt5 框架的 C 开发者,从零基础入门到有经验的程序员均可对照实践。内容以实例驱动,覆盖开发环境搭建与 Hello World 起步、窗体基类与窗口大小位置背景色控制、无边框窗体移动及多窗体调用… · 2026/11/3 10:54:24

双极步进电机控制实战:DRV8818PWPR与PIC18F86K22驱动调试
双极步进电机控制实战:DRV8818PWPR与PIC18F86K22驱动调试

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/2 13:10:28

STM32F207ZG + DRV8818PWPR 步进电机驱动实战解析
STM32F207ZG + DRV8818PWPR 步进电机驱动实战解析

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/3 6:04:24

DRV8818PWPR+dsPIC30F4013工业级双极步进电机控制方案
DRV8818PWPR+dsPIC30F4013工业级双极步进电机控制方案

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/3 5:52:46

STM32F411RE与MAX14431实现SPI隔离:工业现场抗共模干扰实战
STM32F411RE与MAX14431实现SPI隔离:工业现场抗共模干扰实战

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/3 1:01:59

ESP32+大模型AI硬件开发:从Demo到产品的8个工程问题
ESP32+大模型AI硬件开发:从Demo到产品的8个工程问题

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/3 1:01:59

基于MAX14431BAEE+与PIC18F85J10的SPI隔离方案设计与实践
基于MAX14431BAEE+与PIC18F85J10的SPI隔离方案设计与实践

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/3 1:01:59

双极步进电机控制实战:DRV8818PWPR与PIC18F86K22驱动调试
双极步进电机控制实战:DRV8818PWPR与PIC18F86K22驱动调试

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/2 13:10:28

STM32F207ZG + DRV8818PWPR 步进电机驱动实战解析
STM32F207ZG + DRV8818PWPR 步进电机驱动实战解析

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/3 6:04:24

DRV8818PWPR+dsPIC30F4013工业级双极步进电机控制方案
DRV8818PWPR+dsPIC30F4013工业级双极步进电机控制方案

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/3 5:52:46

了解更多?预约专属演示

我们的顾问将为您一对一讲解产品与方案

企业微信二维码