mcpField
P
pixel-art-scaler

pixel-art-scaler

github.com/curiositech创意与媒体257143 次安装3 天前更新
代码仓库

关于 pixel-art-scaler

面向像素艺术开发者的技能，介绍确定性放大算法及其取舍。附带命令行脚本，可在保留透明度的同时进行放大、批量处理和结果比较。

主要功能

  1. 01EPX、hq2x/hq3x/hq4x 与 xBR 放大
  2. 02支持 2x、3x、4x 整数倍放大
  3. 03保留透明度
  4. 04批量处理目录
  5. 05生成 HTML 算法比较

适用场景

  1. 01为高分辨率显示放大复古精灵图
  2. 02批量处理像素艺术素材
  3. 03按渐变或锐利边缘需求选算法
  4. 04生产前比较放大结果

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/curiositech/some_claude_skills --skill pixel-art-scaler

安装后在 Claude Code 中输入/pixel-art-scaler确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

.claude-plugin/
plugin.json
scripts/
compare_algorithms.py
batch_scale.py
scale_epx.py

详细介绍

像素画缩放

通过边缘检测和模式匹配添加有效的子像素，使用确定性算法放大像素画，同时保留其美感。

适用场景

✅ 适用于：

  • 放大复古游戏精灵图、图标和像素画
  • 使用边缘感知插值进行 2x、3x、4x 缩放
  • 在更高分辨率下保留像素画鲜明的美感
  • 将 8x8、16x16、32x32、48x48 像素画转换为适用于 Retina 显示屏的尺寸
  • 比较确定性方法与 AI/ML 方法

❌ 不适用于：

  • 照片或写实图像（使用 AI 超分辨率）
  • 简单的几何缩放（使用最近邻插值）
  • 矢量图（使用 SVG）
  • 文本渲染（使用字体微调）
  • 任意非整数缩放（算法在 2x、3x、4x 下效果最佳）

核心算法

1. EPX/Scale2x（最快，质量良好）

最适合：快速迭代、2x/3x 缩放、透明精灵图

工作原理：

  • 检查每个像素及其 4 个正交邻居（北、南、东、西）
  • 通过边缘检测将 1 个像素扩展为 4 个像素（2x）或 9 个像素（3x）
  • 只使用原调色板中的颜色（不新增颜色）
  • 正确处理透明度

适用场景：

  • 需要快速处理（100 多个图标）
  • 希望边缘清晰且没有抗锯齿
  • 源图具有清晰的像素边界
  • 保留透明度至关重要

时间线：约 1992 年由 LucasArts 的 Eric Johnston 发明，2001 年由 Andrea Mazzoleni 重新发现

2. hq2x/hq3x/hq4x（高质量，速度较慢）

最适合：最终渲染、复杂精灵图、平滑渐变

工作原理：

  • 对 3x3 邻域进行模式匹配（256 种可能的模式）
  • 使用 YUV 色彩空间阈值进行边缘检测
  • 针对不同模式采用复杂的插值规则
  • 生成平滑、经过抗锯齿处理的边缘

适用场景：

  • 用于最终生产素材
  • 源图包含渐变或抖动
  • 希望得到平滑、经过抗锯齿处理的结果
  • 可以接受处理耗时（比 EPX 慢约 5-10 倍）

时间线：由 Maxim Stepin 于 2003 年为模拟器开发

3. xBR/Super-xBR（质量最高，速度最慢）

最适合：主视觉素材、宣传材料、细节丰富的精灵图

工作原理：

  • 使用加权混合进行高级边缘检测
  • 通过多次处理获得更平滑的结果（Super-xBR）
  • 平滑边缘的同时保留精细细节
  • 在这三种算法中抗锯齿效果最佳

适用场景：

  • 需要最高质量
  • 细节丰富的复杂精灵图
  • 营销或宣传用途
  • 不受处理时间限制（比 EPX 慢约 20 倍）

时间线：Hyllian 于 2011 年开发 xBR，2015 年推出 Super-xBR

反模式

反模式：将最近邻插值用于显示

新手想法：“直接用最近邻插值放大 4x 就行了，它能保留像素。”

实际情况：最近邻插值只会重复像素块，不会增加细节。每个像素都会变成 N×N 个相同的块，在高 DPI 显示屏上显得粗糙。

确定性算法的做法：通过模式识别添加有效的子像素——对角边缘会增加抗锯齿像素，直线边缘则保持清晰。

时间线：

  • 2000 年之前：最近邻插值是唯一选择
  • 2001 年起：EPX/Scale2x 实现了智能 2x 缩放
  • 2003 年起：hq2x 加入了复杂的模式匹配
  • 2011 年起：xBR 成为最先进的算法

最近邻插值确实适用的场景：在像素级精确的场景中，以整数倍缩放查看像素画（例如 1:1 参考图像）。

反模式：对像素画使用 AI/ML

新手想法：“Real-ESRGAN / Waifu2x 会带来更好的效果。”

