# 302Sprite

**Repository Path**: liangdabiao/302Sprite

## Basic Information

- **Project Name**: 302Sprite
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-16
- **Last Updated**: 2026-04-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 302Sprite

根据单个文本提示生成游戏就绪的精灵图动画。基于 [302.ai](https://302.ai) 构建 — 一个 API key 驱动所有功能。
特别感谢 linux.do 社区 ： [linux.do](https://linux.do/t/topic/1261270)

![License](https://img.shields.io/badge/license-MIT-blue)

## 功能介绍

输入角色描述，选择网格大小，挑选动画动作 — 302Sprite 即可生成完整的精灵图序列，支持透明背景和动画预览。

**处理流程（全部在 302.ai 上完成）：**
- **nano-banana-2** — 图像生成（精灵图）
- **OpenRouter LLM**（通过 fal 调用 GPT-4o-mini）— 智能提示词重写，包含角色设计和动作编排
- **BRIA** — 自动背景去除

## 功能特性

- **可配置网格**：2x2、3x3、4x4、5x5、6x6 可选
- **多动作选择**：每行网格可选择多个动画动作（待机、行走、奔跑、攻击、施法、跳跃、舞蹈、死亡、闪避，或自定义动作）
- **LLM 提示词重写**：简单的提示词会自动变成详细的角色设计和动作方向
- **自动背景去除**：BRIA 自动移除背景
- **实时预览**：逐帧动画预览，支持 FPS 控制
- **多种下载格式**：精灵图 PNG、透明背景 PNG、动态 GIF
- **参考图上传**：上传参考图引导生成
- **展示示例**：精选动画 GIF 示例

## 项目展示

![302Sprite 演示](ScreenShot.png)
![4x4 网格动画示例](sprite-animation-4x4.gif)

## 快速开始

```bash
git clone https://github.com/liangdabiao/302Sprite.git
cd 302Sprite
npm install
npm run dev
```

在浏览器打开 [http://localhost:8787](http://localhost:8787)

你需要获取一个 **302.ai API key** — 在 [302.ai/dashboard/keys](https://302.ai/dashboard/keys) 获取。该 key 可同时用于三个服务（图像生成、LLM、背景去除）。

## 部署到 Vercel

```bash
npm i -g vercel
vercel
```

项目已在 `api/` 目录中包含 Vercel 适配的无服务器函数，`public/` 目录包含静态资源。

## 项目结构

```
├── public/           前端静态文件
│   ├── index.html    主应用页面
│   ├── app.js        前端逻辑
│   ├── styles.css    样式文件
│   ├── showcase/     示例 GIF
│   └── select.html   示例 curation 工具
├── api/              Vercel 无服务器函数
│   ├── generate.mjs  精灵图生成接口
│   ├── upload.mjs    图片上传接口
│   └── fal/media.mjs 媒体代理接口
├── lib/fal.mjs       共享的 FAL API 辅助函数
├── server.mjs        本地开发服务器
├── batch-generate.mjs  批量生成工具（开发用）
└── process-showcase.mjs 示例处理器（开发用）
```

## 技术栈

- **前端**：原生 JavaScript，无框架，无需构建步骤
- **后端**：Node.js（开发用原生 HTTP 服务器，生产用 Vercel 无服务器）
- **AI**：全部通过 302.ai API（nano-banana-2、OpenRouter、BRIA）
- **GIF**：gif.js（浏览器端）+ gifenc（服务端批量处理）

## 许可证

MIT