这一页由机器翻译,以英文版为准。 查看英文版 →

◆ 2026 / 手势互动作品 · 浏览器,MediaPipe Hands

Sophie's Night Sky Adventure

为展览而做的星座游戏,改编自 Jonathan Poppele 的儿童绘本。玩家用手指指着星星,停住不动,就能把星星连起来;之前的观众画下的星座会一直留在天上。

AI 声明:本作品可能包含 AI 生成的内容。

在一颗星上停住不动,就选中它。

核心玩法就是指着一颗星,停住不动。

  • 把绘本改编成用身体玩的星座游戏
  • 用 MediaPipe Hands、Canvas 和原生 JS 在浏览器里做成
  • 设计了共享星空,每位观众画的星座都留在里面

我的角色

艺术家兼程序

时间

2026

原作

Jonathan Poppele

技术

MediaPipe Hands、Canvas、原生 JS

制作于

USC

下一个

改编到 VR 头显

作品

用手势玩。

改编保留了书里最核心的体验:在夜空中认出一个图形。但不再沿着书的故事走,而是围着手势来搭。玩家举起食指当指针,停在一颗星上,等一个圆环填满,再把星星连成星座的线。

指星星是人人熟悉的动作,我就直接拿它做玩法。只有一个别的手势:张开手掌,要提示。

选了六个星座排成一个顺序:大熊座、小熊座、仙后座、天龙座、仙王座和仙女座。

一轮

每个星座是限时的一轮,大的星座时间给得多些:仙后座 55 秒,天龙座 95 秒。玩家先选一颗星,再选和它相连的那颗。连对了,线留在天上;连错了,线闪一下,扣掉 5 秒。

连错三次之后,张开手掌就能调出星座的轮廓和一条提示,比如从天枢(Dubhe)和天璇(Merak)开始,也就是大熊座的两颗指极星。

手部追踪用摄像头在你的浏览器里本地运行,不录制,也不上传。内置了鼠标备用方案。

标题画面:近乎全黑的天空上,发光的星星之间画着淡淡的星座线
标题画面,全游戏唯一一处预先画好星座的地方。之后的星座都由玩家来连。游戏可能包含 AI 生成的内容。
手势

从一只手到一个光标。

玩的时候把一只手举到摄像头前。摄像头的每一帧送进手部追踪模型 MediaPipe Hands,它在浏览器里运行,最多识别两只手,每只手返回 21 个点。

指食指指尖,也就是第 8 个点,变成光标。

张开手掌四个或更多指尖高于各自的指节,就是在要提示。

手部追踪模型给每只手返回的 21 个点:手腕一个,每根手指上四个。

游戏只用其中几个点。食指指尖变成光标,左右做了镜像,这样人面对屏幕时光标的移动方向才和预期一致。要区分张开的手掌和指着的手,游戏看的是每个指尖是否高于它的指节。

从一帧画面到一颗星

摄像头画面只在浏览器里读取,不发往任何地方
手部关键点每只手 21 个,来自 MediaPipe Hands
指尖第 8 个点,像镜子一样左右翻转
平滑后的光标每帧走剩余距离的 15%
停留在一颗星的范围内停 0.9 秒就选中它
从摄像头的一帧到选中一颗星。

原始的指尖位置一帧一帧之间会有一点抖,手拿稳了也一样。光标跟的是一个平滑过的副本,每帧只走剩余距离的 15%,所以手不动,它也不动。平滑太少,谁也没法稳稳停在一颗星上;平滑太多,光标又像脱离了手。

没有点击这个动作。光标进到一颗星的范围内,一个圆环在 0.9 秒里慢慢填满,填满就选中。移开,圆环归零;而且光标不离开这颗星,就不能再选它一次。停留时长是整个项目里最敏感的一个参数:太短,玩家只是扫了一眼的星也被选中;太长,整个体验就变成了憋着不动。

用鼠标试一下

为本页做的简化版。鼠标代替指尖,并按追踪的方式加了抖动;小点是原始位置,圆圈是光标。一颗一颗把仙后座的 W 连起来。关掉平滑,光标会抖,圆环常常要从头再来。
观众创作

一片共享的星空。

走完预设的那一组星座之后,玩家可以用同一批星星画自己的星座,给它起名,留在游戏里。

画下的星座存进一个共享的图库,一场一场、一位一位观众累积起来。所以天上显示的是之前每一个玩过的人画的图形。

下一个

VR 改编。

现在这版用的是屏幕和摄像头。下一步是改编到 VR 头显上。

技术附录:手部追踪、停留和共享星空

手部追踪细节

MediaPipe Hands 返回归一化的关键点坐标。游戏取第 8 个关键点,把 x 轴镜像后映射到屏幕上,再用指数滤波平滑。星星的命中半径在游戏中是 42 像素,自己画星座时是 60 像素。至少四个指尖高于指节就判定为张开手掌;手掌张开期间光标变暗,停留计时暂停。

星座

选了六个排成顺序:大熊座、小熊座、仙后座、天龙座、仙王座和仙女座。每个星座是一组星星位置加星星之间的连边。只在玩家真正连过的星星之间按顺序画线,所以画了一半的星座看起来就是一半,不会变成提示。

共享图库

自由画星座时,会把归一化的点列表、名字和时间戳写进持久存储,键值的设计保证新条目只追加,不覆盖旧的。加载时图库读回之前的每一条,所以越晚来的观众看到的图形越多。除了画下的形状,不存任何关于人的信息。

备用方案

摄像头出错、被拒绝或者没有摄像头时,鼠标备用方案接管,停留逻辑不变。作品照样能玩,只是慢一点,不会直接报错。