v1.1.0 · MIT

Topspeed
Builder

Electron · React · TypeScript 桌面应用,将 AI 图片生成接入本地 2D 游戏素材流水线。

浏览文档 下载安装包 GitHub
滚动探索
01

项目概览

面向独立游戏开发者、美术原型师和工具链验证场景。

创建本地项目,定义游戏类型、美术风格与导出目标,批量生成图标、道具、角色动作帧、怪物、背景、特效和瓦片集。所有数据与密钥均保存在本地,无云端依赖。

支持 OpenAI 兼容接口与本地草稿模式,内置 Sharp 后处理管线、精灵表合成、纹理图集打包、Tiled 地图导出,以及 Unity / Godot / Phaser 等引擎的专属导出。

8
素材类型
12
后端服务
6
导出目标
3
生成模式
02

功能模块

从项目创建到导出打包的完整流水线。

🏗️

项目

创建本地目录、保存 project.json 配置文件、管理最近项目列表,支持多项目并行工作。

projectService

生成

调用 OpenAI 兼容图片接口、自定义接口或本地草稿模式,支持文生图与图生图,内置重试与限流处理。

aiService + generationService
🔄

图生图

上传参考图或复用已有素材,按主体 / 风格 / 构图 / 色板生成变体,支持蒙版局部替换编辑。

referenceService

后处理

Sharp 驱动的图像管线:透明背景、智能裁切、边缘伪影移除、统一尺寸、居中锚定,全本地执行。

imageService
🎞️

动画精灵表

角色动作帧合成精灵表,生成帧坐标元数据与动画定义(帧率、循环),支持帧诊断分析。

spriteSheetService
🧩

瓦片集

按类型生成瓦片、合成瓦片集 PNG、生成预览图与元数据,导出 Tiled TMX 地图文件。

tileSetService
📦

纹理图集

贪心行排列算法合成纹理图集,输出 JSON 帧元数据,支持自定义间距。

atlasService
📤

导出打包

按目标引擎整理导出目录、生成导入指南与元数据,可选 ZIP 完整归档。

exportService
📜

生成历史

保存完整生成记录(提示词、参数、输出文件),支持按类型筛选与回顾,上限 200 条。

historyService
03

系统架构

标准 Electron 三进程架构,IPC 通信,上下文隔离。

Main Process

Node.js 运行环境

窗口管理 · IPC 注册
12 个后端服务

SharpJSZipfs-extra

Preload

contextBridge

类型安全 IPC 封装
window.aiSpriteStudio

contextIsolationipcRenderer

Renderer

React 18 · Vite

7 个页面 · 18 个组件
中英文 i18n · Lucide 图标

ReactTypeScripti18next
// 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 });
04

后端服务

Main Process 中的 12 个 TypeScript 服务模块。

ProjectService

projectService.ts

项目 CRUD:创建目录结构、读写 project.json、管理最近项目列表(上限 12)

SettingsService

settingsService.ts

应用设置持久化:AI 提供商、API 密钥/地址/模型、默认路径与后处理开关

AIService

aiService.ts

三大生成模式:OpenAI 官方接口、自定义兼容接口、本地占位草稿(Sharp + SVG)

GenerationService

generationService.ts

生成编排中枢:按素材类型路由、批量生成、帧诊断、精灵表合成、瓦片集组合

ImageService

imageService.ts

Sharp 后处理管线:透明背景、智能裁切、边缘伪影移除、尺寸归一化

SpriteSheetService

spriteSheetService.ts

精灵表合成:帧排列、坐标元数据、动画定义(FPS / 循环)

AtlasService

atlasService.ts

纹理图集打包:贪心行排列算法、JSON 帧元数据输出

TileSetService

tileSetService.ts

瓦片集组合:PNG 合成、预览图、元数据 JSON、Tiled TMX 导出

ExportService

exportService.ts

目标引擎导出:Unity/Godot/Tiled/Phaser/Cocos/通用 + ZIP 归档 + 导入指南

HistoryService

historyService.ts

生成历史:200 条上限、JSON 持久化、单条记录文件保存

ReferenceService

referenceService.ts

参考图管理:文件对话框导入、缩略图生成、SHA-256 哈希、base64 data URL

Utils

utils.ts

共享工具:路径解析、JSON 读写、文件名清理、Hash 计算、分块处理

05

技术

项目所采用的核心技术及版本。

层级技术版本
桌面壳Electron33
前端框架React18
语言TypeScript5
构建Vite + electron-vite5 / 2.3
国际化i18next + react-i18next26 / 17
图标Lucide React0.468
图像处理Sharp0.33
归档打包JSZip3.10
文件系统fs-extra11.2
06

导出目标

一键导出适配各引擎的素材包。

目标内容
UnityPNG、精灵表、图集、JSON 元数据、导入指南
GodotPNG、精灵表、SpriteFrames 资源说明、JSON 元数据、导入指南
Tiled瓦片集 PNG、瓦片集 JSON、TMX 地图文件、导入指南
Phaser / CocosPNG、精灵表、图集、JSON 帧数据、README
通用通用 PNG + JSON 元数据
ZIP完整导出资源包压缩文件
07

快速开始

从克隆到运行的完整流程。

# 安装依赖 npm install # 开发模式启动 npm run dev # 类型检查 npm run typecheck # 构建生产版本 npm run build # 构建产物输出到 out/
// 智能生成接口最小请求体 { "model": "gpt-image-1.5", "prompt": "提示词文本", "n": 1, "size": "1024x1024" }
08

项目结构

本地项目的标准目录组织。

project.json generated/ raw/ processed/ sprites/ icons/ tilesets/ sheets/ atlas/ exports/ history/ references/ images/ masks/ thumbnails/