企业官网建设流程全解析

实战案例：Agent Sprite Forge 打造 Unity WebGL 生存类小游戏全流程

【免费下载链接】agent-sprite-forgeAgent Skill for generating 2D sprite sheets and map, transparent PNG frames, and animated GIFs from prompts.项目地址: https://gitcode.com/gh_mirrors/ag/agent-sprite-forge

这篇文章带你用 Agent Sprite Forge 完整走一遍 Unity WebGL 生存类小游戏的制作流程。它是一套开源的 AI Agent 技能，能通过自然语言提示生成引擎可用的 2D 精灵图、分层地图、透明 PNG 帧和动画 GIF——从一句游戏描述，到可部署上线的 WebGL 小游戏，全程无需手写美术资源。

一、Agent Sprite Forge 是什么？🎮

Agent Sprite Forge 不是一个提示词合集，而是一条Codex 优先的 2D 游戏资产工作流：

• Agent 决策：由 AI 代理自动规划资产类型、动作、帧数、布局与对齐策略
• 内置图像生成：用image_gen渲染原始视觉素材（角色、怪物、地图、道具、特效）
• 本地脚本后处理：色键去底（洋红#FF00FF）、帧切分、对齐、透明 PNG/GIF 导出、QA 元数据
• 引擎对接：资产可直接装配进 Godot、Unity 或纯 2D 工作流

仓库内置三个技能，本案例主要用到前两个：

二、全流程一览

三、第 1 步：安装 Agent Sprite Forge（3 分钟）📦

本地后处理器只需要Python + Pillow + numpy（$video2dsprite另需 ffmpeg），依赖已列在 requirements.txt。

macOS / Linux 安装命令：

git clone https://gitcode.com/gh_mirrors/ag/agent-sprite-forge cd ./agent-sprite-forge python3 -m pip install -r ./requirements.txt # Codex 技能目录 mkdir -p ~/.codex/skills cp -R ./skills/* ~/.codex/skills/

💡 Windows PowerShell 用户：Copy-Item -Recurse复制到$env:USERPROFILE\.codex\skills即可，详见 README.md 的 Install 章节。安装后重开 Agent 会话让技能重新加载。

四、第 2 步：一句话设计，给 Agent 游戏蓝图 ✍️

整个案例的起点只是一段自然语言描述。你可以这样对 Agent 说：

“用 $generate2dmap 和 $generate2dsprite 做一个吸血鬼幸存者类（survivors-like）的 2D 生存游戏：玩家四向移动、自动攻击，持续刷怪、捡经验和金币、升级时三选一，包含初始召唤物选择、敌人波次、Boss、伤害数字与血条。用 Unity 搭建，最后构建 WebGL 版本。”

Agent 会自己做两件事：

1. 拆解资产清单：地图美术、英雄方向表、召唤物/进化表、敌人表、道具拾取物、HUD 图标、特效
2. 规划管线：本案例最终管线为image_gen 地图 + 方向英雄表 + 召唤/进化表 + 敌人表 + 特效/HUD 图标 + Unity 运行时 + WebGL 部署

你不需要指定精灵图尺寸或帧数——按 SKILL.md 的规则，Agent 会自行推断最小可用的输出（4 帧默认2x2网格、6 帧2x3、大体型 Boss 用3x3 idle等）。

五、第 3 步：精灵图生成——角色、敌人与特效 🧙

这是$generate2dsprite的主场。对每个资产，它走固定五步：推断方案 → 手写提示词 → 生成洋红底原图 → 脚本后处理 → QA 验收。

关键机制值得新手了解：

• 洋红底约定：所有原始精灵图都生成在纯色#FF00FF背景上，后处理脚本 generate2dsprite.py 做色键去底、防溢色、按格切帧、脚底对齐，输出透明 PNG 与 GIF
• 身体与特效分离：英雄攻击表默认只画身体，宽刀光、枪口火焰、弹道、冲击特效单独生成，游戏中分层叠加——避免宽特效把固定格子里的角色"挤小"
• 方向行走表：四向移动角色用4x4方向表，产出 16 帧 PNG + 4 个方向 GIF
• QA 元数据：每次输出附pipeline-meta.json，标记触边帧、缩放漂移等问题，不达标就换参数重跑或重生成

