docs: 故事剧场化设计（剧场三幕 + 全互动决策，表现形式升级方案）
This commit is contained in:
@@ -0,0 +1,117 @@
|
||||
# 故事剧场化设计（表现形式升级：剧场 + 全互动决策）
|
||||
|
||||
> 日期：2026-08-13 ｜ 状态：已获用户批准 ｜ 关联：M1.5 互动体验（docs/superpowers/plans/2026-08-13-m1_5-interactions.md 之后的新增设计）
|
||||
|
||||
## 背景与问题
|
||||
|
||||
当前每计谋关卡的表现形式为「文字情境 + 文字选项列表 + 点评弹层」。走查反馈：**呈现形式生硬、考试感强，无法引起 4-8 岁儿童兴趣**。核心矛盾：决策树数据模型（情境 → 决策 → 分支 → 结果 → 点评 → 完美机制）是教育价值的载体，必须完整保留；需要改变的是**呈现层**——把「读题、答题」变成「看小剧场、动手玩」。
|
||||
|
||||
## 设计总览
|
||||
|
||||
每关 = 一部 2-3 分钟儿童小剧场，三幕结构：
|
||||
|
||||
```
|
||||
第 1 幕 开场演出 → 第 2 幕 决策演出（循环 2-6 次） → 第 3 幕 结局演出
|
||||
旁白+字幕高亮 动作卡 / 触控互动 / 分支演出 庆祝 / 鼓励
|
||||
角色道具入场 决策后弹点评气泡
|
||||
```
|
||||
|
||||
- **剧场化是容器**（怎么演给孩子看）：开场/分支/结局的动画演出
|
||||
- **全互动是交互方式**（孩子怎么动手）：每个决策点按内容映射为动作卡或触控互动，消灭纯文字选项列表
|
||||
- **决策树模型零改动**：`scene_node` / `node_option` 表结构、`level/choose` 接口、判分与完美机制全部不动
|
||||
|
||||
## 第 1 幕：开场演出
|
||||
|
||||
替代现在静止的场景卡片（play.vue 的 `.scene-card`）。
|
||||
|
||||
| 元素 | 实现 | 现状 |
|
||||
|---|---|---|
|
||||
| 场景横幅 | 场景插画（genasset 素材）或 emoji 兜底 | 已有 |
|
||||
| 角色入场 | 角色立绘从画面外滑入/弹跳落地（CSS keyframes） | 素材已有管线 |
|
||||
| 道具飞入 | 情境相关道具图标依次飞入（CSS 动画 + 延迟） | 素材已有管线 |
|
||||
| 旁白朗读 | 自动调用 SpeakButton 的朗读（TTS 降级），场景 audio 优先 | 已有 |
|
||||
| 字幕高亮 | RubyText 逐字显示（拼音注音同步） | 已有 |
|
||||
| 播完状态 | 角色 mood 切「🤔」，显示「开始」按钮进入决策幕 | 新 |
|
||||
|
||||
- 提供「跳过」按钮（右上角），跳过直接进入决策幕
|
||||
- 时间预算：8-15 秒，可跳过
|
||||
|
||||
## 第 2 幕：决策演出
|
||||
|
||||
### 互动形态自动判定（前端运行时，后端零改动）
|
||||
|
||||
对每个决策节点，按以下顺序判定互动形态：
|
||||
|
||||
```
|
||||
1. 节点 config 非空（入口互动节点，interaction_type ∈ {2,7,5,3,8}）→ 用现有互动组件
|
||||
2. 节点 interaction_type === 1（普通决策节点）→ 按选项内容特征自动选形态：
|
||||
a. 全部选项都带 prop 且 prop 去重后数量 = 选项数 → 道具选择 PropPick
|
||||
b. 选项文本含步骤序词（"先/再/最后"）或选项含"排序"特征 → 步骤排序 StepSort
|
||||
c. 选项文本含"找到/发现/寻找" → 找线索 FindSpot
|
||||
d. 选项文本含"配对/搭配/谁+什么" → 连线配对 LinkMatch
|
||||
e. 其余 → 动作卡（兜底）
|
||||
```
|
||||
|
||||
> 判定规则 a-e 为启发式，误判时教育语义不受影响：互动成功/失败只决定走向 success/fail 出口（现有机制），动作卡兜底保证任何节点都有可玩呈现。规则实现在 play.vue 的单一函数 `pickInteraction(node)` 中，返回组件名，渲染 v-if 分发保持不变。
|
||||
|
||||
### 动作卡组件（新，替代文字选项列表）
|
||||
|
||||
interaction_type === 1 且不满足 a-e 的节点，渲染 `ActionCard` 组件：
|
||||
|
||||
- 每个选项一张卡：道具图标/表情（prop 素材或 emoji 兜底）+ 短语（RubyText 拼音注音）+ 序号徽章
|
||||
- 按压反馈：点击时卡片下沉+弹跳（CSS active 变换 + keyframes）
|
||||
- 每张卡可「听一听」（SpeakButton 复用，读选项文字）
|
||||
- 卡片底色按选项序号取 c1-c4 四色边框（现有样式类）
|
||||
- 点击 → 播放「选择演出」后提交 choose（见下）
|
||||
|
||||
### 分支演出动画（新）
|
||||
|
||||
每个决策提交后、弹点评前，播放 **0.8-1.5 秒轻量过渡**（不阻断节奏）：
|
||||
|
||||
- 角色表情切换（mood 徽章 😊/😢/😮 弹跳，现有 `.char-mood` 动画扩展）
|
||||
- 场景元素变化（道具图标飞入/消失，CSS keyframes）
|
||||
- 配套音效（playSound good/bad 已有）
|
||||
- 演出结束后弹点评气泡（现有三段式：你的选择 + ✓好处 + ✗对比）
|
||||
|
||||
### 节奏控制
|
||||
|
||||
- 开场可跳过；分支演出 ≤1.5 秒；单关时长保持 5-10 分钟
|
||||
- 点评弹层已有「继续」按钮，流程不变
|
||||
|
||||
## 第 3 幕：结局演出
|
||||
|
||||
### 闯关内结算（result 页升级）
|
||||
|
||||
- 成功（通关/完美）：角色跳舞 + 彩带/烟花粒子（CSS 动画）+ 星星雨 + finish 音效
|
||||
- 失败：角色安慰表情 + 鼓励语（"再试一次，你已经很棒了"）+ 无惩罚感
|
||||
|
||||
### 配套
|
||||
|
||||
- 结算页的彩带/星星雨动画 = Task 11 已规划的 confetti，合并实现
|
||||
- 路线回顾卡片保留（已规划）
|
||||
|
||||
## 配套改动
|
||||
|
||||
| 项 | 内容 | 阶段 |
|
||||
|---|---|---|
|
||||
| 素材规格扩展 | genasset prompt 模板增加角色表情帧（高兴/难过/困惑/正常）与动作帧（入场/跳舞/安慰）；素材未生成时 emoji 兜底 | C |
|
||||
| 互动覆盖全 36 关 | 种子数据为 22 个无道具选项的关卡补互动入口所需道具数据（或后台运营补），使入口互动覆盖全关卡 | B |
|
||||
| 结算页升级 | confetti + 角色表情 + 鼓励语 | A |
|
||||
| 文档 | README「情境闯关」行、技术设计.md 4.13 补充剧场化设计 | A |
|
||||
|
||||
## 实施拆分（3 个阶段，各自可独立验收）
|
||||
|
||||
- **阶段 A（纯前端，立即见效）**：开场演出（scene 面板升级 + 跳过）＋ 动作卡组件（ActionCard）＋ 分支演出动画 ＋ 结局演出（result 页）
|
||||
- **阶段 B（覆盖补齐）**：前端 `pickInteraction` 自动判定（5 种触控互动按内容特征命中）＋ 种子数据补 22 关互动入口
|
||||
- **阶段 C（素材增强）**：genasset 表情/动作素材规格扩展（角色 3 态表情帧 + 动作帧）
|
||||
|
||||
阶段 A 独立成里程碑（M1.6 或并入 M1.5 收尾），B/C 视素材管线（Task 10）完成度顺延。
|
||||
|
||||
## 验收标准
|
||||
|
||||
1. 关卡开场自动演出（旁白 + 字幕高亮 + 角色/道具入场），可跳过
|
||||
2. 决策点无纯文字选项列表：全部渲染为动作卡或触控互动
|
||||
3. 每个决策提交后有分支演出动画 + 点评弹层
|
||||
4. 结算页成功/失败有动画演出
|
||||
5. 现有接口/判分/完美机制行为不变（level_play 单测全过）
|
||||
6. 36 关均有关卡入口互动（阶段 B 完成时）
|
||||
Reference in New Issue
Block a user