用 SOLO 打造沉浸式宋代园林交互游戏「古园奇梦」——当 AI 遇上千年营造智慧

SOLO挑战赛专区
1

【Code With SOLO】用 SOLO 打造沉浸式宋代园林交互游戏「古园奇梦」——当 AI 遇上千年营造智慧

夸克网盘链接： 夸克网盘分享
提取码：5R55

image
image555×301 50.8 KB

摘要

我是一名在读本科生，平时对编程和传统文化都有兴趣，一直想做一个能真正传播古建知识的作品。我用 TRAE SOLO 从零搭建了一款名为「古园奇梦」的沉浸式交互式古建研学 Web 游戏——玩家扮演一位软件工程师，在女友因考察宋代园林遗址而昏迷后，通过入梦穿越、解谜闯关，逐步理解宋代造园技艺（叠石、榫卯、布局），最终唤醒爱人、完成一场跨越千年的文化传承。整个项目包含自研视觉小说引擎、Three.js 3D 大木作搭建、榫卯/叠石互动小游戏等，全部由 SOLO 辅助完成。

背景

我一直对古建筑文化很感兴趣，但发现市面上关于中国古典园林的数字作品非常少——要么是枯燥的学术资料，要么是走马观花的旅游介绍，真正能让人边玩边学、沉浸其中的产品几乎没有。我想做一个市面上少见的、娱乐性与教育意义并存的古建科普游戏，让更多人感受到宋代园林之美。但问题在于：

  • 我对古建筑专业知识了解有限，需要大量查阅《营造法式》等文献
  • 项目涉及视觉小说叙事引擎、3D 场景渲染、互动小游戏等多个技术模块
  • 从文案撰写到代码实现，工作量巨大，一个人很难在有限时间内完成

这就是 SOLO 发挥作用的地方。

实践过程

第一步：任务拆解与整体架构设计

我首先把整个项目拆解为以下几个核心模块：

  1. 叙事系统：自研轻量级视觉小说引擎，支持多分支剧情、角色立绘、场景切换、选项分支
  2. 知识系统：宋代园林知识百科（月洞门、太湖石、榫卯、营造法式等），以「收纳」弹窗形式融入剧情
  3. 互动解谜：叠石解谜、榫卯拼合小游戏、潜行躲避守卫等
  4. 3D 场景：基于 Three.js 的晋祠圣母殿大木作 3D 搭建体验
  5. 音频系统：背景音乐、音效触发、环境氛围

第二步：用 SOLO 逐步实现各模块

1. 视觉小说引擎（frame.js + ui.js + shared.css）

我给 SOLO 的核心 Prompt：

“帮我构建一个轻量级的视觉小说引擎，支持：多屏幕切换（screen）、角色立绘显示（data-sprite）、对话框系统（speaker + dia-text）、热点交互（hotspot）、知识收纳弹窗（know）、选项分支（choice-screen）、结局画面（ending-screen）。要求纯原生 JS + CSS，不依赖任何框架，代码结构清晰可维护。”

SOLO 帮我搭建了完整的引擎架构，包括：

  • Game.configure() 配置系统，支持章节 ID、初始屏幕、屏幕列表
  • Game.show() 屏幕切换与过渡动画
  • Game.showHotspot() 热点信息弹窗
  • Game.collectItem() 物品收集系统
  • Game.flashGame() 画面闪烁特效
  • Game.sfx() / Game.bgmEl 音频管理

2. 剧情文案撰写

这是最耗时的部分。我给 SOLO 提供了故事大纲和角色设定：

“故事背景：宋代女工师清砚用三年心血修建归梦园，绍兴十一年战火袭来，清砚将设计图纸藏匿于园中，园子遭大规模损毁。当代女孩沈璃（古建研究生）在归梦园遗址考察时意外昏迷。她的男友顾寻（软件工程师）为了唤醒她，深入研究归梦园，几次入梦穿越，在清砚指导下理解其毕生所学，拿到三件藏匿的古物。请帮我撰写沉浸式的剧情文案，要求文学性强、节奏感好、融入真实的古建筑知识。”

