如何利用Leap Motion创建支持手势操控的Web游戏
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何利用Leap Motion创建支持手势操控的Web游戏相关的知识，希望对你有一定的参考价值。
参考技术A 作为开发工作的第一步，让我们首先创建一个网页，并在其中载入Leap Motion javascript库、获取来自设备的数据并记录下浏览器调试控制台中的部分数据：<html> <head> <script src="http://js.leapmotion.com/leap-0.4.2.js"></script> </head> <body> </body> <script type="text/javascript"> Leap.loop(function(frame) if (frame.pointables.length > 0) console.log(frame.pointables); ); </script> </html>
上述代码的head元素中包含一个script标签，它的作用是从公司的CDN处下载Leap Motion JavaScript库。Leap Motion针对生产使用环境推出一套精简版本，此外还针对开发用途提供非精简版本。在这里我们使用的是非精简版本，这是为了能够在需要使用浏览器的JavaScript调试器时能够更轻松地对代码进行单步调试。大家可以点击此处访问Leap Motion官方网站，并在这里下载到前面提到的这两种版本。
在第二个script标签中，也就是页面body之下，我们利用Leap.loop方法对来自设备的数据进行捕捉。Leap Motion驱动程序会发出数据“帧（frame）”，这些帧也就是经过处理的控制器视频流快照。该软件每秒大约会产生30帧数据，从而持续不断地为应用程序的运行提供必要信息。被传递至该loop中的匿名函数在每次接收到新帧时都会执行一次。
Leap Motion API大大简化了对手部、手指以及工具位置的检测流程。这里的“工具”被认定为一种延长状物体，例如铅笔，其中一端由用户把持在手中。在Leap Motion的表述体系当中，通用术语“指向物（pointable）”被用于描述作为工具或者手指存在的对象。帧对象当中包含一项名为pointables的属性，用于显示一系列显示在帧内的指向物对象。
在前面的示例中，每一帧内所包含的一系列pointables都被输出至控制台当中。如果大家检查这些被推送至控制台的指向物对象，就会发现其中有多项属性被用于描述显示信息——例如指向物的长度与宽度、指向物末端的空间坐标以及该指向物末端的移动速度等。
基于unity3D游戏引擎与leap motion体感控制器的体感音乐交互类游戏
参考技术A 体感音乐游戏融合了音乐，运动和游戏元素，使游戏玩家获得多种感官体验，受到游戏玩家特别是年轻玩家的青睐。本文利用 unity3D 游戏引擎配合 leap motion 体感控
制设备实现了一种体感音乐交互游戏。主要使用了手势检测、节奏分析、碰撞检测等关
键技术实现游戏模式选择模块，音乐选择模块，游戏模块与分数结算模块。设计的游戏
利用 leap motion 体感控制设备将体感音乐融入到游戏环境中，游戏玩家可以通过手势
或键盘操纵游戏过程。由于加入体感控制设计，使游戏模式更加丰富，增强了游戏的可
玩性与玩家的活动范围。改变了传统的游戏模式，使得游戏过程更加灵活，更利于玩家
的身心健康。使用 DOTween 游戏动画引擎在游戏中添加的补帧动画效果使游戏界面更
加灵活，大大提升了玩家体验感。最后对实现的游戏进行了测试。
关键词 人机交互 Leap Motion 控制器 Unity3D 体感游戏 节奏分析
1.选择游戏模式
玩家进入游戏后，将会观看游戏进入指南与操作手势帮助（如图17、18所示），之后无需玩家操作，经过一段时间后自动进入模式选择场景。
玩家在此处可选择将手左滑锁定本地歌曲模式，这时可以看到写有“custom music”的游戏对象面积小幅度变大，而玩家将手右滑锁定内置歌曲模式时，可以看到写有“select music”的游戏对象面积以同等程度变大。
之后玩家握拳选定模式，这时被选中的模式相对应的游戏对象面积进一步增大，之后整个游戏场景逐渐消失黑屏数秒后进入相应的歌曲挑选场景，值得注意的是在场景黑屏之前取消握拳动作意味着玩家放弃选定，游戏对象的大小会恢复并等待玩家的下一次操作。
2.选择游戏歌曲
2.1本地模式
通过选定写有“custom music”的游戏对象进入本地歌曲挑选界面，玩家可以通过屏幕中显示的虚拟手型确定自己手部相对屏幕所处的位置 ，此时对于屏幕中所显示的歌曲对象，可以做出点击手势点击“listen”按钮试听音乐，点击“play”按钮开始所选择歌曲的游戏。
此时若界面中罗列了超出屏幕显示数量的歌曲，玩家可以通过手的上下滑动浏览歌曲列表。
2.2内置模式
通过选定写有“select music”的游戏对象进入内置歌曲挑选界面，玩家可以通过屏幕中显示的虚拟手型确定自己的手势动作，通过手的左右挥动来选择不同的歌曲，锁定歌曲后，玩家可以通过将手掌反转180°的操作来更换歌曲游戏的难易度，每翻转一次玩家都可以通过屏幕中的难易度栏来确认目前的游戏难易度，锁定难易度后，玩家通过握拳操作选定当前歌曲并且以此歌曲开始游戏，此时可以观察到屏幕中显示歌曲封面的对象面积逐渐增大，之后场景透明度降低，在数秒的黑屏缓冲后进入游戏场景。
值得注意的是，如果在场景进入黑屏之前取消握拳手势，则被认定为放弃进入游戏，屏幕中的封面游戏对象会逐渐恢复此前大小并等待玩家的下一次操作。
3.进入游戏
玩家进入游戏后可以看到以宇宙为背景的游戏场景，跟随音乐的节奏会在屏幕中出现蓝色节奏点，节奏点在运动至与屏幕下方的两个光球相同的z坐标位置时，玩家需要操纵两个光球，使其与节奏点x坐标重合，也就是所谓的“接住”节奏点。玩家“接住”节奏点时，屏幕上出现hit字样并增加玩家的生命值（如图23所示），当玩家错过某个节奏点时，屏幕上出现miss字样并减少玩家的生命值（如图24所示）。若玩家连续“接住”节奏点且没有任何一个点被错过时，玩家的连击数会根据“接住”的节奏点数量增加，一旦玩家错过了某一个节奏点，则连击数立即归零。
玩家通过手的左右滑动来操纵光球，光球时刻保持与玩家手所在位置相同的x坐标，而除此之外的y，z则保持游戏默认值不变，在游戏开始时玩家若判断音乐前奏过长影响游戏体验，可以通过握拳的手势跳过音乐前奏部分。在游戏进行的任何时间玩家都能够使用将手掌反转180°的方式更改游戏背景的颜色以享受更加舒适的游戏过程。
4.游戏结束
(1)显示游戏成绩
在歌曲结束后，游戏界面在数秒的黑屏缓冲后进入游戏分数结算场景，场景中会显示玩家当前游戏的得分与失分，也就是“接住”与错过的节奏点的数量，此外还会显示玩家的连击数与游戏等级，以此来判断本局游戏玩家的表现是否出色。
(2)选择下一步动作
此时屏幕右下方存在两个游戏对象分别写有“retry”与“back”字样，玩家通过手的左右挥动来做出不同的选择，被选择的游戏对象面积将会增大，锁定选择后玩家通过握拳动作进入相应的下一个场景，选择“retry”对象时，玩家将再次体验与上一局游戏相同的歌曲与难易度，选择“back”对象时，玩家将会回到相应的音乐挑选场景，从本地音乐模式进入时玩家回到本地音乐挑选场景，从内置音乐模式进入时玩家回到内置音乐挑选场景。
以上是关于如何利用Leap Motion创建支持手势操控的Web游戏的主要内容，如果未能解决你的问题，请参考以下文章
基于unity3D游戏引擎与leap motion体感控制器的体感音乐交互类游戏
Leap motion中，手指悬停在一个地方几秒钟，怎么触发事件？
Leap Motion 之Unity 开发指南（一. 基本概念与制作手预制件）