女儿画了个骑士,我让豆包把她的手稿做成了一个能通关的小游戏
女儿画了个骑士,我让豆包把她的手稿做成了一个能通关的小游戏 一张铅笔手稿 → 一个能跑、能打、能通关的横版动作游戏 工具:豆包工作(办公任务模式),模型 Doubao-Seed-2.1-pro-0915 文中全部画面均为游戏实际运行截图。 一、女儿的一张手稿 前几天女儿趴在桌上画画,递给我一张
💡 你将学到
女儿画了个骑士,我让豆包把她的手稿做成了一个能通关的小游戏 一张铅笔手稿 → 一个能跑、能打、能通关的横版动作游戏 工具:豆包工作(办公任务模式),模型 Doubao-Seed-2.1-pro-0915 文中全部画面均为游戏实际运行截图。 一、女儿的一张手稿 前几天女儿趴在桌上画画,递给我一张
📜 目录
女儿画了个骑士,我让豆包把她的手稿做成了一个能通关的小游戏
一张铅笔手稿 → 一个能跑、能打、能通关的横版动作游戏
工具:豆包工作(办公任务模式),模型 Doubao-Seed-2.1-pro-0915
文中全部画面均为游戏实际运行截图。
一、女儿的一张手稿
前几天女儿趴在桌上画画,递给我一张铅笔稿:一个长着弯角、披着拖地斗篷、手里拎着把长剑的小骑士。她自己说不上这是谁,就是画着玩的。
我最近在用新升级的豆包 Seed 2.1 Pro-0915,多模态编程是这次升级的重点。我突然想试试:只给它这一张画,不写需求文档、不给三视图、不指定配色,能不能把女儿笔下的角色,变成一个真的能玩的游戏。
这是她的原稿,画在一张作业纸上:
二、它从一张潦草线稿里看懂了什么
这道题最难的地方是,小孩的手稿不是标准设计稿,线条是草的,全靠模型自己归纳。我没有配任何文字标注。最终它在游戏里还原出的视觉清单是:
| 女儿画的 | 它的解读和实现 |
|---|---|
| 头顶一对大角 | 先竖直生长、再向外弯出的弯月形双角,角尖外挑 |
| 角根内侧 | 一对小尖齿 |
| 额头正中 | 她画了个月牙形的记号,做成了开口向上的 U 形刻纹 |
| 脸上 | 两个纯黑椭圆眼,左眼下方还有四道竖裂的刻痕——这一笔很小,它没漏掉 |
| 双肩 | 每侧三层圆钝叠片鳞甲,层层外展 |
| 胸口 | 三层 V 字形甲片,下面坠着一个菱形饰片 |
| 外衣 | 拖地斗篷,下摆三瓣花瓣形,跑起来和跳起来会跟着摆动 |
| 四肢 | 昆虫节段一样细长的四肢、爪子样的手 |
| 手里 | 右手一柄细长直刃剑(游戏里叫"骨钉"),带护手和缠柄 |
开始界面里,我让它把女儿的原稿和游戏形象并排放:左边是铅笔稿,右边是从稿子里"活过来"的骑士。
说实话光这一步就值回票价了。角的形状第一版画成了竖着的兔耳朵,我让它"再弯一点、向两边扫开,像月牙",来回调了几版才对——它不是一次画对的,但它听得懂我在说什么、改得准,这比一次蒙对更让我放心。
三、一千二百行代码里,装了一个完整的游戏
我以为它顶多给我一个会跑跳的小人,结果它交出来的是一套完整的游戏系统。整个游戏 1226 行代码、50KB,就一个 HTML 文件,不用装任何东西,浏览器双击就能玩;没有用任何游戏引擎,音效都是代码实时合成的,没有一个音频文件。
它自己补齐了所有"让游戏成立"的东西:
角色动作:待机时会呼吸、奔跑、跳跃、二段跳时斗篷会展开、冲刺带残影并且冲刺瞬间无敌、横劈出刀带弧光、空中向下劈可以踩在敌人头上反弹(玩过空洞骑士的家长懂这个)、长按蓄力回血、受击击退、死亡碎成一片白光。
三种怪物:
- 地面甲虫来回巡逻,撞墙会掉头,走到悬崖边还会自己回头,不会傻跳下去;
- 一只背甲带红纹的精英甲虫,你一靠近就冲过来,要砍五刀才倒;
- 飞虫在空中晃,你靠近后它会俯冲压下来,正好进入你的刀口。
关卡和系统:一整条横版卷轴关卡,石板地面和浮空残梁、掉下去会回到最近的落脚点并扣血、砍怪攒灵魂槽、消耗灵魂吟唱回血、终点是一扇光门,通关后结算用时、击杀和倒下次数。键盘之外,还自动适配了手机上的虚拟按键。
实际跑起来是这样:
四、最意外的一段:它自己抓出了两个会让游戏报废的 Bug
如果只是"生成出来看着像",这篇文章我就不写了。真正让我决定记下来的,是后面的验证过程。
我让它顺手写了个自动测试脚本:模拟按键真的去玩,逐帧读游戏状态(坐标、血量、动作、怪物位置、脚下还有没有地面),自动跑图、打怪、回血、跳坑。结果连续抓出两个光看画面绝对看不出来的毛病——
第一个 Bug:游戏一点开始就卡死。
菜单看着好好的,一点"踏入回廊",骑士站在原地怎么按键都不动。控制台报错:一个帧间隔变量只在局部声明了,物理函数里却当成全局变量在用,主循环第一帧直接崩掉。菜单不调用游戏逻辑,所以静态截图全绿;只有真玩起来才暴露。 补上变量作用域后,骑士立刻跑了起来。
第二个 Bug:终点前的路被一堵隐形墙堵死了。
自动测试的小人每次跑到终点前就原地狂奔直到超时。查关卡数据发现,它布置一座高台时同时放了实心碰撞体,那堵墙从地面拔起 108px,而骑士跳跃高度只有 120px,贴着墙怎么跳都越不过去。改成可以从下面穿过、可以落上去的残梁后,路才通。
两个 Bug 修完再跑自动测试:全程没有倒下一次,23 秒通关(脚本的成绩,我自己上手玩慢得多;它一路上砍翻 4 只虫,剩下 3 只靠走位绕过去了)。
"生成 → 真的跑一遍 → 读报错和状态 → 定位 → 修 → 再跑一遍直到通过",这一整套流程都是它自己走完的,我只负责点"再来一次"。这是我这次最意外的地方。
五、好用在哪,翻车的边界在哪
确实强的:
- 女儿画里那些"不标准"的小细节——弯角、叠片肩甲、花瓣摆斗篷、眼下那四道刻痕——全认出来了,不是拿现成素材拼的;
- 手感是真的调过的:跳跃有容错时间、落地有缓冲、出刀有判定帧,怪物会巡逻、会冲锋、会俯冲,这是个"游戏",不是"动画";
- 代码结构清楚,出了问题能根据报错和运行状态自己定位,而不是整篇推倒重写。
也要说清楚的边界:
- 它不会天然知道自己"做完了"。如果我不让它真的跑通,那个一点开始就崩溃的 Bug 会原样交到我手上——"看起来写完了"和"真的能玩"是两回事;
- 关卡里高台堵路这种整体几何合理性问题,它自己察觉不到,必须实际跑一遍才露馅;
- 角色长相我陪着调了几版角,说明它对"神韵"的第一次命中率,明显低于对功能清单的命中率;
- 这是个很好玩的 Demo,但离商业游戏需要的关卡编辑器、存档、资源管线还差得远,那部分仍然要人来接。
六、怎么玩
就一个 index.html 文件,电脑浏览器双击打开即可,推荐全屏;手机浏览器打开会自动出现虚拟按键,横屏体验最好。
| 按键 | 动作 |
|---|---|
| A / D 或方向键 | 移动 |
| 空格 | 跳跃,空中再按一次二段跳 |
| J | 挥剑 |
| 空中按 S + J | 下劈,踩中敌人或平台会把你弹起来 |
| K 或 Shift | 冲刺,冲刺的一瞬间无敌 |
| 地面长按 H | 消耗灵魂槽回血(灵魂靠砍怪攒) |
| M | 开关音效 |
写在最后
我把游戏命名为《苍白骨钉》(Pale Nail),骑士的一招一式都来自女儿那张作业纸。她现在还不知道,爸爸准备今晚把电脑带回家,让她亲手操作自己画的那个小骑士,去砍翻她"无意中设计"的甲虫。
这可能是她人生第一次知道:原来画在纸上的人,是可以活过来、可以去冒险的。
至于模型版本号、跑分那些,她不关心。她只会说一句——
"爸爸,它怎么跟我画的一模一样?"
本站文章由编辑人工撰写,收录的工具均经过实测或公开资料核验。文中链接指向工具官网或 GitHub 仓库,仅作信息参考,不构成付费推广。
