Pixel Art Processing / 像素美术处理

[!NOTE] This skill is based on FrameRonin (https://github.com/systemchester/FrameRonin). All core algorithms and workflows are derived from the FrameRonin project.

Overview / 概述

This skill provides a complete pixel art / sprite sheet processing pipeline:

Quick Start / 快速开始

1. Deploy Backend / 部署后端

# Docker部署（推荐 / Recommended）
cd <skill>/scripts
docker-compose up -d

# 或手动部署 / Or manual:
pip install -r requirements.txt
python run_api.py

后端地址 / Backend URL: http://localhost:8000 API文档 / API docs: http://localhost:8000/docs

2. Start Worker / 启动Worker

# 需要Redis / Redis required
rq worker pixelwork --url redis://localhost:6379/0

Core Concepts / 核心概念

Sprite Sheet Layout / Sprite Sheet布局

┌────┬────┬────┬────┐
│ 0  │ 1  │ 2  │ 3  │  row=0
├────┼────┼────┼────┤
│ 4  │ 5  │ 6  │ 7  │  row=1
├────┼────┼────┼────┤
│ 8  │ 9  │ ..│ .. │
└────┴────┴────┴────┘

Index JSON:  { i, x, y, w, h, t }
i = frame index
x, y = position on sheet
w, h = frame size
t = timestamp (seconds)

Processing Modes / 处理模式

• tight_bbox: 紧贴alpha边界裁切 / Crop tightly to alpha boundary
• safe_bbox: alpha边界+padding / Alpha boundary + padding margin
• none: 不裁切 / No crop

API Reference / API参考

详见 / See: references/api.md

Client-side Processing / 客户端处理

对于 GIF/序列帧转换等纯前端功能，使用浏览器Canvas API直接处理：

For pure client-side features like GIF/frames conversion, use browser Canvas API directly:

scripts/
├── client_gif_processor.html   # GIF拆帧/合成 - 浏览器直接运行
├── sprite_split.html           # Sprite sheet拆分 - 浏览器直接运行
└── image_processor.html         # 图像基本处理 - 浏览器直接运行

直接在浏览器打开这些HTML文件即可使用。

Open these HTML files directly in browser to use.

RPG Maker Workflow / RPG Maker 工作流

详见 / See: references/rpgmaker.md

Sprite Sheet Math / Sprite Sheet 数学

详见 / See: references/sprite_math.md

Algorithm Details / 算法细节

透明行列检测 / Transparent Row/Column Detection

用于超级拆分：按透明行/列智能切割图像。

Used for super-split: intelligently cuts image by transparent rows/columns.