149 lines
4.7 KiB
Markdown
149 lines
4.7 KiB
Markdown
# P15 结局画廊 + 章节回顾 + 分支图
|
||
|
||
## 概述
|
||
|
||
通关后的"重玩驱动力"系统，对标 Detroit: Become Human 的流程回顾功能。三个概念递进：**分支图**是底座，**章节回顾**是在分支图上叠加统计和提示，**结局画廊**是独立入口。
|
||
|
||
---
|
||
|
||
## 1. 结局画廊 (Ending Gallery)
|
||
|
||
### 形态
|
||
|
||
一张缩略图网格，每张卡片对应一个结局：
|
||
|
||
```
|
||
┌────────────┐ ┌────────────┐ ┌────────────┐
|
||
│ 信任的伙伴 │ │ 独行之路 │ │ ? │
|
||
│ (已解锁) │ │ (已解锁) │ │ 🔒 未解锁 │
|
||
│ ［画面缩略图］│ │ ［画面缩略图］ │ │ ［灰色剪影］ │
|
||
└────────────┘ └────────────┘ └────────────┘
|
||
```
|
||
|
||
已解锁：显示结局场景截图 + 标题。未解锁：显示锁图标 + 灰色占位。
|
||
|
||
### 数据层
|
||
|
||
```json
|
||
// demo.json 顶层
|
||
{
|
||
"endings": [
|
||
{
|
||
"id": "trust_end",
|
||
"label": "信任的伙伴",
|
||
"sceneId": "trust_ending",
|
||
"thumbnail": "/images/end_trust.jpg"
|
||
},
|
||
{
|
||
"id": "alone_end",
|
||
"label": "独行之路",
|
||
"sceneId": "alone_ending",
|
||
"thumbnail": "/images/end_alone.jpg"
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
### 判断逻辑
|
||
|
||
引擎 `goToScene` → 自动 mark `visitedSceneIds.add(scene.id)`。画廊判断：
|
||
|
||
```
|
||
图库卡片解锁 = visitedSceneIds.has(ending.sceneId)
|
||
```
|
||
|
||
不独立建"结局表"，共用 visited 追踪。场景的 `id` 和结局的 `sceneId` 对得上就算到达过。
|
||
|
||
---
|
||
|
||
## 2. 分支图 (Branch Map)
|
||
|
||
### 形态
|
||
|
||
一张**只读的 Vue Flow 流程图**，展示该章节所有可能的场景路径。和编辑器一样是节点+连线，但**不能编辑**。
|
||
|
||
| 状态 | 样式 |
|
||
|------|------|
|
||
| 已走过 | 绿色实心节点 + 绿色连线 |
|
||
| 未走过 | 灰色虚线边框节点 + 灰色连线 |
|
||
| 当前查看的章节 | 高亮标注 |
|
||
|
||
### 数据来源
|
||
|
||
- **全部路径**：从 `SceneManager.getScenes()` 获取所有场景，根据 choices / nextScene / QTE 生成所有可能的连线
|
||
- **已走路径**：对比 `visitedSceneIds`，匹配上的标绿
|
||
- **BFS 可达范围**：从章节的 `startScene` 做 BFS，得到该章的理论可达节点集合（作为分母算完成度）
|
||
|
||
### 节点定义
|
||
|
||
```
|
||
intro ──→ left_door ──→ trust_ending (结局) ← 如果走过，绿色
|
||
│ ↘ alone_ending (结局) ← 如果走过，绿色
|
||
│ ↗
|
||
└──→ stay ───────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## 3. 章节回顾 (Chapter Recap)
|
||
|
||
### 形态
|
||
|
||
分支图 + 两个信息层叠加：
|
||
|
||
**完成度百分比：**
|
||
|
||
```
|
||
┌─────────────────────────────────────┐
|
||
│ 第一章 "醒来" │
|
||
│ ████████████░░░░░░░░ 3/7 (43%) │
|
||
│ 已发现 3/7 个场景 │
|
||
└─────────────────────────────────────┘
|
||
```
|
||
|
||
分母：从该章 `startScene` BFS 遍历能得到的所有场景数。分子：这些场景中 visited 了哪些。
|
||
|
||
**条件提示：**
|
||
|
||
未走过的灰色节点上标出解锁条件：
|
||
|
||
```
|
||
┌──────────────────┐
|
||
│ 🔒 secret_ending │
|
||
│ 需要 trust >= 80 │
|
||
└──────────────────┘
|
||
```
|
||
|
||
引擎读取目标节点的 choice 或 hotspot 对应的 `conditions`，展示第一个未满足的条件的提示文案。
|
||
|
||
---
|
||
|
||
## 交互流程
|
||
|
||
```
|
||
游戏结束
|
||
│
|
||
├─→ 结局画廊（检查本局新解锁了哪些结局卡片）
|
||
│ │
|
||
│ └─→ 点击某章 → 章节回顾
|
||
│ │
|
||
│ ├─→ 查看完整度 "3/7 (43%)"
|
||
│ ├─→ 看分支图："这条路我没走过"
|
||
│ └─→ 看条件提示："需要 trust >= 80"
|
||
│
|
||
└─→ 重玩动力："下次试试提升 trust 来看看 secret_ending"
|
||
```
|
||
|
||
---
|
||
|
||
## 技术要点
|
||
|
||
| 要点 | 做法 |
|
||
|------|------|
|
||
| 路径追踪 | `visitedSceneIds: Set<string>`，`goToScene` 中 `visited.add(scene.id)` |
|
||
| 结局判定 | 共用 `visitedSceneIds`，不独立建表 |
|
||
| 完成度分母 | BFS 从 `startScene` 遍历 `scenes` 对象，得到可达集合 |
|
||
| 条件提示 | 查对应 choice/hotspot 的 `conditions` 数组，取第一个未满足的条件 |
|
||
| 分支图渲染 | Vue Flow 只读模式 + `nodes`/`edges` 动态构建 + visited 着色 |
|
||
| 持久化 | SaveSystem `visited` 表（DB v6） |
|