# Agent Sprite Forge 語言：[English](./README.md) | [繁體中文](./README.zh-TW.md) | [简体中文](./README.zh-CN.md) | [日本語](./README.ja.md) | [한국어](./README.ko.md)

給 Codex 使用的 2D 遊戲資產 skills：生成可用於遊戲的 sprite、分層地圖與 engine-ready prototype。

用自然語言下需求。Codex 負責規劃資產 pipeline、使用內建 image generation 生圖，再由本地 processor 去背、切格、驗證與輸出，讓素材可以進 Godot、Unity 或一般 2D game workflow。

Showcase · Skills · 安裝 · Prompt · Star History

## 這個 repo 解決什麼 Agent Sprite Forge 不是單純的 prompt 集合。它是一組以 Codex 為核心的 2D game asset workflow：agent 先決定資產規劃，image generation 產生 raw visual，最後用 deterministic scripts 轉成真正可重用的遊戲素材。

Sprite sheets
角色、怪物、props、攻擊、法術、projectile、impact、idle、walk 與 reference-guided variants。

Layered maps
Ground-only base、dressed reference、prop pack、透明 props、y-sort placement、collision、zones 與 preview。

Engine handoff
Godot scenes、可調整 TileMap layers、分離式 props、遇怪草叢、碰撞、出口區與 debug player。

Local cleanup
洋紅去背、frame extraction、alignment、透明 PNG / GIF、prop-pack slicing 與 QA metadata。

## Showcase ### Engine-Ready Prototypes 這些範例都是用 Codex 搭配 `agent-sprite-forge` workflow 做出的成果。重點不是單張圖，而是完整流程：生成素材、整理 scene data，並接到可玩的 prototype 或可編輯的 engine scene。

Summon Survivors — Unity WebGL 生成地圖、四方向主角、召喚獸、進化型態、敵人、Boss、掉落物、HUD、FX、升級選項，並完成 WebGL 部署。 Play build · Build conversation	Forest Pass Defense — Godot Tower Defense Godot 4 塔防 prototype：地圖、分離式 props、塔位、塔、敵人動畫、Boss / 飛行怪、波次、HUD、建塔 / 升級 / 賣塔、投射物與目標判定。
Editable RPG Map — Godot TileMap Image-generated tileset 與 prop sheet 接進可編輯的 `TileMapLayer`、`Sprite2D` props、遇怪草叢 `Area2D`、`StaticBody2D` collision、出口區、metadata 與 debug player/camera。	Neon Breach — Cyberpunk Side-Scroller 以生成出的角色、攻擊、地圖與 gameplay assets 組成的橫向捲軸 playable prototype。
Sengoku Era — JavaScript Pokémon-like Browser-based RPG prototype，包含生成角色、御魂選擇、map flow 與 battle UI。 Play build	Starter selection and battle loop 用 skill workflow 生成 sprite、monster、battle 與 map assets，再組成的 compact JavaScript game showcase。

更多 Godot 塔防輸出

敵人 roster，包含飛行怪與 Boss

塔的 lineup

HUD 與 gameplay icons

Godot prototype 輸出包含： - `scenes/ForestPass.tscn`：base map、分離式 props、enemy paths、tower slots 與 HUD nodes。 - 六種塔系，包含生成出的塔圖與升級階段。 - 地面敵人、飛行怪與 Boss encounter 的動畫 sheets。 - wave、difficulty、tower catalog、collision、route 與 tower-slot metadata。 - Godot 內已接好的建塔、升級、賣塔、投射物與目標判定邏輯。 ```text image_gen map + separated props + tower sheets + enemy animation sheets + HUD icons + Godot gameplay wiring ```

更多 Unity survivors-like 輸出

Summon Survivors Unity WebGL gameplay with summons, enemies, pickups, HUD, and objective

Unity WebGL gameplay：召喚獸、敵人、掉落物、HUD 與 objective flow

Summon Survivors Unity WebGL level-up menu

Level-up choices：召喚、訓練、能力值與回復選項

Unity prototype 輸出包含： - `Assets/Survivors/Scenes/SummonSurvivors.unity` 可直接開啟遊玩的 scene。 - `SurvivorContentDatabase.asset` 串接 hero、summon、enemy、pickup、HUD 與 FX sprites。 - 初始召喚獸選擇、生存目標、XP / coin 掉落、level-up choices、召喚獸訓練與進化流程。 - 敵人生成壓力、Boss timing、投射物攻擊、範圍傷害、血條與分數統計。 - `Builds/WebGL` WebGL build output 與 Vercel deployment config。 ```text image_gen map + directional hero sheets + summon/evolution sheets + enemy sheets + FX/HUD icons + Unity runtime + WebGL deploy ```

