交互式电影游戏引擎

基于 Vue 3 + TypeScript 的浏览器端交互式电影游戏引擎。

快速开始

npm install
npm run dev

浏览器打开 http://localhost:5173/ 即可体验示例剧情。

如何使用

1. 编写剧情 JSON

在 public/scenes/ 目录下创建 JSON 文件，定义你的场景和分支：

{
  "startScene": "scene_1",
  "variables": {
    "trust": 50,
    "courage": 0
  },
  "scenes": {
    "scene_1": {
      "id": "scene_1",
      "videoUrl": "/videos/scene_1.mp4",
      "choices": [
        {
          "text": "打开左边的门",
          "targetScene": "scene_2a",
          "effects": [
            { "type": "add", "target": "courage", "value": 10 }
          ]
        },
        {
          "text": "打开右边的门",
          "targetScene": "scene_2b"
        }
      ]
    },
    "scene_2a": {
      "id": "scene_2a",
      "videoUrl": "/videos/scene_2a.mp4",
      "nextScene": "ending"
    },
    "scene_2b": {
      "id": "scene_2b",
      "videoUrl": "/videos/scene_2b.mp4",
      "choices": []
    },
    "ending": {
      "id": "ending",
      "videoUrl": "/videos/ending.mp4",
      "choices": []
    }
  }
}

字段说明：

字段	说明
startScene	游戏开始的场景 ID
variables	全局变量初始值（如好感度、勇气值）
scenes	所有场景节点，key 为场景 ID
videoUrl	视频文件路径，放在 public/videos/ 下
choices	选项列表，为空或不存在时视为结局
nextScene	没有选项时的默认下一场景（自动跳转）
effects	选择后的效果，类型: set/add/toggleFlag
conditions	选项的显示条件（==, !=, >, <, >=, <=, hasFlag）

2. 放置视频文件

将视频文件放入 public/videos/ 目录，推荐 MP4 (H.264) 格式。

生成测试视频（需要 ffmpeg）：

ffmpeg -f lavfi -i "color=c=0x1a1a2e:s=1280x720:d=3" \
  -vf "drawtext=text='章节标题':fontcolor=white:fontsize=32:x=(w-text_w)/2:y=(h-text_h)/2" \
  public/videos/scene_1.mp4

3. 修改加载的剧情文件

在 src/App.vue 中修改 loadGame() 的路径：

await loadGame('/scenes/your_story.json')

目录结构

moviegame/
├── engine/                     # 框架无关的核心引擎（不依赖 Vue）
│   ├── core/
│   │   ├── Engine.ts           # 主循环
│   │   ├── SceneManager.ts     # 场景管理
│   │   ├── VideoManager.ts     # 视频播放控制
│   │   └── StateManager.ts     # 状态/变量/条件系统
│   └── types.ts                # 类型定义
├── src/                        # Vue 播放器
│   ├── components/
│   │   ├── GamePlayer.vue      # 视频播放器
│   │   └── ChoicePanel.vue     # 选项面板
│   ├── composables/
│   │   └── useGameEngine.ts    # 引擎 ↔ Vue 桥接
│   ├── stores/
│   │   └── gameStore.ts        # Pinia 状态
│   ├── App.vue
│   └── main.ts
├── public/
│   ├── scenes/demo.json        # 示例剧情
│   └── videos/                 # 视频资源
├── ROADMAP.md                  # 开发路线图
└── package.json

当前状态

已完成 (P0 MVP)： 单视频播放 + 选项分支 + 状态系统 + JSON 驱动

下一步 (P1)： A/B 双缓冲无缝切换、条件分支、IndexedDB 存档系统

详见 ROADMAP.md。

命令

npm run dev        # 启动开发服务器
npm run build      # 构建生产版本
npm run preview    # 预览构建结果

使用提示

场景虽然支持图片，但是图片场景容易触发一些bug,所以建议只使用视频场景，这样可以避免遇到没有测试覆盖的bug，也能简化引擎的逻辑。