AI教程

使用 pxl 以代码创建像素艺术、精灵图集和 GIF

了解如何安装 pxl，使用其紧凑 DSL 定义像素艺术，生成 PNG 精灵图和精灵图集，在实时浏览器查看器中预览更改，并使用变体、动画、场景、光照和 AI 辅助工作流等高级功能。

AI我搜编辑部2026年10月15日阅读约 9 分钟

什么是 pxl？

pxl 是一款面向 Node.js、以代码为先的像素艺术工具。你可以在紧凑的 .px.js 或 .px.ts 文件中描述 artwork，然后使用其命令行界面生成 PNG 精灵图、带 JSON 元数据的精灵图集、动画 GIF，以及带像素网格的放大预览。

该项目要求 Node.js 22.18 或更高版本。它没有运行时依赖，从克隆的仓库中使用时也不需要单独的构建步骤。

每当你保存源文件时，它的实时浏览器查看器都会重新构建 artwork。它还可以按操作逐步重放已编辑的资源，因此无论是手动绘制还是使用 AI 智能体工作，都能轻松检查创作过程。

主要功能

紧凑调色板：将颜色分配给单字符键，并使用 Pico-8、Sweetie 16 和 Endesga 32 等内置调色板。
精灵图与变体：创建文本网格精灵图，镜像翻转、添加自动描边、旋转或翻转图像，并生成调色板替换变体。
绘图工具：使用矩形、直线、圆形、多边形、渐变、抖动、噪点、散点画笔、瓦片地图和内置像素字体。
精灵图集：导出带有 TexturePacker 风格 JSON 元数据的打包图像。
场景：将 artwork 组织到图层中，添加投影和光照图层，并将各个图层导出为 PNG 文件。
动画：将帧定义为基于基础精灵图的补丁，并导出条带图、JSON 标签和 GIF 文件。
可选光照：添加灯具、辉光和基于法线的浮雕效果。
实用诊断：错误信息包含文件、行、列、资源、图层和操作信息，并在适用时提供“你是不是想输入”提示。

安装并运行 pxl

选项 1：克隆仓库

克隆项目并进入其目录：

git clone https://github.com/crsolver/claude-pxl.git
cd claude-pxl

在克隆的仓库中，通过 node bin/pxl.js 调用 CLI。你可以立即在实时查看器中打开其中一个示例：

node bin/pxl.js serve examples/shop.px.js

在浏览器中打开 http://127.0.0.1:4321/。每当艺术文件保存时，查看器都会重新构建项目。

选项 2：使用 npx 运行

无需克隆仓库，即可直接从 GitHub 项目构建艺术文件：

npx github:crsolver/claude-pxl build art.px.js

在下面的命令中，pxl 表示克隆仓库中的 node bin/pxl.js，或 npx github:crsolver/claude-pxl。

创建你的第一个代码精灵图

创建名为 art.px.js 的文件，并添加以下代码：

pal({
  k: "#1b1630",
  g: "#8ccf63",
  G: "#4c8a44",
  w: "#fff6e0",
  r: "#e2585e",
  R: "#a63a4c"
})

sprite("slime", { mx: true, outline: "k" }, `
  ....ggg
  ..ggGGg
  .ggGwGg
  gggkwgg
  GGGGGGG`)

sprite("slime_red", {
  base: "slime",
  swap: { g: "r", G: "R" }
})

sheet("chars", ["slime*"], { pad: 1 })

理解示例

pal() 将单字符键映射到十六进制颜色。这些键随后可以直接用于精灵图网格。
sprite("slime", ...) 声明基础精灵图。
mx: true 选项会将提供的精灵图一半水平镜像。
outline: "k" 会使用分配给 k 的调色板颜色自动为精灵图描边。
第二个精灵图使用 base: "slime"，并将绿色替换为红色，从而无需复制网格即可生成重新着色的变体。
sheet() 会创建名为 chars 的精灵图集。slime* 模式会包含匹配的资源，而 pad: 1 会添加 1 个像素的内边距。

构建资源

在克隆的仓库中运行：

node bin/pxl.js build art.px.js

示例会生成如下文件：

