15 KiB
儿童动作识别互动玩法 Demo 热身关开发规格文档
日期:2026-05-09
关联设计文档:CHILD_MOTION_DEMO_WARMUP_LEVEL_DESIGN_2026-05-09.md
适用范围:儿童动作识别互动玩法 Demo 固定启动热身关
文档性质:开发落地规格
说明:本文只将已确认的热身关设计内容拆解为工程可执行规格,不新增未确认的玩法、文案或视觉设计。
1. 开发目标
热身关作为 Demo 启动后的固定流程,需要完成以下开发目标:
- 调用摄像头并识别用户和环境。
- 使用横屏比例展示热身关。
- 在屏幕中央地面生成绿色圆环,引导用户到达建议位置。
- 将用户实际位置生成角色剪影。
- 只对摄像头背景做虚化处理,表达隐私保护、屏蔽环境干扰,并营造空间感。
- 按固定步骤完成站位、招手、左右移动、挥动左右手、原地跳跃检测。
- 记录用户左右移动距离、挥动手臂空间和跳跃空间。
- 将记录结果仅保存在当前 Demo 体验会话内。
- 后续关卡使用热身记录的边界进行安全提醒和暂停恢复。
- 热身结束后进入关卡选择。
2. 非目标范围
热身关当前不包含以下内容:
- 不接入创作模块。
- 不作为可配置玩法模板提供给创作者。
- 不允许跳过步骤。
- 不允许系统自动进入下一步。
- 不设置动作检测最长等待时间。
- 不做特定用户识别。
- 不跨会话保存左右空间边界、手臂挥动空间和跳跃空间。
- 不对手部细节进行识别,只对肢体进行区分。
3. 运行入口与流向
3.1 入口
用户进入 Demo 后,先进入热身关。
3.2 出口
用户完成热身关所有步骤后,进入关卡选择。
3.3 固定流程顺序
热身关必须按照以下顺序执行:
进入热身关
↓
到达中央绿色圆环并保持 2 秒
↓
招手 / 摆手
↓
热身说明
↓
向左一步,到达左侧绿色圆环并保持 2 秒
↓
回到中间,到达中央绿色圆环并保持 2 秒
↓
向右一步,到达右侧绿色圆环并保持 2 秒
↓
回到中间,到达中央绿色圆环并保持 2 秒
↓
挥动左手
↓
挥动右手
↓
原地跳一下
↓
播放热身结束特效和结束语音
↓
进入关卡选择
4. 页面基础表现规格
4.1 横屏比例
热身关需要使用横屏比例制作和展示,适用于电视屏幕、电脑屏幕等环境。
4.2 摄像头画面处理
用户进入热身关时调用摄像头。
摄像头画面处理要求:
- 识别用户和环境。
- 将用户实际位置生成角色剪影。
- 只对摄像头背景做虚化处理。
- 用户角色剪影用于表达用户在画面中的实际位置。
- 背景虚化用于表达对用户隐私的保护、屏蔽周围环境干扰,并营造空间感。
4.3 绿色圆环
绿色圆环用于指引用户到达指定位置。
绿色圆环出现位置包括:
- 屏幕中央位置的地面。
- 屏幕中心向左一个身位,约半米的地面位置。
- 屏幕中心向右一个身位,约半米的地面位置。
“约半米”技术上以角色剪影移动距离为准,后续根据体验调校。
4.4 绿色圆环选中状态
用户到达绿色圆环后,绿色圆环进入 2 秒选中状态。
用户需要在绿色圆环内保持 2 秒,才算完成该位置检测。
5. 通用交互规则
5.1 不允许跳过
每个步骤都必须由用户完成。
系统不提供跳过,也不自动进入下一步。
5.2 引导动画规则
每个动作等待 3 秒后可以播放对应引导动画。
当前不设置最长等待时间。
5.3 手势检测规则
招手 / 摆手、挥动左手、挥动右手三类动作需要有动作区分。
检测只区分肢体,不识别手部细节。
5.4 手势引导规则
挥动哪只手,就使用对应手的引导。
6. 状态机规格
6.1 状态列表
热身关至少需要支持以下流程状态:
| 状态 ID | 状态名称 | 进入条件 | 完成条件 | 下一状态 |
|---|---|---|---|---|
| warmup_enter | 进入热身关 | 用户进入 Demo | 摄像头调用并展示中央绿色圆环 | center_arrive |
| center_arrive | 到达中央圆环 | 中央绿色圆环出现 | 用户到达中央圆环并保持 2 秒 | wave_greeting |
| wave_greeting | 招手教学 | 中央圆环完成并播放圆圈消失特效 | 用户完成招手 / 摆手 | warmup_intro |
| warmup_intro | 热身说明 | 招手 / 摆手完成 | 播放热身说明文案与语音 | move_left |
| move_left | 向左一步 | 热身说明完成 | 用户到达左侧圆环并保持 2 秒 | return_center_1 |
| return_center_1 | 回到中间(一) | 向左一步完成 | 用户到达中央圆环并保持 2 秒 | move_right |
| move_right | 向右一步 | 回到中间(一)完成 | 用户到达右侧圆环并保持 2 秒 | return_center_2 |
| return_center_2 | 回到中间(二) | 向右一步完成 | 用户到达中央圆环并保持 2 秒 | wave_left_hand |
| wave_left_hand | 挥动左手 | 回到中间(二)完成 | 用户完成挥动左手 | wave_right_hand |
| wave_right_hand | 挥动右手 | 挥动左手完成 | 用户完成挥动右手 | jump_once |
| jump_once | 原地跳一下 | 挥动右手完成 | 用户完成原地跳一下 | warmup_finish |
| warmup_finish | 热身结束 | 原地跳一下完成 | 播放热身结束特效和结束语音 | level_select |
| level_select | 关卡选择 | 热身结束 | 进入关卡选择 | - |
6.2 状态推进约束
- 状态必须按顺序推进。
- 用户未完成当前状态检测目标时,不进入下一状态。
- 位置类状态必须满足“到达绿色圆环并保持 2 秒”。
- 动作类状态没有最长等待时间。
- 动作类状态等待 3 秒后可以播放对应引导动画。
7. 分步骤开发规格
7.1 进入热身关
展示内容
- 调用摄像头。
- 识别用户和环境。
- 屏幕中央地面显示绿色圆环。
- 用户实际位置显示为角色剪影。
- 只对摄像头背景做虚化。
文案与语音
欢迎你,小朋友,见到你真开心
请你来到圆圈这里和我打个招呼吧
检测目标
用户到达中央绿色圆环并保持 2 秒。
完成反馈
播放圆圈消失特效。
7.2 招手教学
展示内容
播放招手的手势引导。
用户进入该步骤 3 秒仍未完成动作时,可以播放引导动画。
检测目标
用户完成招手 / 摆手手势。
完成后
进入热身说明。
7.3 热身说明
文案与语音
你好呀小朋友,为了你玩的安全和开心,先来和我一起热个身吧
完成后
进入“向左一步”。
7.4 向左一步
展示内容
屏幕中心向左一个身位,约半米的地面位置出现新的绿色圆圈。
文案与语音
向左一步
检测目标
用户到达左侧绿色圆环并保持 2 秒。
完成反馈
真棒
数据记录
记录本次向左移动距离,作为后续关卡中的左侧空间边界参考。
7.5 回到中间来(一)
展示内容
场地中心位置出现绿色圆圈。
文案与语音
回到中间来
检测目标
用户到达中央绿色圆环并保持 2 秒。
完成反馈
真棒
7.6 向右一步
展示内容
屏幕中心向右一个身位,约半米的地面位置出现新的绿色圆圈。
文案与语音
向右一步
检测目标
用户到达右侧绿色圆环并保持 2 秒。
完成反馈
真棒
数据记录
记录本次向右移动距离,作为后续关卡中的右侧空间边界参考。
7.7 回到中间来(二)
展示内容
场地中心位置出现绿色圆圈。
文案与语音
回到中间来
检测目标
用户到达中央绿色圆环并保持 2 秒。
完成反馈
真棒
7.8 挥动左手
展示内容
播放伸展手臂挥动左手的手势引导。
用户进入该步骤 3 秒仍未完成动作时,可以播放引导动画。
文案与语音
挥动左手
检测目标
用户完成挥动左手。
完成反馈
真棒
数据记录
记录用户挥动左手的空间,保存为该用户对应的行为坐标。
7.9 挥动右手
展示内容
播放伸展手臂挥动右手的手势引导。
用户进入该步骤 3 秒仍未完成动作时,可以播放引导动画。
文案与语音
挥动右手
检测目标
用户完成挥动右手。
完成反馈
真棒
数据记录
记录用户挥动右手的空间,保存为该用户对应的行为坐标。
7.10 原地跳一下
展示内容
播放跳跃姿势引导。
用户进入该步骤 3 秒仍未完成动作时,可以播放引导动画。
文案与语音
原地跳一下
检测目标
用户完成原地跳一下。
数据记录
记录用户跳跃空间,保存为该用户对应的行为坐标。
完成反馈
播放热身结束特效、上浮字幕和语音:
真厉害,你是我见过最聪明的小朋友
别走开,现在开始我们的游戏吧
完成后
进入关卡选择。
8. 当前 Demo 体验会话数据
8.1 保存范围
以下数据仅在当前 Demo 体验会话内保存:
- 左侧空间边界。
- 右侧空间边界。
- 左手挥动空间。
- 右手挥动空间。
- 跳跃空间。
8.2 当前 Demo 体验会话定义
“当前 Demo 体验会话”指用户本次打开并体验 Demo 的过程。
当用户关闭 Demo、刷新页面、退出当前体验流程、重新进入 Demo,或更换设备后,系统不再沿用上一次热身记录的数据,需要重新完成热身关并重新记录。
8.3 仅会话内保存原因
采用仅当前 Demo 体验会话内保存的原因:
- 每名用户的身高、体型、动作幅度不同,安全边界和行为坐标会发生变化。
- 当前 Demo 不做特定用户识别,无法确认下一次体验的是否仍是同一名用户。
- 用户所处的体验环境可能变化,包括房间大小、摄像头位置、屏幕位置和站立距离。
- 为保证安全,每次体验都需要重新对环境和距离进行安全检查。
9. 后续关卡安全边界使用规则
后续关卡需要使用热身关记录的左右空间边界进行安全判断。
9.1 覆盖安全边界线
当用户身体主体覆盖安全边界线时,对应侧屏幕边缘出现虚影提醒。
9.2 超出安全边界线
当用户身体主体超出安全边界线时:
- 关卡内容暂停。
- 屏幕虚化。
- 屏幕中央地面出现绿色圆圈。
- 屏幕提示文案:
小朋友,要注意安全哦
- 用户需要回到中心绿色圆圈并保持 2 秒后,才能继续游戏内容。
10. 识别能力清单
热身关需要接入或实现以下识别能力:
- 摄像头调用。
- 用户识别。
- 环境识别。
- 用户实际位置识别。
- 用户是否到达中央绿色圆环位置。
- 用户是否在绿色圆环内持续保持 2 秒。
- 用户是否到达左侧约半米绿色圆环位置。
- 用户是否到达右侧约半米绿色圆环位置。
- 招手 / 摆手手势识别。
- 挥动左手识别。
- 挥动右手识别。
- 原地跳跃姿势识别。
- 用户左右移动距离记录。
- 用户挥动手臂空间记录。
- 用户跳跃空间记录。
- 用户身体主体覆盖安全边界线判断。
- 用户身体主体超出安全边界线判断。
- 用户回到中心绿色圆环并保持 2 秒判断。
11. 表现能力清单
热身关需要实现以下表现能力:
- 横屏比例显示。
- 摄像头背景虚化。
- 用户位置生成角色剪影。
- 屏幕中央地面绿色圆环。
- 左侧约半米地面绿色圆环。
- 右侧约半米地面绿色圆环。
- 绿色圆环 2 秒选中状态。
- 圆圈消失特效。
- 招手手势引导。
- 伸展手臂挥动左手手势引导。
- 伸展手臂挥动右手手势引导。
- 跳跃姿势引导。
- 热身结束特效。
- 上浮字幕。
- 语音播报。
- 安全边界虚影提醒。
- 关卡暂停时屏幕虚化。
- 关卡暂停时屏幕中央地面绿色圆圈。
- 关卡暂停提示文案。
12. 固定文案与语音清单
以下文案需要作为屏幕中上方浮现文字,并同步语音播报。
欢迎你,小朋友,见到你真开心
请你来到圆圈这里和我打个招呼吧
你好呀小朋友,为了你玩的安全和开心,先来和我一起热个身吧
向左一步
真棒
回到中间来
真棒
向右一步
真棒
回到中间来
真棒
挥动左手
真棒
挥动右手
真棒
原地跳一下
真厉害,你是我见过最聪明的小朋友
别走开,现在开始我们的游戏吧
小朋友,要注意安全哦
13. 开发验收标准
13.1 热身流程验收
- 用户进入 Demo 后先进入热身关。
- 热身关使用横屏比例展示。
- 摄像头被调用。
- 用户位置显示为角色剪影。
- 摄像头背景被虚化。
- 中央、左侧、右侧绿色圆环可以按流程出现。
- 用户到达每个绿色圆环后,需要保持 2 秒才算完成。
- 每个步骤未完成时不能跳过,也不能自动进入下一步。
- 动作等待 3 秒后可以播放对应引导动画。
- 所有固定文案可以展示并语音播报。
- 完成全部热身步骤后进入关卡选择。
13.2 数据记录验收
- 完成向左一步后,可以记录左侧空间边界。
- 完成向右一步后,可以记录右侧空间边界。
- 完成挥动左手后,可以记录左手挥动空间。
- 完成挥动右手后,可以记录右手挥动空间。
- 完成原地跳一下后,可以记录跳跃空间。
- 以上数据仅在当前 Demo 体验会话内保存。
- 重新进入 Demo 后,不沿用上一次热身记录,需要重新完成热身关。
13.3 后续关卡安全边界验收
- 用户身体主体覆盖安全边界线时,对应侧屏幕边缘出现虚影提醒。
- 用户身体主体超出安全边界线时,关卡内容暂停。
- 关卡暂停时,屏幕虚化。
- 关卡暂停时,屏幕中央地面出现绿色圆圈。
- 关卡暂停时,展示提示文案:
小朋友,要注意安全哦
- 用户回到中心绿色圆圈并保持 2 秒后,游戏内容继续。
14. 不确定项与补充确认
当前需求已明确本文所需的热身关开发规格。
以下内容未在当前文档中强行定义,后续如进入工程实现阶段,可再补充对应技术细节:
- 具体接入的动作识别 SDK 或硬件接口。
- 角色剪影、圆环、虚影提醒、特效、手势引导动画的具体资源文件命名。
- 当前 Demo 体验会话数据在前端状态、运行时上下文或其他容器中的具体存放位置。
- 绿色圆环、角色剪影、安全边界在线性空间或屏幕坐标中的具体计算公式。
- 关卡选择页的具体页面结构。