302Sprite

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

功能介绍

输入角色描述，选择网格大小，挑选动画动作 — 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 示例

项目展示

快速开始

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

在浏览器打开 http://localhost:8787

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

部署到 Vercel

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