docs: add P15 Dagre key-moment timeline plan to FUTURE, preserve platform extensions
This commit is contained in:
53
FUTURE.md
53
FUTURE.md
@@ -91,7 +91,58 @@
|
|||||||
- 画面震动强度/频率可配置
|
- 画面震动强度/频率可配置
|
||||||
- 动态字幕说话人识别(AI 自动标注)
|
- 动态字幕说话人识别(AI 自动标注)
|
||||||
|
|
||||||
## P15 平台化 - 扩展
|
## P15 章节回顾 — 关键节点时间线图(Life is Strange 方案)
|
||||||
|
|
||||||
|
### 背景
|
||||||
|
|
||||||
|
当前 P15 的章节回顾是**列表模式**(BFS 遍历可达场景 + visited/unvisited 列表 + 完成度百分比 + 条件提示),已满足核心目标——知道哪些场景到过、漏了什么、怎么解锁。
|
||||||
|
|
||||||
|
原计划使用 Vue Flow 完整分支图,但经评估后确认:分支数多时(多父同子、回边循环),自动布局的流程图会变成"意大利面",玩家理解成本反高于简单列表。
|
||||||
|
|
||||||
|
### 业界对比
|
||||||
|
|
||||||
|
| 方案 | 做法 | 清晰度 | 成本 |
|
||||||
|
|------|------|--------|------|
|
||||||
|
| **Detroit 手绘图** | 美术逐章手工设计 InfoGraphic | 极高 | 极高 |
|
||||||
|
| **Life is Strange 时间线** | 只画 `keyMoment` 标记的关键节点,Dagre 自动排成水平时间线,跳过琐碎小场景 | 高 | 中 |
|
||||||
|
| **Telltale 纯统计** | 片尾弹出 "52% 玩家选了救 Doug",不画任何图 | N/A | 极低 |
|
||||||
|
| **当前列表版** | BFS 遍历全场景 + visited/unvisited 标记 | 中 | 已实现 |
|
||||||
|
|
||||||
|
### 实施路线
|
||||||
|
|
||||||
|
当需要可视化展示时,采用 **Life is Strange 时间线方案**:
|
||||||
|
|
||||||
|
**数据层:**
|
||||||
|
```ts
|
||||||
|
// engine/types.ts
|
||||||
|
interface SceneNode {
|
||||||
|
// ...existing fields
|
||||||
|
keyMoment?: boolean // 标记为"关键节点",只有这些节点出现在时间线图中
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**布局引擎:**
|
||||||
|
- 复用编辑器已有的 Dagre 布局(`editor/composables/useLayout.ts`)
|
||||||
|
- `rankdir: 'LR'` 从左到右水平排列
|
||||||
|
- 只遍历 `keyMoment === true` 的场景,普通场景跳过不渲染
|
||||||
|
- 仅展示关键节点之间的 choices / nextScene / QTE 跳转关系
|
||||||
|
|
||||||
|
**视觉设计:**
|
||||||
|
- visited 节点:绿色实心
|
||||||
|
- unvisited 节点:灰色虚线边框
|
||||||
|
- 回边(循环引用):虚线 + 半透明
|
||||||
|
- 条件提示:小锁图标 + 文本(如 `🔒 trust >= 80`)
|
||||||
|
- 普通小场景完全不出现,避免线路交织
|
||||||
|
|
||||||
|
**组件:**
|
||||||
|
- `src/components/ChapterTimeline.vue` — 新建,只读 Vue Flow + Dagre 时间线
|
||||||
|
- 与 `ChapterRecap.vue` 并列,不同入口或同一个面板的切换 Tab
|
||||||
|
|
||||||
|
### 优先级
|
||||||
|
|
||||||
|
低。列表版已满足 P15 核心目标,时间线图是锦上添花的视觉增强。
|
||||||
|
|
||||||
|
## P15+ 平台分发 - 扩展
|
||||||
|
|
||||||
- PWA 支持(离线播放、安装到桌面)
|
- PWA 支持(离线播放、安装到桌面)
|
||||||
- Web Monetization API 付费解锁章节
|
- Web Monetization API 付费解锁章节
|
||||||
|
|||||||
Reference in New Issue
Block a user