基于MediaPipe Hands的手势识别游戏开发实践

1. 项目背景与需求分析

1.1 项目简介

《指尖剑仙》是一款基于手势识别的仙侠风格互动游戏，玩家可以通过摄像头手势控制仙剑完成各种挑战任务。项目采用 Nuxt 3 + Vue 3 + TypeScript 开发，使用 MediaPipe Hands 实现手势识别，Canvas 2D 渲染游戏画面。

1.2 核心需求

1. 实时性：手势识别延迟需控制在 100ms 以内，确保流畅的游戏体验
2. 准确性：识别准确率需达到 85% 以上，避免误触发
3. 多样性：支持多种手势类型，映射到不同的游戏动作
4. 稳定性：处理光线变化、手部遮挡等复杂场景
5. 易用性：无需额外硬件，仅需普通摄像头即可使用

1.3 技术选型

经过调研，我们选择了 Google MediaPipe Hands 作为手势识别的核心引擎：

2. 架构设计

2.1 整体架构

手势识别系统采用双层架构设计，实现了识别层与应用层的解耦：

code复制┌─────────────────────────────────────────────────┐
│                  游戏应用层                      │
│  (useSword.ts, useLevel.ts, useCanvasRenderer)  │
└────────────────┬────────────────────────────────┘
                 │ 游戏动作
                 │ (move, slash, charge, release...)
┌────────────────┴────────────────────────────────┐
│              手势动作映射层                       │
│            (useGestureActions.ts)               │
│  - 手势稳定性检查                                 │
│  - 持续时间检测                                   │
│  - 动作冷却控制                                   │
│  - 位置灵敏度调整                                 │
└────────────────┬────────────────────────────────┘
                 │ 手势状态
                 │ (type, position, velocity, confidence)
┌────────────────┴────────────────────────────────┐
│              手势识别核心层                       │
│              (useGesture.ts)                    │
│  - MediaPipe Hands 集成                         │
│  - 21个手部关键点检测                            │
│  - 手势类型识别                                   │
│  - 摄像头权限管理                                 │
└─────────────────────────────────────────────────┘

2.2 核心模块

2.2.1 手势识别核心层 (useGesture.ts)

负责与 MediaPipe Hands 交互，输出原始手势状态：

typescript复制export type GestureType =
  | 'pointing'      // 食指指向
  | 'fist'          // 握拳
  | 'palm'          // 张开五指
  | 'thumbsUp'      // 竖大拇指
  | 'twoFingers'    // 双指并拢
  | 'none'          // 无手势

export type GestureState = {
  type: GestureType
  position: { x: number; y: number }      // 归一化坐标 [0, 1]
  direction: { x: number; y: number }     // 移动方向
  confidence: number                       // 置信度 [0, 1]
  velocity: { x: number; y: number }      // 移动速度
}

2.2.2 手势动作映射层 (useGestureActions.ts)

将手势状态转换为游戏动作，处理复杂的交互逻辑：

typescript复制export type GestureAction =
  | 'move'        // 移动剑
  | 'slash'       // 斩击
  | 'charge'      // 蓄力
  | 'release'     // 释放蓄力
  | 'gather'      // 聚剑
  | 'swordRain'   // 万剑齐发
  | 'wave'        // 剑气波
  | 'thrust'      // 突刺