功能 / Feature	描述 / Description
🎬 视频转序列帧	Extract frames from video → matting → sprite sheet合成
🔄 GIF ↔ 序列帧

Pixel Art Processing / 像素美术处理

[!NOTE]
本技能基于 FrameRonin (https://github.com/systemchester/FrameRonin)。
所有核心算法和工作流程均源自 FrameRonin 项目。

Overview / 概述

本技能提供完整的像素美术/精灵表处理流水线：

功能 / Feature	描述 / Description
🎬 视频转序列帧	从视频提取帧 → 抠图 → 精灵表合成
🔄 GIF ↔ 序列帧

Quick Start / 快速开始

1. Deploy Backend / 部署后端

bash

Docker部署（推荐 / Recommended）

cd /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

bash

需要Redis / Redis required

rq worker pixelwork --url redis://localhost:6379/0

Core Concepts / 核心概念

Sprite Sheet Layout / 精灵表布局

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

Index JSON: { i, x, y, w, h, t }
i = 帧索引
x, y = 在精灵表上的位置
w, h = 帧尺寸
t = 时间戳（秒）

Processing Modes / 处理模式

- tightbbox: 紧贴alpha边界裁切 / 紧贴alpha边界裁切
safebbox: alpha边界+填充 / alpha边界+填充边距
none: 不裁切 / 不裁切

API Reference / API参考

详见 / 详见: references/api.md

Client-side Processing / 客户端处理

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

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

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

RPG Maker Workflow / RPG Maker 工作流

详见 / 详见: references/rpgmaker.md

Sprite Sheet Math / 精灵表数学

详见 / 详见: references/sprite_math.md

Algorithm Details / 算法细节

透明行列检测 / 透明行列检测

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

javascript
// 找出完全透明的行索引
// 找出完全透明的行索引
function findTransparentRows(imageData) {
const { data, width, height } = imageData
const rows = []
for (let y = 0; y < height; y++) {
let allTransparent = true
for (let x = 0; x < width; x++) {
if (data[(y width + x) 4 + 3] !== 0) {
allTransparent = false
break
}
}
if (allTransparent) rows.push(y)
}
return rows
}

Alpha边界框 / Alpha边界框

javascript
function getAlphaBbox(img) {
// 返回 {x1, y1, x2, y2} 或 null
// 返回 {x1, y1, x2, y2} 或 null
}

连通域检测 / 连通域检测

用于超级橡皮等工具：按连通域+容差选区。

FFmpeg Integration / FFmpeg集成

视频帧提取依赖 ffprobe/ffmpeg：

bash

提取帧 / 提取帧

ffmpeg -y -ss -i video.mp4 -vframes 1 output.png

获取视频信息 / 获取视频信息

ffprobe -v quiet -printformat json -showformat -show_streams video.mp4

Dependencies / 依赖

Backend / 后端

- FastAPI >= 0.104.0
PIL/Pillow >= 10.0.0
rembg >= 2.0.50 (u2net model)
ffmpeg-python >= 0.2.0
opencv-python-headless >= 4.8.0
Redis + RQ (用于异步任务)

Frontend / 前端

- gifuct-js (GIF拆帧)
gifenc (GIF编码)
jszip (批量下载)
React + Ant Design

Feature Flags / 特性开关

功能	路径
NFT门槛	frontend/src/config/features.ts → RONINPROREQUIRE_NFT
Ronin登录

frontend/src/auth/context.tsx | | Gemini链接 | frontend/src/config/gemini.ts |

Deploy to Remote / 远程部署

bash

1. 构建前端 / 构建前端

cd frontend && npm install && npm run build

2. 配置Nginx / Nginx配置

参见 references/ 中的 nginx.conf

3. 启动后端 / 启动后端

uvicorn app.main:app --host 0.0.0.0 --port 8000

4. Docker完整部署 / Docker完整部署

docker-compose -f docker-compose.yml up -d

Credits / 致谢

- FrameRonin by systemchester: https://github.com/systemchester/FrameRonin
rembg for AI matting: https://github.com/danielgatis/rembg
gifuct-js / gifenc for GIF processing

pixel-art-processing像素艺术处理

pixel-art-processing

Pixel Art Processing / 像素美术处理

Overview / 概述