out/sprites/slime.png
out/sprites/slime_red.png
out/chars.png
out/chars.json
out/_preview/*.png

精灵图文件包含原始单像素比例的 artwork。chars.png 和 chars.json 文件共同组成精灵图集及其 TexturePacker 风格元数据。out/_preview/ 目录包含带像素网格的放大预览。

使用实时查看器

为艺术文件启动开发服务器：

node bin/pxl.js serve art.px.js

默认情况下，查看器可通过端口 4321 访问。每次保存都会触发重新构建，并逐步重放已编辑的资源。除非禁用输出，否则服务器还会写入与构建命令相同的 out/ 文件。

如需选择其他端口或输出目录，请使用：

node bin/pxl.js serve art.px.js --port 5000 --out generated

如需使用查看器但不将生成的资源写入磁盘：

node bin/pxl.js serve art.px.js --no-out

探索 CLI 命令

构建选定的资源

构建命令支持设置目标目录、指定资源、输出缩放比例和预览选项：

pxl build <art.px.js> [--out DIR] [--only a,b] [--scale N] [--no-preview]

例如，仅以原始尺寸的四倍构建两个指定名称的资源：

node bin/pxl.js build art.px.js --only slime,slime_red --scale 4

以文本形式检查精灵图

ascii 命令会将资源打印为调色板键，并显示水平和垂直标尺。定位单个像素时，这非常有用：

node bin/pxl.js ascii art.px.js slime

列出项目定义

使用 list 可同时显示资源、组和图集及其源文件位置：

node bin/pxl.js list art.px.js

高级工作流技巧

使用 TypeScript 艺术文件

艺术项目可以使用 .js 或 .ts 文件。仓库包含 types/pxl.d.ts，可为 .px.ts 文件提供编辑器自动补全。

复用和变换艺术资源

如果多个资源具有共同结构，请避免重复编写网格。可以从基础精灵图构建变体，使用调色板替换创建不同配色方案，并在适当情况下使用翻转、旋转、可复用的 _parts 和 stamp。

使用确定性的程序化工具

该 DSL 包含渐变、抖动、噪声、散布画笔、瓦片地图和带可复现种子的随机组。需要让生成的细节在不同构建之间保持稳定时，可复现的随机性尤其有用。

分层构建场景

对于较大的构图，请使用场景和图层，而不是将所有操作放入一个扁平资源中。pxl 支持投射阴影层和光照层，也支持按图层导出 PNG。完整 API 请参阅 reference.md。

有选择地添加动画和光照

动画帧可以表示为基础精灵图上的补丁，从而减少相似帧之间的重复内容。pxl 可以将这些定义转换为条带、JSON 标签和 GIF 动画。对于灯具、发光效果和基于法线的浮雕效果，请参阅专门的光照指南。

将 pxl 与 AI 智能体结合使用

该仓库旨在作为智能体技能使用。推荐的循环是编写艺术文件、构建文件、检查预览，然后修改源代码。实时查看器会让这一过程即时可见。

要为所有 Claude Code 项目安装该技能：

git clone https://github.com/crsolver/claude-pxl.git ~/.claude/skills/pxl-pixel-art

要仅为当前项目安装：

git clone https://github.com/crsolver/claude-pxl.git .claude/skills/pxl-pixel-art

对于 Codex、Cursor 或其他智能体，请将其指向 SKILL.md，并将 CLI 路径指定为 node <path-to-pxl>/bin/pxl.js。如果希望在浏览器中观看艺术资源的构建过程，可以要求智能体启动 pxl serve。

开发命令

如果计划修改 pxl 本身，请安装其开发依赖并运行检查：

npm install
npm run check

开发依赖包括 TypeScript 和 Node.js 类型定义。要重新生成仓库图库，请运行：

node scripts/gallery.ts

结语

pxl 提供了一种简洁的方式，将像素艺术作为源代码进行处理。先从调色板和文本网格精灵图开始，将其构建为 PNG 和精灵图集资源，并保持实时查看器开启以快速获得反馈。随着项目发展，你可以添加可复用变体、绘图基元、分层场景、动画、光照以及 AI 辅助迭代循环，而无需引入运行时依赖。