SOLO 帮我完成了数万字的剧情文案，涵盖：

  • 序章：宋代园林历史背景介绍
  • 第一章：沈璃昏迷、医院 ICU、顾寻与沈璃的回忆
  • 第二章：第一个梦——月洞门、太湖石假山、沈璃的背影
  • 第三章：档案室查阅资料、《营造法式》研究、第五诀「置」
  • 第四章：遗址探索、石刻发现、含章石
  • 第五章：第二梦——潜入书房、叠石解谜、获得《叠石营造图》
  • 第六章：第三梦——回廊榫卯修复、获得《廊架榫卯钥》

其中融入了大量真实古建知识：太湖石「瘦透漏皱」四字诀、榫卯结构原理（燕尾榫、透榫、斗拱）、《营造法式》材份制、月洞门框景艺术等。

3. 互动小游戏开发

叠石解谜游戏（stone_game.html）：

“做一个叠石解谜小游戏，玩家需要在书房场景中找到散落的 3 块太湖石模型，将它们放到案几上对应的凹槽中。7 块石头对应 7 个凹槽，4 块已就位（瘦、透、漏、皱），玩家需找到剩余 3 块。找到后触发机关，弹出暗格获得《叠石营造图》。”

榫卯拼合游戏（卯榫3.0.html）：

图片
图片1202×654 302 KB

“做一个榫卯拼合互动游戏，玩家需要根据卯口内侧刻字提示「以木接木，力循木纹，旋则入，直则出」，将脱位的木构件旋转后嵌回卯口。修复成功后触发机关，获得《廊架榫卯钥》。”

潜行躲避游戏（minigames/newgame.html）：

image
image560×304 22.3 KB

“做一个 2D 潜行小游戏，玩家需要在回廊中躲避两名巡逻守卫的视线，利用光影和空档潜入书房。守卫沿固定路线巡逻，玩家被照到则失败。”

4. Three.js 3D 大木作搭建（4.1.html）

image
image603×329 56.5 KB

这是技术含量最高的部分。我给 SOLO 的 Prompt：

“用 Three.js 做一个沉浸式的宋代大木作搭建体验，参考晋祠圣母殿的减柱造。分两个阶段：第一阶段，玩家观察 3D 柱网结构，找出并点击拆除 3 根冗余前廊内柱；第二阶段，玩家亲手搭建构架，按顺序放置立柱→乳栿→六椽栿→四椽栿→平梁与蜀柱→叉手。要求 PBR 材质、GSAP 动画、粒子效果、呼吸光效。”

SOLO 帮我实现了：

  • 带卷杀（entasis）的宋代柱子建模
  • 月梁造型的梁枋几何体
  • 简化斗栱构件系统
  • 减柱造第一关（拆除冗余柱 + 粒子消融效果）
  • 大木作沙盘搭建第二关（虚影呼吸 + 实体落下动画）
  • GSAP 相机过渡、进度条、Toast 提示系统
  • 完整的 PBR 材质色库（参考宋代传统彩绘色谱）

第三步：踩坑与迭代

踩坑 1：iframe 嵌入小游戏时的通信问题
小游戏通过 iframe 嵌入主页面，胜利消息需要通过 postMessage 传递给父页面。SOLO 帮我设计了完整的消息监听机制，处理了 STEALTH_WIN、STONE_GAME_WIN、gameWin 等多种消息类型。

踩坑 2：Three.js 场景与主页面 UI 的层叠
3D 场景需要全屏覆盖但 UI 面板要浮在上面。SOLO 帮我用 z-index 分层 + backdrop-filter: blur() 实现了毛玻璃面板效果。

