Electron · React · TypeScript 桌面应用,将 AI 图片生成接入本地 2D 游戏素材流水线。
面向独立游戏开发者、美术原型师和工具链验证场景。
创建本地项目,定义游戏类型、美术风格与导出目标,批量生成图标、道具、角色动作帧、怪物、背景、特效和瓦片集。所有数据与密钥均保存在本地,无云端依赖。
支持 OpenAI 兼容接口与本地草稿模式,内置 Sharp 后处理管线、精灵表合成、纹理图集打包、Tiled 地图导出,以及 Unity / Godot / Phaser 等引擎的专属导出。
从项目创建到导出打包的完整流水线。
创建本地目录、保存 project.json 配置文件、管理最近项目列表,支持多项目并行工作。
调用 OpenAI 兼容图片接口、自定义接口或本地草稿模式,支持文生图与图生图,内置重试与限流处理。
aiService + generationService上传参考图或复用已有素材,按主体 / 风格 / 构图 / 色板生成变体,支持蒙版局部替换编辑。
referenceServiceSharp 驱动的图像管线:透明背景、智能裁切、边缘伪影移除、统一尺寸、居中锚定,全本地执行。
imageService角色动作帧合成精灵表,生成帧坐标元数据与动画定义(帧率、循环),支持帧诊断分析。
spriteSheetService按类型生成瓦片、合成瓦片集 PNG、生成预览图与元数据,导出 Tiled TMX 地图文件。
tileSetService贪心行排列算法合成纹理图集,输出 JSON 帧元数据,支持自定义间距。
atlasService按目标引擎整理导出目录、生成导入指南与元数据,可选 ZIP 完整归档。
exportService保存完整生成记录(提示词、参数、输出文件),支持按类型筛选与回顾,上限 200 条。
historyService标准 Electron 三进程架构,IPC 通信,上下文隔离。
窗口管理 · IPC 注册
12 个后端服务
类型安全 IPC 封装window.aiSpriteStudio
7 个页面 · 18 个组件
中英文 i18n · Lucide 图标
// src/preload/index.ts — contextBridge 示例
import { contextBridge, ipcRenderer } from "electron";
contextBridge.exposeInMainWorld("topspeedBuilder", {
createProject: (input) => ipcRenderer.invoke("project:create", input),
generateAsset: (input) => ipcRenderer.invoke("asset:generate", input),
openProject: (path) => ipcRenderer.invoke("project:open", path),
// ... 完整类型安全 API
});
Main Process 中的 12 个 TypeScript 服务模块。
项目 CRUD:创建目录结构、读写 project.json、管理最近项目列表(上限 12)
应用设置持久化:AI 提供商、API 密钥/地址/模型、默认路径与后处理开关
三大生成模式:OpenAI 官方接口、自定义兼容接口、本地占位草稿(Sharp + SVG)
生成编排中枢:按素材类型路由、批量生成、帧诊断、精灵表合成、瓦片集组合
Sharp 后处理管线:透明背景、智能裁切、边缘伪影移除、尺寸归一化
精灵表合成:帧排列、坐标元数据、动画定义(FPS / 循环)
纹理图集打包:贪心行排列算法、JSON 帧元数据输出
瓦片集组合:PNG 合成、预览图、元数据 JSON、Tiled TMX 导出
目标引擎导出:Unity/Godot/Tiled/Phaser/Cocos/通用 + ZIP 归档 + 导入指南
生成历史:200 条上限、JSON 持久化、单条记录文件保存
参考图管理:文件对话框导入、缩略图生成、SHA-256 哈希、base64 data URL
共享工具:路径解析、JSON 读写、文件名清理、Hash 计算、分块处理
项目所采用的核心技术及版本。
| 层级 | 技术 | 版本 |
|---|---|---|
| 桌面壳 | Electron | 33 |
| 前端框架 | React | 18 |
| 语言 | TypeScript | 5 |
| 构建 | Vite + electron-vite | 5 / 2.3 |
| 国际化 | i18next + react-i18next | 26 / 17 |
| 图标 | Lucide React | 0.468 |
| 图像处理 | Sharp | 0.33 |
| 归档打包 | JSZip | 3.10 |
| 文件系统 | fs-extra | 11.2 |
一键导出适配各引擎的素材包。
| 目标 | 内容 |
|---|---|
| Unity | PNG、精灵表、图集、JSON 元数据、导入指南 |
| Godot | PNG、精灵表、SpriteFrames 资源说明、JSON 元数据、导入指南 |
| Tiled | 瓦片集 PNG、瓦片集 JSON、TMX 地图文件、导入指南 |
| Phaser / Cocos | PNG、精灵表、图集、JSON 帧数据、README |
| 通用 | 通用 PNG + JSON 元数据 |
| ZIP | 完整导出资源包压缩文件 |
从克隆到运行的完整流程。
# 安装依赖
npm install
# 开发模式启动
npm run dev
# 类型检查
npm run typecheck
# 构建生产版本
npm run build
# 构建产物输出到 out/
// 智能生成接口最小请求体
{
"model": "gpt-image-1.5",
"prompt": "提示词文本",
"n": 1,
"size": "1024x1024"
}
本地项目的标准目录组织。