实际情况：使用照片或动漫图像训练的 AI 模型会给像素画添加不恰当的细节。它们会凭空生成纹理、平滑本不应平滑的边缘，破坏有意为之的像素级设计。

LLM 的错误：训练数据中包含来自照片编辑场景的“放大图像 = 使用 AI 模型”建议。

正确做法：

源类型算法
像素画（精灵图、图标）EPX/hq2x/xBR（本技能）
像素画截图混合处理：先用 xBR，再轻度使用 AI
照片/写实艺术作品AI 超分辨率
混合内容两种方法都测试，并比较结果
反模式：为上下文选择了错误的算法

新手想法：“始终使用质量最高的算法”

实际情况：不同算法适用于不同用途：

上下文算法原因
迭代／原型设计EPX快 10 倍，效果足够好
生产资源（网页）hq2x兼顾质量与大小
主视觉图片（营销）xBR质量最高
透明精灵图EPX透明度处理最佳
复杂渐变hq4x渐变插值效果最佳

验证：务必目视比较输出——有时 EPX 2x 的效果比 hq4x 更好！

用法

快速入门
# Install dependencies
cd ~/.claude/skills/pixel-art-scaler/scripts
pip install Pillow numpy

# Scale a single icon with EPX 2x (fastest)
python3 scale_epx.py input.png output.png --scale 2

# Scale with hq2x (high quality)
python3 scale_hqx.py input.png output.png --scale 2

# Scale with xBR (maximum quality)
python3 scale_xbr.py input.png output.png --scale 2

# Batch process directory
python3 batch_scale.py input_dir/ output_dir/ --algorithm epx --scale 2

# Compare all algorithms side-by-side
python3 compare_algorithms.py input.png output_comparison.html
算法选择指南

决策树：

Need to scale pixel art?
├── Transparency important? → EPX
├── Fast iteration needed? → EPX
├── Complex gradients/dithering? → hq2x or hq4x
├── Maximum quality for hero asset? → xBR
└── Not sure? → Run compare_algorithms.py
典型工作流
  1. 使用 EPX 2x 制作原型：快速处理所有资源
  2. 检查结果：找出哪些资源需要更高质量
  3. 使用 hq4x 或 xBR 重新处理主视觉资源：仅应用于关键资源
  4. 比较输出：使用 compare_algorithms.py 并排比较
  5. 优化：有时 2x 的效果比 4x 更好（两种都测试）

脚本参考

所有脚本都位于 scripts/ 目录中：

脚本用途速度质量
scale_epx.pyEPX/Scale2x 实现快良好
scale_hqx.pyhq2x/hq3x/hq4x 实现中等很好
scale_xbr.pyxBR/Super-xBR 实现慢最佳
batch_scale.py处理目录不定不定
compare_algorithms.py生成对比 HTML不适用不适用

每个脚本都包含：

  • 带有 --help 的 CLI 接口
  • 保留透明度
  • 针对损坏输入的错误处理
  • 批量操作的进度指示器

技术细节

色彩空间注意事项

EPX：在 RGB 中工作，采用二值边缘检测
hq2x/hq4x：使用带阈值的 YUV 色彩空间（Y=48，Cb=7，Cr=6）
xBR：在 RGB 中进行高级边缘加权，同时考虑亮度

透明度处理

所有算法都会保留 alpha 通道：

  • 透明像素不会影响边缘检测
  • 半透明像素会得到正确处理
  • 如果输入包含 alpha，输出会保留 RGBA 格式
性能基准（M4 Max，48x48 输入）
算法时间（1 张图片）批量处理（100 张图片）
EPX 2x0.01s1s
EPX 3x0.02s2s
hq2x0.10s10s
hq4x0.30s30s
xBR 2x0.15s15s
xBR 4x0.50s50s

经验法则：EPX 比 hq2x 快约 10 倍，比 xBR 快约 20 倍

输出验证

缩放后，请验证结果：

# Check output dimensions
identify output.png  # Should be exactly 2x, 3x, or 4x input

# Visual inspection
open output.png  # Look for artifacts, incorrect edges

# Compare algorithms
python3 compare_algorithms.py input.png comparison.html
open comparison.html  # Side-by-side comparison

常见问题：

  • 对角线呈锯齿状 → 尝试使用 hq2x 或 xBR 替代 EPX
  • 边缘模糊 → 检查输入是否已缩放（请对原图进行处理）
  • 颜色错误 → 确认输入为 RGB/RGBA（而非索引色／调色板 PNG）

参考资料

深入阅读
  • /references/algorithm-comparison.md - 视觉示例与权衡
  • /references/epx-algorithm.md - EPX/Scale2x 实现细节
  • /references/hqx-patterns.md - hq2x 模式匹配表说明
  • /references/xbr-edge-detection.md - xBR 边缘加权公式
研究论文与来源
示例资源
  • /assets/test-sprites/ - 用于测试算法的示例精灵图
  • /assets/expected-outputs/ - 用于验证的参考输出

更新日志

  • 2026-02-05：首次创建技能，包含 EPX、hq2x、xBR 实现

评论

支持 Markdown