基于ESP32-S3构建一个完全互动式的手势控制游戏场景

我一直乐于将“识别”这一概念拓展得更丰富——将其转化为一种能够实时响应用户的互动体验。这一次，我将格罗夫视觉人工智能 V2、XIAO ESP32-S3 和 Processing 结合在一起，创建了一个类似《水果忍者》的互动项目，用户可以通过手势来控制它。

在大多数视觉识别系统中，模型的输出内容仅仅是某个框、一个标签或者一组坐标。但我认为，一旦某个手势被识别出来，它不应该仅仅停留在产生结果这一层面。它应该再进一步，成为一种能让用户即时感知并进行互动的游戏机制。这让我思考：如果将“石头、剪刀、布”各自赋予独特的视觉表现力，那会比单纯的手势识别更具趣味性吗?

最终我选择了“水果忍者”这一概念，因为它非常适合打造一款动态、轻便且反应灵敏的互动游戏。“纸”可以将水果推开，“石头”可以吸引它们，而“剪刀”则可以将它们剪开。每一种手势都与屏幕上水果的移动方式形成了直接且直观的联系。因此，当用户做出手势时，他们不再只是向系统发送输入——而是直接在屏幕上控制着整个世界。

我真的很喜欢这种感觉：在镜头前的手势动作不再孤立存在。借助人工智能模型、连续的通信以及 Processing 程序内部的视觉逻辑，它变成了一个充满反馈、情感和乐趣的实时互动体验。

项目原则

视觉识别层

格罗夫视觉 AI V2 负责从摄像头前方采集图像，并运行 SenseCraft AI 手势识别模型。该模型能够实时检测手势类别，并输出目标框的位置、大小和类别标识。

这三种姿势的对应关系如下所示：

布 = 0

石头 = 1

剪刀 = 2

在现阶段，格罗夫视觉人工智能 V2 便如同一个视觉传感器。它能够“感知”用户的动作，并通过设备日志实时输出结构化的数字数据。

数据传输层

格罗夫视觉人工智能 V2 的识别数据通过串行通信传输至 XIAO ESP32-S3。S3 起到桥梁和处理层的作用，将识别结果整理成 Processing 可以轻松读取的格式，并将数据稳定地转发至视觉系统。

游戏表达层

在接收到数据后，Processing 会将手势的位置和大小映射到屏幕上的相应区域，然后触发不同的水果交互操作：

纸：在手势范围内将水果推开

石头：将附近的水果拉向中心，并像漩涡一样旋转它们

剪刀：用汁液飞溅效果将水果剪开

随着水果不断生成，屏幕便变成了一个完全互动式的手势控制游戏场景。

详细的构建流程

第1步：在格罗夫视觉 AI V2 上部署手势识别模型

首先，我们需要将 SenseCraft 的手势识别模型部署到 Grove Vision AI V2 上。建议选择一个支持“石头、剪刀、布”操作的模型，并确保其与 Grove Vision AI V2 兼容。

打开 SenseCraft 人工智能平台，选择相应的手势识别模型，完成部署。完成后，设备将开始实时输出识别结果，包括手势类别、位置以及边界框大小。

这里最关键的一点不仅在于识别是否准确，还在于理解输出数据的格式和含义，因为后续的处理端解析完全依赖于这种结构。

第 2 步：搭建软件环境

如果您是首次使用 Arduino IDE，建议您先参考相关教程来完成环境的安装与配置，并下载所需的库文件。

•安装 Arduino 开发环境

•安装“Grove 视觉 AI V2”和“XIAO ESP32-S3”相关的库文件

•安装 Processing 开发环境

•配置串行端口环境

尽管这一步骤看似简单，但实际上却非常重要，因为后续的数据流程在很大程度上依赖于稳定的软件环境。

第 3 步：硬件连接

准备两根 USB 数据线，并将格罗夫视觉 AI V2 和小 ESP32-S3 连接到您的电脑上。

如果您的串行通信需要直接的引脚连接，您可以使用杜邦跳线来实现UART通信。具体的接线方式可以根据您的实际硬件配置进行调整。

