docs: update P15 to reflect list-based recap, add Dagre timeline future plan
This commit is contained in:
43
ROADMAP.md
43
ROADMAP.md
@@ -784,18 +784,38 @@ QTE 成功 / 到达隐藏结局 / 通关等"事件型"成就,通过在对应 e
|
|||||||
- [x] `src/App.vue` — 整合 AchievementToast + 主菜单"成就"入口
|
- [x] `src/App.vue` — 整合 AchievementToast + 主菜单"成就"入口
|
||||||
- [x] `public/scenes/demo.json` — 3 个成就 + QTE success 变量 set + alone_ending onEnter
|
- [x] `public/scenes/demo.json` — 3 个成就 + QTE success 变量 set + alone_ending onEnter
|
||||||
|
|
||||||
### P15 结局画廊 + 章节回顾 — 分支图 + 完成度百分比 + 条件提示 ✅ 已完成 2026-06-09
|
### P15 结局画廊 + 章节回顾 — 列表 + 完成度百分比 + 条件提示 ✅ 已完成 2026-06-09
|
||||||
|
|
||||||
目标:通关后展示结局画廊和章节分支流程图,包含完成度百分比和未解锁分支的条件提示,
|
目标:通关后展示结局画廊和章节场景清单,包含完成度百分比和未解锁分支的条件提示,
|
||||||
驱动重玩探索。对标 Detroit 的流程图体验。
|
驱动重玩探索。
|
||||||
|
|
||||||
**设计决策(对标 Detroit / Dark Pictures):**
|
**设计决策:**
|
||||||
|
|
||||||
| 决策 | 做法 |
|
| 决策 | 做法 |
|
||||||
|------|------|
|
|------|------|
|
||||||
| **结局存储** | 共用 `visitedSceneIds`,不独立建表。`endings` 数组声明哪些场景是结局,画廊查 `visitedSceneIds.has(sceneId)` |
|
| **结局存储** | 共用 `visitedSceneIds`,不独立建表。`endings` 数组声明哪些场景是结局,画廊查 `visitedSceneIds.has(sceneId)` |
|
||||||
| **路径追踪** | **节点级** `visitedSceneIds: Set<string>` — `goToScene` 中 `visited.add(scene.id)` |
|
| **路径追踪** | **节点级** `visitedSceneIds: Set<string>` — `goToScene` 中 `visited.add(scene.id)` |
|
||||||
| **回顾 UI** | Vue Flow 只读完整分支图 + 已到达节点绿色实心高亮 + 未到达节点灰色虚线边框 |
|
| **回顾 UI** | 列表模式:BFS 遍历可达场景 → visited/unvisited 列表 + 完成度百分比 + 条件提示 |
|
||||||
|
|
||||||
|
> **关于分支图(未实施):** 原计划使用 Vue Flow 只读完整分支图(绿色实心高亮 visited 节点、灰色虚线边框 unvisited 节点),但经评估后确认:分支数一旦增多(多父同子、回边循环),自动布局的流程图会变成"意大利面",玩家理解成本反而高于简单列表。列表版已满足 P15 的核心目标——知道哪些场景到过、漏了什么、怎么解锁。
|
||||||
|
>
|
||||||
|
> **业界对比与未来路线:**
|
||||||
|
>
|
||||||
|
> | 方案 | 做法 | 清晰度 | 成本 |
|
||||||
|
> |------|------|--------|------|
|
||||||
|
> | **Detroit 手绘图** | 美术逐章手工设计 InfoGraphic | 极高 | 极高 |
|
||||||
|
> | **Life is Strange 时间线** | 只画 `keyMoment` 标记的关键节点,Dagre 自动排成水平时间线,跳过琐碎小场景 | 高 | 中 |
|
||||||
|
> | **Telltale 纯统计** | 片尾弹出 "52% 玩家选了救 Doug",不画任何图 | N/A | 极低 |
|
||||||
|
> | **当前列表版** | BFS 遍历全场景 + visited/unvisited 标记 | 中 | 已实现 |
|
||||||
|
>
|
||||||
|
> **未来升级路线(Life is Strange 时间线方案):**
|
||||||
|
>
|
||||||
|
> 当需要可视化展示时,采用 Dagre 时间线方案而非全分支图:
|
||||||
|
> - `SceneNode.keyMoment?: boolean` — 场景标记为"关键节点",只有标记了的场景才出现在时间线图中
|
||||||
|
> - Dagre `rankdir: 'LR'` 从左到右水平排列,仅展示关键节点的 choices / nextScene / QTE 跳转
|
||||||
|
> - visited 节点绿色实心,unvisited 节点灰色虚线,条件提示小锁
|
||||||
|
> - 普通小场景不展示,避免线路交织
|
||||||
|
> - 回边用虚线半透明处理
|
||||||
|
|
||||||
**结局画廊:**
|
**结局画廊:**
|
||||||
|
|
||||||
@@ -810,30 +830,31 @@ QTE 成功 / 到达隐藏结局 / 通关等"事件型"成就,通过在对应 e
|
|||||||
|
|
||||||
引擎 `goToScene` 到达场景时自动记录 visited。画廊检查 `visitedSceneIds.has(ending.sceneId)`。
|
引擎 `goToScene` 到达场景时自动记录 visited。画廊检查 `visitedSceneIds.has(ending.sceneId)`。
|
||||||
|
|
||||||
**章节回顾新增:**
|
**章节回顾(当前列表版):**
|
||||||
|
|
||||||
**完成度百分比:** 每章展示 "3/7 (43%) 场景已发现"。
|
**完成度百分比:** 每章展示 "3/7 (43%) 场景已发现"。
|
||||||
统计该章 `startScene` 可达的场景数作为分母,visited 中属于本章的场景数作为分子。
|
统计该章 `startScene` 可达的场景数作为分母,visited 中属于本章的场景数作为分子。
|
||||||
|
|
||||||
**条件提示:** 分支图中一些灰色节点显示小锁图标 + 条件提示:
|
**条件提示:** 未到达节点显示小锁图标 + 条件提示:
|
||||||
```
|
```
|
||||||
[灰色节点] 🔒 需要 trust >= 80
|
⬜ secret_ending 🔒 trust >= 80
|
||||||
```
|
```
|
||||||
引擎读取该边对应 choice/hotspot 的 `conditions`,展示第一个未满足的条件。
|
引擎读取该边对应 choice/hotspot 的 `conditions`,展示第一个未满足的条件。
|
||||||
|
|
||||||
**实现清单:**
|
**实现清单:**
|
||||||
|
|
||||||
- [x] `engine/types.ts` — `GameData.endings`、`EndingDef { id, label, sceneId, thumbnail? }`
|
- [x] `engine/types.ts` — `GameData.endings`、`EndingDef { id, label, sceneId, chapterId?, thumbnail? }`
|
||||||
- [x] `engine/core/Engine.ts` — `goToScene` 中 `onMarkVisited(scene.id)` 回调
|
- [x] `engine/core/Engine.ts` — `goToScene` 中 `onMarkVisited(scene.id)` 回调
|
||||||
- [x] `engine/core/SceneManager.ts` — `getScenes()` 公开 scenes 数据
|
- [x] `engine/core/SceneManager.ts` — `getScenes()` 公开 scenes 数据
|
||||||
- [x] `engine/systems/SaveSystem.ts` — DB v6 新增 `visited` 表
|
- [x] `engine/systems/SaveSystem.ts` — DB v6 新增 `visited` 表
|
||||||
- [x] `src/components/EndingGallery.vue` — 结局缩略图网格 + 锁定(?剪影)/解锁(画面)
|
- [x] `src/components/EndingGallery.vue` — 结局缩略图网格 + 锁定/解锁 + 点击打开章节回顾
|
||||||
- [x] `src/components/ChapterRecap.vue` — BFS 遍历可达场景 + 完成度进度条 + visited/unvisited 列表 + 条件提示
|
- [x] `src/components/ChapterRecap.vue` — BFS 遍历可达场景 + 完成度进度条 + visited/unvisited 列表 + 条件提示
|
||||||
- [x] `src/stores/gameStore.ts` — endings/visitedSceneIds/showEndingGallery 状态
|
- [x] `src/stores/gameStore.ts` — endings/visitedSceneIds/showEndingGallery 状态
|
||||||
- [x] `src/App.vue` — 主菜单"画廊"入口 + EndingGallery/ChapterRecap 组件
|
- [x] `src/App.vue` — 主菜单"画廊"入口 + EndingGallery/ChapterRecap 组件
|
||||||
- [x] `public/scenes/demo.json` — 3 个 endings + `end_*.jpg` 缩略图
|
- [x] `public/scenes/demo.json` — 3 个 endings + `end_*.jpg` 缩略图 + `chapterId` 关联
|
||||||
- [x] `public/images/end_{trust,alone,continue}.jpg` — 结局缩略图
|
- [x] `public/images/end_{trust,alone,continue}.jpg` — 结局缩略图
|
||||||
- [x] 验证:TypeScript + Vite build 通过
|
- [x] 验证:TypeScript + Vite build 通过
|
||||||
|
- [ ] 未来:Dagre 关键节点时间线图(`SceneNode.keyMoment?: boolean`)
|
||||||
|
|
||||||
### P16 平台化 — 云存档 + 可访问性 + 自适应码率 + 全局统计(待实现)
|
### P16 平台化 — 云存档 + 可访问性 + 自适应码率 + 全局统计(待实现)
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user