add README

2026-06-07 14:05:01 +08:00
parent aeb6dc46a4
commit 3729b90be9
1 changed files with 139 additions and 0 deletions
--- a/README.md
+++ b/README.md
@@ -0,0 +1,139 @@
+# 交互式电影游戏引擎
+
+基于 Vue 3 + TypeScript 的浏览器端交互式电影游戏引擎。
+
+## 快速开始
+
+```bash
+npm install
+npm run dev
+```
+
+浏览器打开 `http://localhost:5173/` 即可体验示例剧情。
+
+## 如何使用
+
+### 1. 编写剧情 JSON
+
+在 `public/scenes/` 目录下创建 JSON 文件，定义你的场景和分支：
+
+```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）：
+
+```bash
+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()` 的路径：
+
+```ts
+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](ROADMAP.md)。
+
+## 命令
+
+```bash
+npm run dev        # 启动开发服务器
+npm run build      # 构建生产版本
+npm run preview    # 预览构建结果
+```