AVW-4:交互叙事引擎——Twine、Ren'Py、Ink、Inform、Shorthand 与 Idyll
AI 动态视觉 Web 专题 全景地图 | 动画引擎 | 数据可视化 | AVW-4 交互叙事 ← 本文 | AI 生成 UI | 视频与动效 | 程序化三剑客 | 中国生态 | 视觉指南
交互叙事与数据可视化并列,是 AI 的另外一条关键应用线。当 LLM 生成的内容不再是"一段回复",而是"一个分支故事"或"一段视觉小说"——你需要引擎来承载它。
1. Twine — 分支故事的标准答案
- 官网: twinery.org
- GitHub: klembot/twinejs · 1.5k+ stars
- 许可: GPL v3
- 代表作品: Depression Quest(IGF 获奖)、The Uncle Who Works for Nintendo
- 核心体验: 可视化的段落节点编辑器,纯 HTML 输出,任何浏览器打开
:: Start
你站在分岔路口。
[[往左走->Left Path]]
[[往右走->Right Path]]
与 LLM 结合: 嵌入 API 调用 → 玩家输入 → LLM 实时生成下一个分支。非程序员也能用。
2. Ren'Py — 视觉小说的工业引擎
- 官网: renpy.org
- GitHub: renpy/renpy · 5k+ stars
- 许可: MIT
- 代表作品: Doki Doki Literature Club!、Katawa Shoujo
- 输出平台: Windows / macOS / Linux / Android / iOS / Web
label start:
scene bg room
show character alice happy
alice "你好,我是 Alice。"
menu:
"问她关于 AI 的事":
alice "我对 AI 很感兴趣!"
jump ai_talk
Ren'Py + AI: 内建 Python 支持,可以直接调用 LLM API。一款视觉小说中每个 NPC 的对话都可以由 LLM 实时生成——每个玩家获得的对话都是独一无二的。
3. Ink — 程序化叙事的脚本引擎
- 官网: inklestudios.com/ink
- GitHub: inkle/ink · 4k+ stars
- 许可: MIT
- 代表作品: 80 Days(Metacritic 84 分)、Heaven's Vault
- 出品: Inkle Studios
= start =
你站在一条分岔路口。
* [往左走] -> left_path
* [往右走] -> right_path
Ink 的杀手特性是内容与呈现分离——你用 Ink 写故事逻辑,然后用任何界面框架(Unity、Web、React)渲染它。同一个 .ink 文件可以同时驱动 3D 游戏和纯文本网页。
Ink + AI: Ink 格式简洁,LLM 可以直接输出 Ink 脚本 → 引擎执行。这是"LLM → 结构化叙事"的最直接路径之一。
4. Inform 7 — 自然语言编程的交互小说
- 官网: ganelson.github.io/inform-website
- GitHub: ganelson/inform · 1k+ stars
- 许可: Artistic License 2.0
- 历史: Inform 1 始于 1993 年,Inform 7 于 2006 年
- 核心思想: 用自然语言写交互小说
The Forest is a room. "A dense forest with tall pine trees."
A wooden chest is a closed openable container in the Forest.
In the chest is a rusty key.
AI 时代的意义: Inform 7 代码读起来像自然语言 → LLM 可以直接输出 Inform 7 代码。如果你做"AI 驱动的文学性交互小说",Inform 的哲学最契合。
5. Shorthand — 媒体级的滚动叙事
- 官网: shorthand.com
- 客户: BBC、NYT、The Guardian、University of Cambridge
- 商业模式: 企业订阅
- 核心体验: 滚动驱动、全屏沉浸、富媒体嵌入
如果你想用 GSAP ScrollTrigger 实现 Shorthand 风格的效果,你需要写代码。Shorthand 是给内容团队的成品编辑器。
6. Idyll — 声明式交互文档
- 官网: idyll-lang.org/docs
- GitHub: idyll-lang/idyll · 2k+ stars
- 定位: 科学传播 + 交互文档
- 特色: 声明式标记语言 + 反应式变量,编译为 React
[var name:"threshold" value:0.5 /]
[derived name:"filteredData" value:`data.filter(d => d.score > threshold)` /]
当阈值设为 [Display value:threshold /] 时,
共有 [Display value:filteredData.length /] 条数据符合条件。
7. 与 LLM 结合的关键洞察
这六个引擎的共同点是文本驱动。它们的脚本格式(Twine Twee、Ren'Py rpy、Ink 标记、Inform 7 自然语言、Idyll 标记)都可以被 LLM 直接输出。
工作流正在变为现实:
用户输入: "写一个关于 AI 觉醒的视觉小说,三个结局"
↓
LLM 生成: 角色设定 + 剧情大纲 + 引擎脚本
↓
引擎渲染: 玩家交互 → 动态分支 → 结局
↓
LLM 实时对话: 每个 NPC 背后是 LLM API → 永远新鲜的对话
场景决策:
| 场景 | 首选 | 备选 |
|---|---|---|
| AI 对话小说(纯文本+分支) | Twine + LLM | Ink |
| AI 视觉小说(图+文字+分支) | Ren'Py + LLM | Twine + 自定义 |
| AI 游戏叙事(需关卡逻辑) | Ink + Unity | Ren'Py |
| AI 文学性交互小说 | Inform 7 | Ink |
| AI 数据报告 → 沉浸式网页 | Shorthand | Flourish |
| AI 科普文章(交互图表嵌入) | Idyll | Observable |
下一篇:AVW-5 AI 生成 UI 与 Agent 渲染——v0、bolt.new、CopilotKit、A2UI 协议
实操清单
- 访问 twinery.org,在线打开 Twine 编辑器,新建一个故事并添加至少两个段落节点,测试分支跳转
- 在 Twine 的某个段落节点内嵌入
<script>标签,调用 LLM API(如 OpenAI),实现玩家输入 → LLM 返回下一段剧情 - 安装 Ren'Py SDK,用官方示例脚本跑通一个包含场景切换和菜单选项的视觉小说原型
- 在 Ren'Py 脚本中用内建 Python 调用 LLM API,替换某个 NPC 的固定对话为实时生成内容
- 克隆 inkle/ink 仓库,用 Inky 编辑器编写一个含
*选项和->跳转的三分支短故事,并导出为 JSON - 让 LLM(ChatGPT / Claude)直接输出一段合法的
.ink格式脚本,粘贴到 Inky 中验证可运行 - 访问 Inform 7 官网,下载 IDE,用自然语言描述一个简单场景(一个房间 + 一件物品),编译并在 Story 面板中测试
take/examine等命令 - 用 LLM 输出一段 Inform 7 代码(描述一个地点和一个谜题),粘贴到 Inform 7 IDE 中验证语法是否合法
- 注册 Shorthand 免费试用账号,创建一个滚动叙事页面,插入全屏背景图和文字叠加层,体验其媒体级编辑体验
- 用
npm create idyll初始化一个 Idyll 项目,在文档中定义一个反应式变量[var],绑定到滑块,观察派生值随滑块变化 - 对照文章末尾的"场景决策"表,根据自己的项目需求(纯文本分支 / 视觉小说 / 科普文章)确定首选引擎,记录选型理由