88 lines
2.0 KiB
Markdown
88 lines
2.0 KiB
Markdown
# 快速开始 — 5 分钟制作你的第一个交互式电影游戏
|
||
|
||
## 1. 准备视频
|
||
|
||
用任何方式制作三个短视频（MP4 H.264）：
|
||
|
||
```
|
||
my_story/
|
||
scene_1/video.mp4 ← 开场视频
|
||
scene_2/video.mp4 ← 分支 A 视频
|
||
ending/video.mp4 ← 结局视频
|
||
```
|
||
|
||
推荐参数：1280×720，30fps，2-5Mbps。
|
||
|
||
## 2. 写剧情 JSON
|
||
|
||
创建 `public/scenes/my_story.json`：
|
||
|
||
```json
|
||
{
|
||
"assetBase": "my_story/",
|
||
"startScene": "scene_1",
|
||
"variables": {},
|
||
"scenes": {
|
||
"scene_1": {
|
||
"id": "scene_1",
|
||
"videoUrl": "scene_1/video.mp4",
|
||
"choices": [
|
||
{ "text": "选择 A", "targetScene": "scene_2" },
|
||
{ "text": "选择 B", "targetScene": "ending" }
|
||
]
|
||
},
|
||
"scene_2": {
|
||
"id": "scene_2",
|
||
"videoUrl": "scene_2/video.mp4",
|
||
"nextScene": "ending"
|
||
},
|
||
"ending": {
|
||
"id": "ending",
|
||
"videoUrl": "ending/video.mp4",
|
||
"choices": []
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
## 3. 启动
|
||
|
||
```bash
|
||
npm install
|
||
npm run dev
|
||
```
|
||
|
||
打开 `http://localhost:5173/?scene=my_story.json`
|
||
|
||
## 4. 发生了什么
|
||
|
||
- 场景 1 播放 → 视频结束后弹出两个选项
|
||
- 选 A → 场景 2 → 自动跳转到 ending
|
||
- 选 B → 直接到 ending
|
||
- ending 无选项 → 游戏结束，返回主菜单
|
||
|
||
## 下一步
|
||
|
||
- 想加限定条件的选择？→ [分支叙事指南](BRANCHING.md)
|
||
- 想加 QTE 或热点？→ [交互指南](INTERACTIONS.md)
|
||
- 想加背景音乐或字幕？→ [场景 JSON 参考](SCENE_JSON_SPEC.md)
|
||
- 想支持多语言？→ [国际化指南](I18N.md)
|
||
- 想打包发布？→ [发布指南](PUBLISHING.md)
|
||
|
||
## 素材组织建议
|
||
|
||
```
|
||
my_story/
|
||
scene_1/video.mp4 ← 每个场景一个文件夹
|
||
scene_2/video.mp4
|
||
ending/video.mp4
|
||
shared/ ← 跨场景共享素材
|
||
bgm.mp3
|
||
thumb.jpg
|
||
locales/ ← 多语言翻译文件（可选）
|
||
zh.json
|
||
en.json
|
||
```
|
||
|
||
JSON 中所有路径都是相对于素材根目录的相对路径，配合 `assetBase` 前缀使用。
|