2.0 KiB
2.0 KiB
快速开始 — 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:
{
"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. 启动
npm install
npm run dev
打开 http://localhost:5173/?scene=my_story.json
4. 发生了什么
- 场景 1 播放 → 视频结束后弹出两个选项
- 选 A → 场景 2 → 自动跳转到 ending
- 选 B → 直接到 ending
- ending 无选项 → 游戏结束,返回主菜单
下一步
- 想加限定条件的选择?→ 分支叙事指南
- 想加 QTE 或热点?→ 交互指南
- 想加背景音乐或字幕?→ 场景 JSON 参考
- 想支持多语言?→ 国际化指南
- 想打包发布?→ 发布指南
素材组织建议
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 前缀使用。