第 4 步：重新格式化手势识别数据

为了使数据更便于 Processing 使用，我们首先将 Grove Vision AI V2 的输出转换为更简洁统一的格式，并通过 XIAO ESP32-S3 进行传输。

在此阶段，使用 Arduino IDE 将数据处理代码上传至 S3，以便其能够接收来自 Grove Vision AI V2 的识别结果。

如果一切运行正常，您应该能在“串行监视器”中看到实时的手势数据，其中包括手势类型、坐标以及框的尺寸。

第 5 步：在处理过程中解析识别结果

接下来，我们从 XIAO ESP32-S3 中获取数据，并将其转换为视觉系统能够使用的信息。

这里的要点是：

•处理单个或多个手势目标

•将坐标映射到屏幕尺寸上

•利用边界框的大小来确定交互范围

•赋予不同的手势力量

•保持稳定的帧率和响应速度

•将水果的物理特性与操作区域精确匹配起来

核心的处理代码可以这样进行结构化设计：

如果处理窗口与相机检测区域不重合，通常首先需要检查的是坐标映射问题。

第 6 步：实现水果生成逻辑

一旦处理程序成功接收到手势数据，它就可以开始控制水果系统了。

在这个项目中，我设计了一个持续的水果生成系统，使得水果会不断出现在屏幕上，营造出一种“随时可切”的动态效果。这使得手势操作更具意义，并增强了互动性。

水果生成的关键要素有：

•水果会随机从屏幕上生成。

•每种水果都有其自身的移动轨迹。

•水果的位置和状态会持续更新

•手势会引发强烈的直观反应

然而，我不得不承认，这个水果发射动作还不够逼真。它应该更受重力的影响——比如，不同的水果类型可以有不同的抛物线轨迹，而不是都以同样的方式向上飞去。还有一些小的瑕疵。如果您有能让这个项目更加完善的好点子，请随时发表评论并分享您的成果。

第 7 步：实现三种手势效果

这是整个项目中最有趣的部分。

论文：推力效应

当系统检测到“纸张”这一指令时，它会对手势区域内水果施加向外的力，迅速将它们推开，就像拍打一样。

罗克：黑洞引力效应

当“岩石”出现时，它会在该区域形成一个类似黑洞的吸引中心，将水果向中心拉拢，并使它们围绕中心旋转。

剪刀：切片与果汁飞溅效果

当“剪刀”被检测到时，该区域内内的水果会因冲击力而被剪开，从而产生令人满意的冲击效果。这三种效果将“石头、剪刀、布”这一简单的分类输出转变为了能够在屏幕上重塑世界的三种实际力量。

至此，该系统已将简单的手势识别技术转化为一款具有清晰反馈和有趣机制的实时互动游戏。

这个项目再次让我意识到，人工智能视觉的应用并不局限于“识别”这一范畴，它还可以用于游戏。当识别结果不再仅仅是标签，而是能够直接改变屏幕上的内容的规则时，这个系统就不再仅仅是一个技术演示，而变成了真正具有互动性的体验。

我非常享受将现实中的动作转化为屏幕上的动作这一过程。用户的手势不再仅仅是一种输入——它在游戏世界中变成了一种实实在在的力量。这让人感觉，镜头前的每一个动作都在默默地塑造着这个数字世界。

如果你也热衷于将人工智能、硬件设备和视觉效果融合到创意项目中，不妨尝试自己开发一款互动游戏。也许经过你的改进，游戏的成品效果会比我的还要好。

结论

这个项目再次让我意识到，人工智能视觉的应用并不局限于“识别”这一范畴，它还可以用于游戏。当识别结果不再仅仅是标签，而是能够直接改变屏幕上的内容的规则时，这个系统就不再仅仅是一个技术演示，而变成了真正具有互动性的体验。

我非常享受将现实中的动作转化为屏幕上的动作这一过程。用户的手势不再仅仅是一种输入——它在游戏世界中变成了一种实实在在的力量。这让人感觉，镜头前的每一个动作都在默默地塑造着这个数字世界。

本文编译自hackster.io