feat: electron desktop packaging, CDN asset migration, production docs, scene JSON spec
This commit is contained in:
157
FUTURE.md
157
FUTURE.md
@@ -184,4 +184,159 @@ AI工具也一样，一个不懂电影游戏制作的人，只靠AI是做不出
|
||||
|
||||
本引擎就是帮助懂电影游戏制作的人更快更高质量的完成产品，AI是帮助引擎更容易使用，达到降本增效的效果。
|
||||
|
||||
引擎帮助人降本增效，AI帮助引擎更容易被使用和提升产出效率。
|
||||
引擎帮助人降本增效，AI帮助引擎更容易被使用和提升产出效率。
|
||||
|
||||
## 游戏内流图可视化 — Detroit 式分支图即时查看
|
||||
|
||||
基于已有 P15 的章节回顾 Vue Flow 节点图，升级为游戏内实时查看。
|
||||
玩家在决策点暂停时，可快速预览当前章节的分支结构，已走路高亮，未解锁路径灰色。
|
||||
|
||||
**核心功能：**
|
||||
|
||||
- 暂停菜单中新增"查看分支图"按钮，点击后全屏展示当前章节流图
|
||||
- 已到达场景节点绿色实心，当前场景节点带呼吸动画
|
||||
- 未到达场景灰色虚线边框，提前未知路径用虚线表示
|
||||
- 条件分支显示条件提示（如"需要 trust >= 80"），帮助玩家理解未解锁原因
|
||||
- 点击已到达的节点可直接跳转到该场景重新开始（需玩家确认）
|
||||
|
||||
**数据依赖（已有基础）：**
|
||||
- `visitedSceneIds`（P15 — `goToScene` 自动记录，IndexedDB 持久化）
|
||||
- 场景间边关系（从 `SceneManager.getScenes()` 解析 choices / nextScene / qte success/fail / hotspots，BFS 遍历）
|
||||
- 章节起始场景（P8 — `ChapterInfo.startScene`）
|
||||
- Vue Flow 组件（P3 编辑器已有，只读渲染 + 高亮 + 动画）
|
||||
|
||||
**关键技术点：**
|
||||
- 章节可达场景 BFS 遍历（P15 ChapterRecap 已有实现）
|
||||
- 节点 `visited` 高亮样式（P15 已有）
|
||||
- 节点跳转回游戏内场景 → 引擎已有 `startChapter → goToScene`，新增 `jumpToScene(sceneId)` 直接跳（不重置变量，作为"分歧点回退"）
|
||||
|
||||
**实现要点：**
|
||||
- [ ] `src/components/InGameFlowChart.vue` — 复用 Vue Flow，只读模式 + 呼吸动画 + 节点点击跳转
|
||||
- [ ] `src/stores/gameStore.ts` — `showFlowChart` 状态 + 当前章节场景图数据
|
||||
- [ ] `src/App.vue` — 暂停菜单/ESC 菜单中增加"查看分支图"入口
|
||||
- [ ] `engine/core/Engine.ts` — 支持从流图节点跳转到场景（`jumpToScene(sceneId)`）
|
||||
|
||||
## 人物关系系统 — 角色好感度可视化
|
||||
|
||||
对标 Detroit 的角色关系 HUD。游戏变量中角色好感度值（如 trust / friendship）在决策后通过角色头像 +
|
||||
关系变化值（+数值显示）+ 迷你进度条动画展示给玩家，增强叙事沉浸感和角色互动的反馈。
|
||||
|
||||
**核心功能：**
|
||||
|
||||
- JSON 中定义角色信息：头像 URL、名称标签、关联变量
|
||||
- 变量值变化时 → HUD 弹出角色头像 + 变化值（如 `+10 信任`），短暂停留后淡出
|
||||
- 暂停或按特定键可查看完整的角色好感度一览（个人资料 + 当前值 + 历史变化趋势）
|
||||
|
||||
**数据示例：**
|
||||
```json
|
||||
{
|
||||
"characters": [
|
||||
{ "id": "stranger", "name": "陌生人", "portrait": "/images/stranger.jpg", "variable": "trust" },
|
||||
{ "id": "partner", "name": "伙伴", "portrait": "/images/partner.jpg", "variable": "courage" }
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
**技术架构：**
|
||||
- `StateManager.apply` 前快照旧值 → apply 后计算变化 → emit `relationChange` 事件
|
||||
- `RelationshipHUD.vue` 监听事件，显示浮动弹出（`+/- N`）+ 头像 → 短暂停留后自动消失
|
||||
- 完整角色一览面板通过暂停菜单按钮打开
|
||||
|
||||
**实现要点：**
|
||||
- [ ] `engine/types.ts` — `GameData.characters: CharacterDef[]`
|
||||
- [ ] `engine/core/StateManager.ts` — `apply` 前快照 `variables` → apply 后对比 → emit `relationChange`
|
||||
- [ ] `src/components/RelationshipHUD.vue` — 底部/侧边角色头像条，值变化时弹出变化箭头动画
|
||||
- [ ] `src/stores/gameStore.ts` — `changedCharacters` 列表（前/后变量值对比结果）
|
||||
- [ ] `src/App.vue` — 整合 RelationshipHUD
|
||||
|
||||
## Engine/UI 分离架构 — 制作者定制 UI 能力
|
||||
|
||||
当前 `moviegame-starter` 分发的是完整构建产物（引擎 + UI 打包在一起），制作者只能改 JSON。
|
||||
要给制作者更多 UI 定制能力，需要将引擎和 UI 拆分为独立的可替换层。
|
||||
|
||||
### 目标架构
|
||||
|
||||
```
|
||||
moviegame-engine (npm 包 / CDN 脚本，闭源)
|
||||
└── engine/core/*.ts → dist/engine.mjs
|
||||
Engine, VideoManager, StateManager, SceneManager, AudioSystem ...
|
||||
|
||||
moviegame-ui (npm 包 / 源文件分发，开源)
|
||||
└── src/components/*.vue 源码暴露
|
||||
GamePlayer, ChoicePanel, Subtitles, QTEOverlay ...
|
||||
└── src/composables/useGameEngine.ts 桥接引擎和 UI
|
||||
|
||||
moviegame-starter (制作者项目)
|
||||
├── imports: moviegame-engine + moviegame-ui
|
||||
├── public/ ← 视频、音频、JSON
|
||||
├── src/App.vue ← 制作者自由修改
|
||||
└── theme.css ← 制作者写 CSS
|
||||
```
|
||||
|
||||
### 三层用户定制方案
|
||||
|
||||
| 技能等级 | 使用方式 | 修改什么 |
|
||||
|----------|---------|---------|
|
||||
| **零代码**（预计 90% 制作者） | clone starter → 只改 JSON + 换视频 | 不动代码 |
|
||||
| **会 CSS**（预计 8% 制作者） | 改 `theme.css` — 颜色、字体、按钮样式 | 一行 `<link>` 引入 |
|
||||
| **会 Vue**（预计 2% 制作者） | fork `moviegame-ui` → 改 `.vue` 组件 → `npm install` 自己版本 | 完全重做 UI |
|
||||
|
||||
### 方案 A: CSS 主题变量（JSON 驱动）
|
||||
|
||||
在 `my_story.json` 顶层加 `theme` 字段，映射到 CSS 变量。复杂度低，但表达力有限。
|
||||
|
||||
```json
|
||||
{
|
||||
"theme": {
|
||||
"primaryColor": "#ff6b35",
|
||||
"bgColor": "#1a1a2e",
|
||||
"fontSize": 16,
|
||||
"subtitleColor": "#ffff00"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 方案 B: 自定义 CSS 文件（推荐）
|
||||
|
||||
`dist/` 中放空 `theme.css`，引擎 `index.html` 中 `<link>` 引入。制作者填 CSS 覆盖默认样式。
|
||||
一行代码解决，零侵入引擎，零复杂度。面向 98% 的定制需求。
|
||||
|
||||
```html
|
||||
<!-- index.html -->
|
||||
<link rel="stylesheet" href="/theme.css">
|
||||
```
|
||||
|
||||
```css
|
||||
/* theme.css — 制作者自由填 */
|
||||
.choice-btn { border-radius: 20px; background: linear-gradient(...); }
|
||||
.subtitles .sub-text { font-family: 'MyCustomFont', serif; }
|
||||
```
|
||||
|
||||
### 方案 C: 开放 UI 源码（Vue 组件替换）
|
||||
|
||||
`moviegame-ui` 发布 Vue `.vue` 源码包，制作者 `npm install` 后可直接修改组件。
|
||||
适合有前端能力的高级制作者，可完全重做 UI（如把选项列表改成对话轮盘）。
|
||||
|
||||
### engine 本身体积大小预估
|
||||
|
||||
若 engine 独立构建为 ESM 库：
|
||||
|
||||
- 当前 engine 代码共 6 个 TS 文件：`Engine.ts` (417 行)、`StateManager.ts` (102 行)、`VideoManager.ts` (188 行)、`SceneManager.ts` (53 行)、`AudioSystem.ts` (145 行)、`ChoiceSystem.ts` / `QTESystem.ts` / `AchievementSystem.ts` / `SaveSystem.ts`
|
||||
- 总计约 1600 行 TS，`tsc` 编译后约 15-20KB minified
|
||||
- 不包含 Vue / Pinia / Dexie / Vue Flow — 这些属于 UI 层或按需引入
|
||||
- 可作为极轻量 CDN 脚本分发：`<script src="moviegame-engine.min.js">`
|
||||
|
||||
### 编辑器拆分
|
||||
|
||||
编辑器同理：编辑器 UI（Vue Flow 节点图）属于 UI 层，数据层（`SceneManager.getScenes()`）属于 engine 层。
|
||||
拆分后编辑器也引用同一个 `moviegame-engine` 包。
|
||||
|
||||
### 实施清单（远期）
|
||||
|
||||
- [ ] engine 独立 Vite build（`vite build --config vite.engine.config.ts`）→ `dist/engine.mjs`
|
||||
- [ ] engine 发布 npm：`moviegame-engine` — `export { Engine, VideoManager, ... }`
|
||||
- [ ] UI 层剥离：Vue 组件 + composables 从 engine 项目中抽到独立目录
|
||||
- [ ] `moviegame-ui` 发布 npm（源码包，不编译，`.vue` 文件保留）
|
||||
- [ ] starter 改造：Vite + Vue + Pinia 脚手架，引入 engine + ui 两个 npm 包
|
||||
- [ ] `theme.css` 空白模板 + 注释（CSS 定制方案 B）
|
||||
- [ ] 编辑器重新引用 `moviegame-engine` 包
|
||||
Reference in New Issue
Block a user