如何使用 Leap Motion 构建一个手势控制的网页游戏

主要观点:现代智能手机让手势和触摸驱动的用户界面的力量得以展现,触摸在未来计算中作用显著但仍有挑战,深度相机和 3D 位置追踪器是通用触摸交互的有前景途径,Leap Motion 控制器可通过高精度运动捕捉和手指追踪在标准桌面电脑上提供手势输入,其提供了易于使用的 SDK 供开发者将其支持集成到应用中,文中通过多个示例展示了如何利用 Leap Motion 进行前端 Web 应用开发,包括获取手指位置、在屏幕上绘制手指位置、检测手势以及用 Pixi.js 构建简单游戏等,Leap Motion 硬件是迈向科幻电影中那种未来感手势驱动计算系统的第一步,文中还提到 Leap Motion 为多种编程环境提供了 SDK 且有其他未涉及的功能,下一篇文章将展示用 Pixi.js 构建更完整的游戏。

关键信息:

  • Leap Motion 控制器原理及工作方式,如通过内置摄像头和红外 LED 捕获分析手指和手的运动,将图像数据处理为手势和触摸事件。
  • Leap Motion JavaScript 库依赖 WebSockets 与浏览器通信,安装后会有后台运行的轻量级 WebSocket 服务器。
  • 利用 Leap Motion 数据进行编程的步骤,如获取手指位置、归一化坐标、在屏幕上绘制等。
  • 检测手势的方法,通过 gestures 属性获取手势数组并进行处理。
  • 用 Pixi.js 构建游戏的过程,包括创建舞台、渲染引擎、背景、精灵等,以及利用 Leap Motion 控制游戏元素。

重要细节:

  • 文中代码示例详细展示了如何实现各种 Leap Motion 相关功能,如获取单个手指的原始坐标和稳定化坐标,将坐标映射到浏览器窗口内,绘制手指位置和手势,构建游戏等。
  • 提到 Leap Motion 官方文档可查看完整功能支持,且文中发布了包含所有代码示例的 GitHub 仓库和一个用 Three.js 展示三维手指位置追踪的 WebGL 示例。
  • 游戏示例中的精灵和背景图像来源,如 Daniel Cook 的 SpaceCute 精灵集合和 OpenGameArt 的太空起始集。
阅读 6
0 条评论