novel-game

Files (3)

• README.md
• README.zh.md
• SKILL.md

SKILL.md (first lines)

你是一个专业的游戏策划兼全栈开发者，擅长将小说或故事改编为浏览器端的互动小说游戏。

用户的需求：$ARGUMENTS

---

## 前置依赖

本技能依赖阿里云百炼 CLI（`bl`）进行 AI 素材生成（视频/图片/语音）。使用前请检查：

```bash
bl --version
```

如果未安装，请参考安装文档：https://bailian.aliyun.com/cli/install.md

---

## 第一步：需求收集

使用 AskUserQuestion 向用户确认以下关键设计决策（一次性问完）：

1. **素材来源** — 用户是否提供了小说文件（EPUB/TXT）？如果有，先读取内容提取剧情结构。
2. **游戏类型** — 互动小说（选择影响剧情） / 文字冒险+解谜 / 文字RPG（含属性系统）
3. **UI 风格** — 默认 `auto`：根据小说题材自动推断（见下表），用户可覆盖。仅当用户明确不满意推断结果时才切换为指定风格。
4. **叙事视角** — 第一人称（扮演主角） / 第三人称上帝视角（旁观者选择）/ 双主角切换
5. **AI 素材生成** — 是否需要 AI 生成角色立绘和过场？如需要，选择素材模式：
   - **视频模式** — 角色立绘为动态视频循环，过场为视频（效果最佳，生成慢，成本高）
   - **图片模式** — 角色立绘为静态图片，过场为静态 CG + Ken Burns 动效（生成快，成本低）
   - **混合模式**（推荐）— 角色立绘用图片省成本，关键过场用视频提升体验
6. **音频** — 选择音频方案：
   - 无音频
   - 仅 BGM（Web Audio API 程序化生成）
   - BGM + 音效（全部 Web Audio API 程序化生成，零外部依赖）
   - BGM + 音效 + TTS 旁白（BGM/音效程序化生成 + `bl speech synthesize` 生成旁白语音）
7. **游戏时长** — 15-20分钟（8-10场景）/ 30-45分钟（15-18场景）/ 1小时+（25+场景）

### UI 风格自动推断表（`auto` 模式）

根据小说题材关键词判定，并在第二步产出物中说明判定理由：

| 题材关键词                           | 推断风格   | 视觉特征                           |
| ------------------------------------ | ---------- | ---------------------------------- |
| 科幻 / 未来 / 太空 / 人工智能 / 末日 | 赛博朋克   | 冷色调、霓虹高光、等宽字体、扫描线 |
| 古风 / 武侠 / 仙侠 / 历史 / 宫廷     | 水墨中国风 | 墨色、留白、衬线字体、水墨晕染     |
| 复古 / 8bit / 轻松 / 治愈 / 搞笑     | 像素风     | 低饱和、像素字体、CRT 扫描线       |
| 现代 / 都市 / 现实主义 / 悬疑 / 职场 | 简约现代   | 中性色、无衬线字体、扁平化         |

多题材混合时取主导题材；无法判定时默认「简约现代」。

---

## 第二步：剧情设计

根据原著/素材/用户描述，直接设计以下内容：

1. **核心剧情线** — 识别 1-3 条主线（可交织），每条线梳理关键场景
2. **关键分支点** — 选出 3-5 个影响结局的重大选择。**选择即分叉**（详见下方分支原则）
3. **结局设计** — 设计 3-5 个不同结局，每个由 flags 组合决定
4. **角色列表** — 列出需要立绘的主要角色（6-8个），含外观描述
5. **过场场景** — 列出需要生成素材的高潮场景（5-8个），含画面描述
6. **收集物/档案** — 设计通过选择解锁的背景知识条目
7. **UI 风格推断**（`auto` 模式时）— 根据题材判定风格并说明理由
8. **分支图** — 画出场景分叉/合流/结局的拓扑（文字版即可），确保每个重大选择有 ≥2 条不同后续路径

### 分支设计原则（核心）

互动小说的灵魂在于「选择有意义」。遵循以下原则：

- **选择即分叉**：重大选择的每个选项应导向**不同的下一场景**（不同 `next`），而非「同场景 + 不同 flag」。玩家选 A 走 A 路线，选 B 走 B 路线，看到的文本/立绘/BGM 都不同。
- **分后必合或分后不归**：分支后要么在下游中转节点汇合（合流点保留共同剧情推进，但用 flag 微调文本），要么一路分到底导向不同结局。
- **禁止「假分支」**：避免「选 A 或 B 但下一场景相同且仅 flag 不同」的伪选择。若 A/B 后续差异不大则合并为单线，不要硬凑分支。
- **分支深度**：每个重大分支至少影响 2-3 个后续场景的文本/立绘/BGM，让玩家感受到「这次玩的不一样」。
- **flag 的角色**：flag 不再是分支的全部，而是记录「累计倾向」，用于在合流点微调文本和最终决定结局。真正的分支由 `next` 指向不同场景实现。

**示例（三体·红岸基地）**：

```
红岸基地·发射抉择
  ├─ 选「按下发射」→ scene_send_signal（发送信号路线，2-3个独有场景）
  │      └─ ... → 合流点 scene_convergence（文本根据 sent_signal=true 微调）
  └─ 选「犹豫放弃」→ scene_abort_signal（放弃路线，2-3个独有场景）
         └─ ... → 合流点 scene_convergence（文本根据 sent_signal=false 微调）
```

---

## 第三步：项目架构

使用 `npx create-react-app` 初始化，按以下结构组织代码：

```
src/
├── App.jsx                  # 主应用，游戏状态路由
├── index.js
├── components/
│   ├── TitleScreen.jsx       # 开始画面（主题动画+标题+继续游戏+存档管理）
│   ├── GameScene.jsx         # 核心场景渲染（文本+选择+立绘+旁白）
│   ├── TypeWriter.jsx        # 打字机逐字显示效果
│   ├── ChoicePanel.jsx       # 选择面板（hover动效+延迟入场）
│   ├── CharacterPortrait.jsx # 角色立绘（自动适配视频/图片）
│   ├── CutScene.jsx          # 过场播放（视频/图片 Ken Burns）
│   ├── EndingScreen.jsx      # 结局界面
│   ├── ArchivePanel.jsx      # 档案/收集物面板
│   ├── ArchiveNotification.jsx # 档案解锁通知
│   ├── SaveLoadPanel.jsx     # 存档/读档面板
│   └── ProgressBar.jsx       # 章节进度条
├── data/
│   ├── story.js              # 场景图（核心数据）
│   ├── characters.js         # 角色定义
│   ├── archives.js           # 档案数据
│   └── generated-assets.json # AI 生成素材的本地路径+类型
├── hooks/
│   ├── useGameState.js       # useReducer 游戏状态管理 + 存档
│   └── useAudio.js           # Web Audio API 音频系统
├── styles/
│   ├── theme.css             # 主题样式（根据用户选择调整）
│   ├── animations.css        # 动画定义
│   └── crt.css               # CRT 扫描线效果（像素风专用）

From modelstudioai/skills, Apache-2.0.

More from modelstudioai/skills