【标签】 生活娱乐
【标题】【生活娱乐】跑团/剧本杀主持人辅助器
0. 先和大家打个招呼吧 
-
你是谁： 我是一名AI漫剧课的老师，完全不会编程，使用trae超过1年了，几乎刚出就在用；
-
**你是怎么用 TRAE 把 Demo 做出来的：**一开始只是一个灵感，我用AI做了一个把pad当牌桌，手机当手牌区玩桌游的一个玩法。然后就想要把这个玩法扩展一下变得更有商业潜力，于是就想到这个玩法。加上我本人本来就和喜欢玩跑团和剧本杀，也当过主持人，知道这个玩法的潜力和痛点于是就一步步把效果做出来了
1.Demo 简介
是什么:它是一个基于 Web 的实时多人跑团/剧本游戏辅助系统,支持主持人(host)控制台、公共版图(Pad 大屏)、最多 6 名玩家(手机端)实时同步。纯浏览器访问,无需安装 App,扫码即加入的跑团&剧本杀模拟器，帮助主持人可以更好的主持人游戏。
面向谁:桌面角色扮演游戏(TRPG)的主持人(KP/DM)和剧本杀玩家群体,适合线下聚会跑团和剧本杀游戏场景——主持人用电脑操控,玩家用手机交互,大屏电视/平板展示公共版图。
主要功能：
1. **实时多人版图与棋子系统** — 主持人上传版图背景、拖动放置 NPC/线索/事件标记,玩家棋子在大屏实时同步移动;支持回合制管理、HP 显示、地图标记定位。
2. **AI 驱动的 NPC 对话与图片生成** — 接入 Agnes AI(支持自定义 OpenAI 兼容 API),主持人一键生成版图背景、NPC 立绘、物品图标;NPC 支持多轮 AI 对话(含性格、记忆、开场白、目的设定),未启用 AI 时主持人可手动回复玩家消息,支持共享对话模式(所有玩家共用一个对话历史)。
3. **NPC 商店 + 线索卡 + 背包系统** — 主持人为 NPC 配置商品(金币图标
+库存图标
),玩家手机端实时同步商店并购买;线索卡可推送到指定玩家背包,玩家可查看/拾取/管理物品。
4. ****多功能剧本杀&跑团主持人辅助系统****主持人可以一键给玩家发送线索，物品与玩家进行私聊，保存当前对局信息，并快速读取。设置bgm，投骰子互动，扮演npc语音或者文字交流。方便不同玩家队伍分散探索等。
2.Demo 创作思路
**灵感来源**:线下面跑 TRPG(如《克苏鲁的呼唤》《龙与地下城》)时,主持人需要同时管理大量信息——版图、NPC、线索、玩家状态、剧情推进——全靠纸笔和口头描述,效率低且容易遗漏。玩家也缺乏沉浸式的交互界面,只能靠想象。我们希望用技术把"主持人脑中的世界"可视化、可交互化。同时也能够兼容剧本杀主持人的需求
**想解决的问题**:
主持人负担过重:一人要同时管理版图、NPC对话、物品分发、玩家状态,容易顾此失彼
玩家沉浸感不足:纯口头描述缺乏视觉反馈,新手玩家难以代入
工具割裂:现有跑团工具要么只有骰子(在线工具),要么只有地图(VTT),缺少整合主持人全流程的轻量方案
AI 融入跑团:NPC 对话靠主持人即兴扮演,质量参差;图片素材靠手工找或画,耗时
**对局保存与set up：**主持人每次需要准备大量反复准备各种物品，麻烦还要损耗。长团时内容信息的保存。
**为什么做这个方向**:
- TRPG 正在国内快速兴起,但中文友好的轻量工具稀缺
- Web 技术成熟(WebSocket 实时同步 + AI API),可以在不装 App 的前提下实现复杂交互
- "主持人电脑 + 玩家手机 + 大屏平板"的设备组合正好对应线下跑团场景,无需额外硬件
- AI 生图和对话能力让 NPC 真正"活起来",这是传统工具做不到的差异点，同时方便主持人的即兴发挥和及时的创作
- 取舍:不做重型 VTT(如 Foundry),而是做"开箱即用、扫码即玩"的轻量辅助器
3. Demo 体验地址（三选一）
trpg-desk-v2.4.50-windows.zip (193.2 KB)
4. TRAE 实践过程
整个项目从零到 v2.4.50,全程使用 TRAE IDE + AI 辅助开发,经历了 10+ 个版本迭代。核心开发流程:
1. **需求描述 → AI 理解 → 代码生成 → 语法检查 → 重启验证** 的循环
2. 复杂任务拆分为子任务,用 Task 工具并行处理(如 NPC 页面重构、打包发布)
3. 使用 SearchCodebase/Grep/Read 工具快速定位代码,AI 理解上下文后精准修改
4. 通过 RunCommand 工具执行 `node --check` 语法验证 + 重启服务器实时测试
### 关键开发步骤
**步骤 1:项目初始化与核心架构搭建**
- 用 TRAE 创建 Node.js + Express + Socket.IO 项目骨架
- AI 生成初始状态管理(roles、maps、npcs、players 数据结构)
- 实现基础的 WebSocket 实时同步机制
**步骤 2:AI 图片生成功能集成(v2.4.41)**
- 通过 TRAE 的 Skill 工具调用 agnes-ai-generation 技能,获取 Agnes AI API 文档
- AI 生成 `agnesImage()` 函数,处理 API 调用、图片下载、base64 解码
- 实现主持人端版图/NPC头像/物品图标的 AI 生成界面
- 截图:AI 生图弹窗 + 生成结果展示
**步骤 3:NPC AI 对话系统(v2.4.45-v2.4.48)**
- AI 理解多轮对话需求,生成 `agnesChat()` 函数支持 messages 数组
- 实现 Galgame 风格对话界面(立绘 + 对话框 + 语音输入)
- AI 协助实现共享对话模式(chatKey 逻辑)、手动回复模式、对话监控
- 截图:NPC 对话界面 + 主持人对话监控面板
**步骤 4:NPC 页面重构与商店系统(v2.4.48-v2.4.49)**
- 用 Task 工具启动子代理,并行完成 NPC 卡片样式重构(不折叠、模块化展示)
- AI 生成商店渲染逻辑(金币图标 + 库存图标)、购买流程、实时同步
- 修复 findNpcById 跨端兼容、stripNpc 深拷贝等 bug
- 截图:NPC 卡片页面(内联展示所有信息)+ 玩家端商店界面
关键任务对话的 Session ID
有一些对话有些久远，无法找到了
2443576346163353:ed519ccea0dcf5a19511054cc7f0b01d_6a2b465df719abdf3b075040.6a39483d2dcb63d9236bcece.6a39483d2dcb63d9236bcecc:TRAE Work CN.0.1.23.no_sid.no_ppe.T(2026/6/22 22:35:41)
2443576346163353:bfbccc471fe96cecc6cfa33812fdfc75_6a2b465df719abdf3b075040.6a3a83e94fb4b7cdbd897737.6a3a83e84fb4b7cdbd897735:TRAE Work CN.0.1.23.no_sid.no_ppe.T(2026/6/23 21:02:33)
2443576346163353:8192f8064831607a031d69648ce5d440_6a2b465df719abdf3b075040.6a3bc20c3be5e7ad7f45b26d.6a3bc20c3be5e7ad7f45b26b:TRAE Work CN.0.1.23.no_sid.no_ppe.T(2026/6/24 19:39:56)
5. 对应的报名审核通过的帖子链接