踩坑 3：古建筑知识的准确性
SOLO 生成的文案中有些细节不够准确，比如斗栱的具体构造、减柱造的力学原理等。我通过查阅《营造法式》注释本和学术论文进行修正，SOLO 再根据我的修正意见调整文案，反复迭代了多轮。

踩坑 4：多章节文件的管理
项目最终拆分为 chapter1~5 共 5 个 HTML 文件 + 多个小游戏文件。SOLO 帮我设计了统一的 Game.configure() 配置接口和 shared.css 样式系统，确保各章节风格一致。

成果展示

项目名称：古园奇梦 · 入梦寻物

技术栈：HTML5 / CSS3 / JavaScript / Three.js / GSAP

核心特性：

  • :open_book: 自研视觉小说引擎，支持多分支叙事、角色立绘、场景切换
  • :classical_building: 融入真实宋代园林知识（月洞门、太湖石、榫卯、营造法式）
  • :puzzle_piece: 三大互动解谜：叠石锁、榫卯修复、潜行潜入
  • :video_game: Three.js 3D 大木作搭建体验（减柱造 + 构架组装）
  • :musical_note: 沉浸式音频系统（BGM + 环境音效）
  • :books: 知识收纳系统，边玩边学

项目结构：

├── chapter1.html    # 序章 + 第一章（昏迷/回忆/第一个梦）
├── chapter2.html    # 第二~六章（档案室/遗址/研究/抉择）
├── chapter3.html    # 第二梦：书房（潜入 + 叠石解谜）
├── chapter4.html    # 第三梦：回廊（榫卯修复）
├── 4.1.html         # 3D 大木作搭建体验
├── frame.js         # 自研视觉小说引擎核心
├── ui.js            # UI 交互逻辑
├── shared.css       # 统一样式系统
├── stone_game.html  # 叠石解谜小游戏
├── minigames/       # 潜行小游戏
├── building/        # 场景背景图
├── char/            # 角色立绘
└── audio/           # 背景音乐与音效

效果与总结

提效数据

环节 传统方式 使用 SOLO 后
视觉小说引擎开发 3-5 天 半天
剧情文案撰写（数万字） 1-2 周 2-3 天（含迭代修改）
Three.js 3D 场景搭建 3-4 天 1 天
小游戏开发（3 个） 2-3 天 1 天
总计 约 3-4 周 约 1 周

SOLO 在流程中做了什么

  1. 架构设计：帮我设计了模块化的项目结构，引擎/样式/剧情/游戏分离
  2. 代码生成：生成了视觉小说引擎、Three.js 3D 场景、小游戏等核心代码
  3. 知识融入：将《营造法式》、太湖石品鉴、榫卯结构等专业知识自然地编织进剧情
  4. 文案打磨：数万字剧情文案的撰写与反复迭代，文学性与知识性并重
  5. 问题排查：帮我解决了 iframe 通信、3D 层叠、动画时序等技术问题

可复用的方法

  • 分治思想：将大型项目拆分为独立模块，每个模块单独用 SOLO 实现，再整合
  • Prompt 迭代法：先给粗粒度需求，看结果后再逐步细化，比一次性给超长 Prompt 效果更好
  • 知识验证闭环：SOLO 生成专业内容后，务必人工验证准确性，再让 SOLO 修正

反思

这个项目让我深刻体会到：AI 不是替代创作者，而是放大创作者的意图。我对宋代园林的热爱、对叙事节奏的把控、对交互体验的追求——这些是 AI 无法替代的。但 SOLO 帮我跨越了「想法」到「作品」之间最艰难的那段距离——从几周压缩到了几天。

正如游戏中清砚所说：“执念是有重量的，而解开执念，需要等量的理解。” 用数字媒体活化传统文化，需要的不仅是技术，更是对文化的真诚理解。SOLO 帮我更快地到达了那个理解的起点。

使用 TRAE SOLO 从零完成，一个本科生的古建科普游戏实践。