Vibe Coding 游戏开发教程 · 上篇 |《小马拼图》:一张截图、一段视频,复刻一款解谜手游
我全程只给了截图、视频、一两句话:玩法调研是 agent 做的,视频关键帧是 agent 抽取比对的,任务分解是 agent 自己统筹的——没写过一条复杂提示词。本篇拆解 rust_bevy_lua_game 引擎平台与 Floniks 素材平台如何咬合成一条零关卡流水线,以及"一份 Rust crate,原生 + WASM 全跨平台"。
两款游戏,两篇教程。这是上篇:从一张截图起步、以一段玩法视频为验收标准,做出一款可上线的 Queens/Star Battle 解谜游戏。下篇《深夜画廊》见《Vibe Coding 游戏开发教程 · 下篇》。
先把这套开发方式的分工说清楚,因为它是全文的主线:
我(开发者)全程只提供了三样东西:截图、视频、一两句话。 玩法调研是 agent 做的,视频关键帧是 agent 截取比对的,任务分解是 agent 自己统筹的,提示词是 agent 自己组织的——我没有写过一条复杂的提示词。
先看结果,再讲过程:
版本演进:左边是 v1(一句话立项当天上线,5×5 方格色块、英文 UI);右边是最终版(8×8 圆角瓦片、中文粗体、心数/倒计时/连胜、金币/体力、规则提示条、道具栏)。右图不是设计稿——是 WASM 版在浏览器里跑着的实机截图。
第 1 步 · 输入一张截图:”玩法你自己去调研”
我发给 agent 一张某款解谜手游的截图,配的话只有一句:
开发一个这个游戏,数独变种,具体玩法和规则你自己去调研。
这句话里没有规则、没有配色、没有交互说明。agent 自己统筹出了完整的任务清单:
| 我说的 | agent 自己分解出的活 |
|---|---|
| “这个游戏”(一张截图) | 从截图识别玩法族:棋盘 + 单类棋子 + 区域染色 → 判断为 Queens / Star Battle 类逻辑谜题 |
| “具体玩法和规则你自己去调研” | 调研补全规则:每行/每列/每色区恰好一子,任意两子不得相邻(含对角) |
| (没说) | 把规则写成无头测试的不变量——规则文档就是测试本身 |
| (没说) | 棋盘生成器要保证唯一解;写解数计数器验证 |
| (没说) | 按仓库规范自注册进游戏菜单,零改引擎 |
v1 当天上线。这一步的要点:“调研”和”分解”都是 agent 的能力,不是你的前置作业。 你甚至可以不知道这个玩法叫什么名字。
第 2 步 · 输入一段视频:”完全复刻它的 UI 和玩法”
v1 能玩,但和原作气质差得远(见演进图左侧)。我丢给它一段原作的玩法录屏:
看一下这个游戏的玩法视频,完全复刻他的 UI 和玩法,画面尺寸、元素都要一样。
agent 对视频做的事——同样没人教:
- 抽取关键帧,逐帧比对出 UI 元素清单:8×8 棋盘、顶部圆角关卡徽章、心数、倒计时、连胜;
- 从帧序列读出交互节奏:点一下放子 → 冲突格自动打 ✕ → 过关庆祝的触发时机;
- 量出布局比例:棋盘占屏比、HUD 高度、元素间距——不是”看起来差不多”,是量出来的。
然后按这份”从视频里读出来的规格”重写了整个界面与交互。视频就是需求文档——由 agent 来读。
第 3 步 · 输入一张不满意的截图:反馈驱动打磨
我截了一张当时的游戏画面,指出问题:
尺寸不对,我提供的里面是 8×8 的格子……格子有一些圆角,有打了 X 的状态……你现在用的不是图形,是色块……请提高还原度,让游戏精美一点,同时游戏相机的高级效果也要提供一下。
一条消息,agent 统筹成四条并行任务全部落地:
| 反馈 | agent 的修法 |
|---|---|
| “色块不是图形” | 新写 8× 超采样贴图生成器:可染色圆角瓦片、粗体 ✕、胶囊、卡片 |
| “字体不够圆润” | 字体换 Noto Sans SC Bold 子集,逐字校验无缺字 |
| “8×8 的格子” | 升 8×8 后盲随机找不到唯一解(首关实测 237 个解)→ 改爬山精炼收敛到唯一解 |
| “相机高级效果” | 给引擎加 game.zoom():放对轻推、放错重推、过关猛推近再回弹 |
其中”唯一解”那条值得展开:这是个真 bug,是测试逼着修好的——套件断言每关解数恰为 1,盲重摇过不了,agent 只能换算法。你不用盯着它偷懒,测试盯着。
第 4 步 · 配乐与广告:素材管线一条龙
“给这个游戏配一个音乐吧”
BGM 由 Floniks 文生音乐(Lyria 2)生成。之后的 15 秒玩法广告视频同样出自这条管线:用游戏真实素材逐帧渲染出关键帧(手指演示放马 → 自动打 ✕ → 过关庆祝),交给 Floniks 图生视频,配上 Lyria 2 的配乐——上架物料全自动。
广告视频的关键帧:画面元素全部是游戏内真实素材。
小马棋子本身也是 Floniks 文生图 + 抠底 + 48×48 落位的产物:
为什么这么丝滑:两个平台咬合成一条流水线
上面四步能连续跑下来不断片,靠的是 rust_bevy_lua_game(引擎平台) 和 Floniks(素材平台) 的协同——两边各管半条流水线,接缝处全部是 agent 可以自动通过的”契约”:
| rust_bevy_lua_game 提供 | Floniks 提供 | 接缝处的契约 | |
|---|---|---|---|
| 改玩法 | 玩法全在一个 Lua 文件,桌面端热重载秒级见效 | — | game.* API 一页纸,agent 全记得住 |
| 验对错 | 无头测试套件驱动 Lua 玩法,13 万+ 断言 | — | 规则 = 不变量 = 测试,机器可判 |
| 要美术 | 素材按同名同尺寸加载,零代码换皮 | 文生图 + 去背景,经 MCP 直接是 agent 的工具 | 风格圣经锁色板,manifest 可重放 |
| 要音乐 | 三声道音频,一行接入 | 文生音乐(Lyria 2) | 同名音频文件落位 |
| 要宣传 | 真实素材程序化渲染关键帧 | 图生视频 + 配乐 | 关键帧图 → 15s 成片 |
关键在于:这条流水线上没有任何一步需要人搬运文件或切换工具。 agent 在同一个会话里写代码、跑测试、调 Floniks 生成、把产物落进约定路径、提交——引擎侧的”数据即约定”和 Floniks 侧的”生成即工具”(MCP),让每个接缝都是机器可通过的。这就是”丝滑”的工程学解释:不是 agent 快,是路上没有关卡。
完全跨平台:原生与 WASM,同一份代码
最后说这套东西跑在哪。答案是:一份 Rust crate,三种形态,游戏脚本字节级相同。
- 原生 macOS:开发机上
make run,Lua 热重载,是 agent 的开发循环; - 原生 iOS:同一 crate 编成 staticlib 进 UIKit 壳,ProMotion 120Hz,TestFlight 管线全代码化;
- Web / WASM:同一 crate 经 wasm-bindgen 编到浏览器——Lua VM 换成纯 Rust 的 ottavino(C Lua 上不了 wasm),但暴露一模一样的
gameAPI,所以每个.lua游戏文件不改一个字节,三端同跑。
验证就在本文里:题图右侧那张最终版截图,就是用 headless 浏览器打开 WASM 版实机截出来的——不是模拟器,不是设计稿。一条链接,手机浏览器点开即玩:https://maweis.com/rust_bevy_lua_game/;同一套游戏,iPhone 上又是原生 120Hz。这就是”试玩即传播 + 原生即体验”两头都要的做法。
方法论小结
- 截图 = 立项书,视频 = 需求规格。agent 负责调研玩法、抽关键帧、量布局。
- 命令是意图,分解归 agent。每条一句话被统筹成多条并行任务,依据是它掌握的引擎能力和 Floniks 工具箱。
- 测试是验收官。规则写成不变量,”唯一解”这类 bug 逃不掉。
- 双平台咬合:引擎管”数据即约定”,Floniks 管”生成即工具”,接缝机器可过,全程零搬运。
- 一份代码,全平台:原生 macOS/iOS + WASM 浏览器,脚本字节级相同。
- 全程零复杂提示词。上面每个引号里的话,就是我说过的全部。
开源脚手架:rust_bevy_lua_game(仓库内
docs/blog/有开发博客与会话存档);素材平台 Floniks(MCP 端点api.floniks.com/api/v1/mcp);编排 Claude Code。下篇:《深夜画廊:一句题材词,做出有声有色的视觉小说》。