实战案例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 工作流仓库内置三个技能本案例主要用到前两个技能用途参考文档generate2dsprite角色、怪物、召唤物、法术、弹道、特效精灵图references/modes.mdgenerate2dmap烘焙地图、分层栅格地图、道具包、碰撞区域references/map-strategies.mdvideo2dsprite视频帧采样生成更高密度的运动精灵Grok Build 专属references/pipeline.md二、全流程一览步骤内容产出1️⃣ 安装克隆仓库、安装 Python 依赖、复制技能目录可用的$generate2dsprite/$generate2dmap2️⃣ 设计一句话自然语言描述游戏玩法Agent 自动拆解资产清单3️⃣ 角色方向行走表、攻击/进化表、敌人与 Boss 表透明 PNG 精灵图 GIF4️⃣ 地图基底图 → 装饰参考 → 3x3 道具包 → 分层预览可运行地图 碰撞/区域元数据5️⃣ 集成内容数据库 场景接线 HUD/特效可玩 Unity 场景6️⃣ 发布WebGL 构建Builds/WebGL可部署产物三、第 1 步安装 Agent Sprite Forge3 分钟本地后处理器只需要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 会自己做两件事拆解资产清单地图美术、英雄方向表、召唤物/进化表、敌人表、道具拾取物、HUD 图标、特效规划管线本案例最终管线为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 个方向 GIFQA 元数据每次输出附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_modesurvivors_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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考