交互式电影游戏引擎 — Roadmap

技术栈

框架: Vue 3 (Composition API + <script setup>)
构建: Vite
状态管理: Pinia
可视化编辑器: Vue Flow
存储: IndexedDB (Dexie.js)
BGM: Web Audio API
语言: TypeScript
视频: 原生 <video> + A/B 双缓冲

实现路线

P18 视频加载失败恢复（待实现）

目标：视频加载失败时显示错误画面 + 重试/跳过按钮，不再静默黑屏。

engine/core/VideoManager.ts — play/switchTo 增加错误回调 + 超时检测（5 秒）+ 重试（最多 3 次，指数退避 1s/2s/4s）
src/components/VideoErrorOverlay.vue — 错误画面：图标 + 提示 + [重试] [跳过] 按钮
src/stores/gameStore.ts — videoError 状态
src/App.vue — 整合 VideoErrorOverlay
验证：断网播放 → 错误画面 → 重试恢复 → 跳过下一场景

P24 多画质视频 — 本地 + CDN 流双模式 ✅ 已完成 2026-06-10

目标：桌面版用本地 videoUrl，Web 版用 CDN streamingUrl（HLS 流）。 Web 版不打包视频文件，用户手动选择超清/高清/标清，系统提示各画质所需网速。

设计决策：

决策	做法
环境检测	Electron `preload.js` 注入 `__ELECTRON__` → `VideoManager` 判断走本地还是 CDN
Web 画质	用户从设置面板手动选择（超清/高清/标清），非带宽自适应。localStorage 持久化
Web 打包	`pack:html` 跳过 `videos/` 目录，音频/图片/字幕保留
HLS 兼容	Safari 原生播放 `.m3u8`；Chrome/Edge 按需动态 `import('hls.js')`（~100KB）

场景数据设计：

{
  "id": "intro",
  "videoUrl": "/videos/intro.mp4",
  "streamingUrl": {
    "超清 (1080P)": "https://cdn.example.com/hls/intro/1080p.m3u8",
    "高清 (720P)": "https://cdn.example.com/hls/intro/720p.m3u8",
    "标清 (480P)": "https://cdn.example.com/hls/intro/480p.m3u8"
  }
}

设置面板画质选项：

选项	网速提示
超清 (1080P)	需要 2.5 Mbps
高清 (720P)	需要 2 Mbps
标清 (480P)	需要 0.8 Mbps

实现清单：

engine/types.ts — SceneNode.streamingUrl?: Record<string, string>
engine/core/VideoManager.ts — resolveVideoUrl(scene, quality) + streamingQuality 属性
engine/core/Engine.ts — goToScene 用 resolveVideoUrl 替代直接 scene.videoUrl
electron/preload.js — contextBridge.exposeInMainWorld('__ELECTRON__', true)
electron/main.js — webPreferences.preload 加载 preload.js
src/stores/gameStore.ts — preferredQuality + localStorage 持久化
src/components/AccessibilitySettings.vue — Web 模式新增画质下拉（附网速提示）
src/App.vue — watch preferredQuality → sync 到 engine.videoManager.streamingQuality
scripts/pack-html.cjs — 跳过 videos/ 目录
验证：TypeScript + Vite build 通过
验证：Electron window.__ELECTRON__ = true，使用本地 videoUrl
验证：浏览器 window.__ELECTRON__ = undefined，设置面板显示画质下拉
验证：pack:html 产物不包含 videos/ 目录

已完成

P0~P23 全部实现（除 P18）。详见 CHANGELOG.md。

文档	说明
docs/SCENE_JSON_SPEC.md	场景 JSON 完整字段参考手册
docs/ARCHITECTURE.md	关键架构决策记录
PRODUCTION.md	生产级交付检查清单
FUTURE.md	远期功能扩展笔记
CHANGELOG.md	功能更新日志

3.7 KiB Raw Blame History Unescape Escape

交互式电影游戏引擎 — Roadmap

技术栈

实现路线

P18 视频加载失败恢复（待实现）

P24 多画质视频 — 本地 + CDN 流双模式 ✅ 已完成 2026-06-10

已完成

相关文档

3.7 KiB

Raw Blame History