让 Codex 帮你画游戏角色！这个开源项目把 2D 动画生成做成了浏览器里的"搭乐高"

开源星探

发布于 2026-06-23 17:47:02

170

文章被收录于专栏：翩翩白衣少年翩翩白衣少年

只靠一张参考图，加上几句自然语言描述，就能让 AI 帮你生成一套完整的 2D 游戏角色动画精灵表？

不是"看起来像动画"的视频，而是直接可以导入游戏引擎的 PNG 精灵表——每帧都是真正重绘的独立动作，不是原图拉伸变形的"假动画"。

最近 GitHub 上出现了一个新项目，把这件事做成了浏览器里的可视化工作台。

一、一句话看懂这个项目

Gorest 2D Animation Spritesheet Generator（下面简称 Gorest）是一个本地浏览器工作区，用来搭建横版 2D 游戏场景、导入/生成精灵表（Spritesheet）、预览动画片段，并组织可复用的场景资产。

它的核心理念用一个词概括就是——"Codex-Assisted Animation Agent"：

用 Codex（AI 助手）来规划、生成、组装动画资产，浏览器作为可视化结果的呈现工具，让你跳过传统 Spine 式的手动骨绑定流程，改成更像"prompt → generate → composite → preview → adjust → save"的快速迭代模式。

二、它到底解决了什么痛点？

做 2D 游戏开发的朋友都懂，角色动画是个体力活：

1. 手工画动画：四方向角色走路+待机+攻击，一套下来几小时起步，独立开发者耗不起
2. AI 直接出视频：视频模型生成的动画"看着美"，但帧间尺寸漂移、角色比例乱变，拆出来根本没法直接进游戏引擎
3. 单张图变形做"伪动画"：把一张正面图切成"上半身+手臂+腿"再拼起来——动作僵硬，没有真正的步态循环，只能做临时预览
4. 场景与资产脱节：角色、道具、背景、UI 是分散的文件，没有统一的工作台把它们"摆"到一起预览

Gorest 的思路是 "先做一张完整的精灵表，再拆成帧"，并且把整个流程塞进一个本地浏览器工具里。

三、它的功能，用一张图概括

┌────────────────────────────────────────────────────┐
│                Gorest 工作流概览                     │
│                                                    │
│  Scenes ──► 创建场景 ──► 放置背景/角色/道具          │
│                                                    │
│  Scene ───► 图层编辑 ──► 拖拽/缩放/排序/显隐          │
│                                                    │
│  Spritesheets ──► 查看当前场景用到的所有动画片段       │
│                ──► 编辑元数据（动作名/方向/循环模式等）│
│                                                    │
│  Action ───► 横版可玩预览 ──► 检查移动/动画/构图      │
│                                                    │
│  Save ─────► 保存场景+资产到本地游戏库                │
└────────────────────────────────────────────────────┘

具体能做什么：

• ✅ 创建并保存多个场景（像保存多个关卡草稿）
• ✅ 把背景、角色、道具、UI、动画精灵作为可编辑图层放置
• ✅ 拖拽、缩放、排序、显/隐图层（像 Figma 的图层系统）
• ✅ 预览一个"可玩"的横版场景（角色能移动、动画能播）
• ✅ 导入或生成 12 帧 / 16 帧精灵表
• ✅ 把动画精灵直接合成到场景背景上
• ✅ 每个精灵表带元数据（资产角色、剪辑名、触发类型、游戏状态、方向、循环模式、标签）
• ✅ 资产和场景都存本地，下次复用

四、生成策略文档

如果只看 README，你可能觉得这就是个"普通的游戏场景编辑器"。

但真正值得关注的，是仓库里一份叫 SPRITESHEET_GENERATION_POLICY.md 的文档——它用非常硬核的方式，定义了"AI 生成的精灵表必须通过哪些检查才能算作合格的游戏资产"。

这份文档的规则细节做得非常扎实，我挑几个最有代表性的分享一下：

1. 先出一整张完整的精灵表，再拆帧

不是先生成单帧再拼，而是一次生成一张大的 4x4 或 4x3 的重绘精灵表图像，
确保所有格子里的角色身份、服装、配色、比例都一致。
每个格子必须是真正重绘的动画帧，不是源图像的扭曲副本。

这一条直接拒绝了"AI 生成一堆散帧再拼接"的做法——那种方案几乎一定会出现帧间角色"变脸"。

2. 禁止整图漂移/浮动/缩放旋转作为走路循环

禁止把一整张图做左右晃动、上下浮动、旋转来假装走路。
禁止把一张正面图切成"躯干+手臂+腿"再拼接来当最终走路输出。
本地程序化/伪骨架方法，只能用于快速非走路预览或明确的草稿/调试输出。

非常写实的约束——避免了"看起来在动但根本不是动画"的假效果。

3. 角色比例锁定——不压缩、不拉伸、不 Q 版化

永远不要对角色使用非等比缩放。
保留原始角色的头身比、腿长、肩宽、服装轮廓、鞋码。
256x256 的格子是容器，不是形状约束——
把完整角色放进格子里留透明边距，不要扭曲角色去填满正方形。

这一点非常关键。很多 AI 工具会把一个高挑角色"压扁"成 Q 版，或者把矮胖角色"拉长"——Gorest 把这作为硬约束。

4. 根锚点稳定——腿可以动，但身体不能漂

不要用整帧的包围盒来居中每一帧（迈出去的腿会改变 bbox，导致明显的漂移）。
从躯干/头部区域估算一个稳定的根锚点，把每一帧对齐到同一个锚点坐标。
跨帧保持一个全局等比缩放。

这是做游戏动画的老司机才会注意的细节——新手最常犯的错误就是"每一帧居中"，结果角色走路时左右晃得像坐船。

5. 关键姿态先出，再补中间帧

16 帧走路循环需要 8 个关键姿态：
1 接触姿态 → 3 下蹲姿态 → 5 经过姿态 → 7 上抬姿态
9 反侧接触 → 11 反侧下蹲 → 13 反侧经过 → 15 反侧上抬
2/4/6/8/10/12/14/16 是中间帧。
第 16 帧不能和第 1 帧完全相同——它应该是第 1 帧前的中间帧，保证循环播放不卡。

你细品——这规则写得几乎像在给 AI 讲动画原理课。

6. 自动网格检测——不靠假设，靠像素分析

在读取或归一化精灵表前，先分析源图像的几何结构。
先去除底色→ 读取图像宽高 → 计算 X/Y 轴上的 alpha 像素投影
→ 检测可见的精灵簇和它们之间的透明间隙 → 从簇中心距离推导行列边界。
只有当簇检测失败时，才回退到按比例 4x4/4x3 切分。

这一段非常工程化——AI 生成的图往往边距不均匀，直接按比例切一定会切歪。

五、快速安装

# 1. 克隆仓库
git clone https://github.com/NO6KIKO/gorest-2d-animation-spritesheet-generator.git
cd gorest-2d-animation-spritesheet-generator

# 2. 安装依赖（需要 Node.js 20+）
npm install

# 3. 可选：如果以后要用云图像生成，配置环境变量
cp .env.example .env.local

# 4. 启动
npm run dev

# 5. 浏览器打开
# http://localhost:3000