### Sprite Sheets And FX 當你需要角色、怪物、props、spell bundle、projectile / impact FX，或是依 reference 延伸角色時，使用 `$generate2dsprite`。

Text to sprite
從自然語言生成攻擊動畫。

Character action
產出可透明輸出的 2D action sheet。

Spell cast
可放進 bundle 的施法動畫。

Projectile
可搭配 projectile / impact 的 workflow。

下

左

右

上

參考圖	Reference-guided sprite animation
參考圖	Reference-guided character action

### 分層 RPG 地圖 Pipeline 當你需要地圖而不是單獨 sprite 時，使用 `$generate2dmap`。對可讀性高的 layered raster map，現在流程會優先使用 clean hand-painted HD game-map style：先生成 ground-only base，再生成 dressed reference，接著生成 prop pack，最後切出透明 props 並合成 layered preview。

Cyberpunk canal ground-only RPG base map

Ground-only base

Dressed reference

3x3 prop pack

Layered cyberpunk canal RPG map preview
Flattened layered RPG map preview

```text layered_raster + y_sorted_props + precise_shapes + trigger_zones + raw_canvas ``` ### Godot 可調整 TileMap 匯出 `$generate2dmap` 也可以輸出可在 Godot 裡調整的地圖工程，而不是只給一張 flattened image。這個 showcase 使用 image-generated tileset 和 3x3 prop sheet，接到 Godot 4.5 scene。

Generate2DMap Godot editor scene with editable TileMapLayer and nodes
Godot editor scene：可調整 layers、props、zones、collision、exits 與 debug player

Layered map preview	Collision and zone debug overlay
Image-generated tileset atlas	3x3 generated prop pack

Godot 輸出包含可調整的 `TileMapLayer`、獨立 `Sprite2D` props、遇怪草叢 `Area2D` zones、`StaticBody2D` collision blockers、出口 `Area2D` zones，以及 debug player/camera。 ```text image_gen tileset + prop_pack_3x3 + layered_tilemap + separate_props + trigger_zones + Godot_TileMap ``` ### 可玩遊戲 Prompt 範例

Cyberpunk side-scroller prompt

```text use $generate2dsprite to create a 2D side-scrolling game similar to Mega Man. It should include attack mechanics, map elements, and all the essential features. I would like you to design it, and all the necessary assets should be created using this skill. It needs to be an actually playable game, with a cyberpunk story setting. ```

戰國 Pokémon-like prototype

連結：Play the JavaScript browser build

初始御魂選擇

戰鬥場景

```text Use $generate2dsprite to create a 2D game similar to Pokemon. You only need to build one scene for now. It must include a starter monster selection mechanic, a battle screen, and all basic gameplay functions. I would like you to design all the elements and the story, and you can also decide which game engine to use. Use this skill to create any assets you need. The story should be set in the Sengoku period. ```

## Included Skills | Skill | 適合用途 | 輸出 | 執行環境 | | --- | --- | --- | --- | | [`generate2dsprite`](./skills/generate2dsprite) | Sprites、animation sheets、props、spell bundles、FX、reference variants、固定 frame sheet 可選 layout guides | Raw sheet、cleaned transparent sheet、frames、GIFs、metadata | Codex / Grok（需 image gen） | | [`generate2dmap`](./skills/generate2dmap) | Baked maps、layered raster maps、clean HD RPG maps、prop packs、collision / zones、Godot-editable scenes | Base map、dressed reference、prop pack、extracted props、preview、scene metadata | Codex / Grok（需 image gen） | | [`video2dsprite`](./skills/video2dsprite) | **用影片做更密的動作 sprite**：靜止圖 → `image_to_video` → 抽幀 → 洋紅去背 → 多密度 strip / GIF | 影片、raw/clean 幀、8/16/24/48 sprite、strip、預覽 GIF | **僅 Grok Build** | ### 僅 Grok Build：`$video2dsprite` `$video2dsprite` 是 **Grok Build 專用** skill。它依賴 Grok 內建的 **`image_gen` / `image_edit` + `image_to_video`**（先靜止圖再短片）。Codex 等環境沒有 `image_to_video`，無法跑完整生成流程。適合想要 **更密的中間姿勢、跑步/走路更順** 的實驗或 locomotion 素材。代價是像素較軟、identity 可能漂移、邊緣 chroma fringe——正式乾淨 pixel sheet 仍優先用 `$generate2dsprite`。 Grok Build 安裝請把 skills 複製到 `~/.grok/skills`（見[安裝方式](#安裝方式)）。Codex 仍用 `~/.codex/skills`；若載入了 `$video2dsprite` 但沒有影片工具，agent 應拒絕影片步驟並改建議 `$generate2dsprite`。 #### Case study：Ryo run（16 幀）流程：**base → image_to_video（6s）→ 去背 → 16 幀 strip**。 > **說明：** GitHub README **無法穩定顯示** `