一张精灵图跑完，你会得到：raw-sheet.png、raw-sheet-clean.png、sheet-transparent.png、逐帧 PNG、animation.gif、prompt-used.txt和pipeline-meta.json。

六、第 4 步：生存竞技场地图——三步分层管线 🗺️

生存类游戏按 SKILL.md 的流派路由走scene_mode（survivors_like）：障碍物稀疏、敌人出生环/区域、相机边界与碰撞全部独立定义。

第一步：纯地面基底。先只生成地面材质、道路、水体和地形边界，不烘焙任何需要运行时控制的物体（树木、建筑、拾取物都后补）：

第二步：装饰参考图。把基底图作为视觉参考再生成一张"摆好道具"的参考图，规划不超过 9 种可见物体候选，作为后续资产生产的清单依据（契约见 layered-map-contract.md）。

第三步：道具包批量生产 + 分层合成。小型装饰道具（岩石、灌木、木桶、箱子、路牌）批量打进一张3x3洋红底道具包，再运行 extract_prop_pack.py 切出逐个透明道具，compose_layered_preview.py 负责合成扁平化预览：

最终产出物还包括：data/<name>-props.json（道具摆放）、data/<name>-collision.json（碰撞）、data/<name>-zones.json（出生环/遭遇区）以及分层预览图：

⚠️ 平台、桥梁、大门这类宽/高/带碰撞的物体不能进方形道具包，需单独生成或用1x3/1x4条状素材，见 prop-pack-contract.md。

七、第 5 步：Unity 集成——从精灵图到可玩场景 🔌

资产齐了，Agent 会直接把它们接线进 Unity 工程：

• 可玩场景：Assets/Survivors/Scenes/SummonSurvivors.unity，相机、灯光、玩家控制、敌人波次、Boss 计时、投射物攻击、范围伤害、血条与分数全部接好
• 内容数据库：SurvivorsContentDatabase.asset统一管理生成的英雄、召唤物、敌人、拾取物、HUD 与特效精灵
• 玩法闭环：初始召唤选择 → 生存目标 → 经验/金币拾取 → 升级三选一（解锁召唤、训练、属性、回复）→ 召唤进化
• 特效分层：弹道、冲击、伤害数字用独立 FX 精灵叠加在身体层之上

八、第 6 步：WebGL 构建与发布 🚀

最后一步让 Agent 生成 WebGL 构建：

• 输出目录Builds/WebGL，附带 Vercel 部署配置
• 生成一次即可获得浏览器可玩的构建，无需任何手动打包操作

至此，从一句提示词到浏览器里能玩的 Unity WebGL 生存小游戏，整条链路全部由 Agent + 本地脚本完成，人工只做两件事：描述玩法和验收效果。

九、新手避坑清单 💡

来自 README.md 的实战经验：

• 提示词里写清视角、动作、运动风格，效果最好（"侧视 + 行走循环 + 平滑"）
• 大型生物/ Boss 优先3x3 idle；小法术、弹道用1x4、2x2、2x3
• 固定帧数的动作表可用布局指南（make_layout_guide.py）提升稳定性，但紧凑攻击表不一定需要
• 参考图驱动变体（同角色多形态、进化链）是核心玩法，身份标记（剪影、配色、配饰）会跨帧保持一致
• 商业项目建议使用原创角色或你拥有版权的 IP

结语

Agent Sprite Forge 把"AI 生成游戏素材"从单次抽卡升级成了可重复、可验收、可交付的管线：Agent 负责创意决策，Python 脚本负责确定性的像素操作，Unity 负责运行时表现。按本文六步走一遍，你就能拥有一个自己的 Unity WebGL 生存类小游戏原型——接下来，把它换成塔防或横版动作，也只是换一句提示词的事。

【免费下载链接】agent-sprite-forgeAgent Skill for generating 2D sprite sheets and map, transparent PNG frames, and animated GIFs from prompts.项目地址: https://gitcode.com/gh_mirrors/ag/agent-sprite-forge