看过本文的人也看了：
我要留言技术领域：
取消收藏确定要取消收藏吗？
删除图谱提示你保存在该图谱下的知识内容也会被删除，建议你先将内容移到其他图谱中。你确定要删除知识图谱及其内容吗？
删除节点提示无法删除该知识节点，因该节点下仍保存有相关知识内容！
删除节点提示你确定要删除该知识节点吗？拒绝访问 |
| 百度云加速
请打开cookies.
此网站 () 的管理员禁止了您的访问。原因是您的访问包含了非浏览器特征(3ae1ec66b40843f5-ua98).
重新安装浏览器，或使用别的浏览器您所在的位置： &
如何利用Leap Motion创建支持手势操控的Web游戏(2)
如何利用Leap Motion创建支持手势操控的Web游戏(2)
核子可乐译
Leap Motion硬件也许仅仅算是迈向未来的第一步（但却绝对堪称是‘人类的一大步’），很明显其实际表现与《少数派报告》等电影中展示的效果还存在着巨大的差距，不过它的出现已经标志着我们向手势驱动类计算系统吹响了进军的号角。由于引入了三维空间概念，这扇刚刚开启的大门完全有可能引领我们走入更为丰富也更为复杂的交互新时代――这要比我们习以为常的平面触控机制更加激动人心。
利用Leap Motion与Pixi.js创建一款简单游戏
现在我们已经介绍了关于Leap Motion开发的基础知识，是时候尝试建立一些更具现实意义的实验性成果了。在接下来的示例中，我们将一步步帮助大家构建起一款能够与Leap Motion控制器相对接的互动游戏。在该游戏中，大家可以移动自己的手指来控制屏幕上的宇宙飞船。玩家必须小心驾驶自己的飞船，从而避免与敌人的船只相撞。
我们利用Pixi.js&&一套简单的2D图形库&&进行游戏创建，它能够帮助大家轻松创建并操作HTML Canvas元素。底层Leap Motion控制方案则基于文章前面提到的单手指操作示例。在游戏中，经过标准化X与Y坐标处理的手指位置将被映射到画面中的飞船之上，也就是玩家所需要操作的对象。
为了帮助大家更轻松地遵照示例进行，我们在代码当中穿插注释来帮助各位读者顺利理解。下面来看游戏代码：
&&&&&&&&&&&src=&assets/pixi.dev.js&&type=&text/javascript&&&&&&&&&src=&/leap-0.4.2.js&&&&&&&&&&type=&text/css&&&&&&&&&#game&{&&&&&&&&&&margin-left:&&&&&&&&&&&margin-right:&&&&&&&&&&&&width:&800&&&&&&&&&&height:&600&&&&&&&&}&&&&&&&&&&&&&&&&&&&&&&id=&game&&&&&&&&&&&type=&text/javascript&&&&&&&&var&stageWidth&=&800;&&&&&&var&stageHeight&=&600;&&&&&&&//创建关卡与渲染引擎&&&&&&var&stage&=&new&PIXI.Stage(0xFFFFFF);&&&&&&var&render&=&new&PIXI.autoDetectRenderer(stageWidth,&stageHeight);&&&&&&document.getElementById(&game&).appendChild(render.view);&&&&&&&//&创建动态星空背景&&&&&&var&spacebg&=&PIXI.Texture.fromImage(&assets/spacebg.png&);&&&&&&var&space&=&new&PIXI.TilingSprite(spacebg,&stageWidth,&stageHeight);&&&&&&stage.addChild(space);&&&&&&&//&创建飞船对象&&&&&&var&rocket&=&PIXI.Sprite.fromImage(&assets/rocketship.png&);&&&&&&stage.addChild(rocket);&&&&&&&//这条变量用于控制游戏状态。&&&&&&//当飞船与短文碰撞时，此变量将被设置为&true&，&&&&&&//这时draw&loop中止并显示&游戏结束&字样&&&&&var&collided&=&false;&&&&&&&//在计时器中设置初始值&&&&&&//更多关于时间与游戏速度的详细信息&&&&&&var&timer&=&window.performance.now();&&&&&&&//设置Leap&Motion控制器loop&&&&&&var&options&=&{frameEventName:&&animationFrame&};&&&&&&var&controller&=&Leap.loop(options,&function(frame)&{&&&&&&&&&//我希望游戏中的各个元素能够始终以同样的速度进行移动。&&&&&&&&//如果激活了draw&loop，&&&&&&&&//游戏速度将根据帧速率进行变化。&&&&&&&&//我利用渲染时间差来确定实际距离&&&&&&&//场景中的每个元素都应该以每一帧为单位进行移动。&&&&&&&&var&now&=&window.performance.now();&&&&&&&&var&delta&=&Math.min(now&-&timer,&100);&&&&&&&&timer&=&now;&&&&&&&&&//让星空背景保持移动&&&&&&&&space.tilePosition.x&-=&0.2&*&&&&&&&&&&//检查&游戏结束&是否处于活动状态&&&&&&&&if&(collided)&{&&&&&&&&&&//创建并显示&游戏结束&标题&&&&&&&&&&var&caption&=&new&PIXI.Text(&Game&Over&,&{&&&&&&&&&&&&font:&&50px&Helvetica&,&fill:&&red&&&&&&&&&&&});&&&&&&&&&&&caption.x&=&stageWidth&/&2&-&caption.width&/&2;&&&&&&&&&&caption.y&=&stageHeight&/&2;&&&&&&&&&&&stage.addChild(caption);&&&&&&&&&&&//渲染该帧并调用返回结果&&&&&&&&&&//场景中的各元素保持静态&&&&&&&&&&return&render.render(stage);&&&&&&&&}&&&&&&&&&//遍历关卡当中的每一艘敌方船只&&&&&&&&space.children.forEach(function(child)&{&&&&&&&&&&//&使敌方船只向前移动&&&&&&&&&&child.x&-=&0.2&*&&&&&&&&&&&&//测宇宙飞船的中心点是否处于敌方船只的边界当中。&&&&&&&//这是一种非常简单的处理方式。&&&&&&&&&&//大家也可以选择采用更为智能的多碰撞检测机制&&&&&&&&&&//即利用&hitArea&设置更为精确的碰撞边界。&&&&&&&&&//如果用户与敌机接触，则变更&collided&值以结束游戏&&&&&&&&&&if&(child.getBounds().contains(rocket.x,&rocket.y))&&&&&&&&&&&&collided&=&true;&&&&&&&&&&&//移除移动至屏幕边缘以外的敌方船只&&&&&&&&&&if&(child.x&&)&&&&&&&&&&&&space.removeChild(child);&&&&&&&&});&&&&&&&&&//找到刚刚被添加到关卡当中的宇宙飞船&&&&&&&&var&last&=&space.children[space.children.length&-&1];&&&&&&&&&//如果屏幕上不存在宇宙飞船，则加入一艘新的船只&&&&&&&&//如果刚刚添加的船只距离右侧边缘超过250px，则再增加一艘新的船只。&&&&&&&&//这就是我们在游戏中派遣敌方船只的方式。在实际游戏中，&&&&&&&//大家可以进一步调低250px这一空间设置以增加游戏难度&&&&&&&&if&(space.children.length&==&0&||&last.x&&(stageWidth&-&250))&{&&&&&&&&&&var&item&=&PIXI.Sprite.fromImage(&assets/enemy.png&);&&&&&&&&&&item.y&=&Math.floor((Math.random()&*&(stageHeight&-&100)));&&&&&&&&&&item.x&=&stageWidth;&&&&&&&&&&space.addChild(item);&&&&&&&&}&&&&&&&&&if&(frame.pointables.length&&0)&{&&&&&&&&&&//获取标准化手指位置&&&&&&&&&&var&pos&=&frame.pointables[0].stabilizedTipP&&&&&&&&&&var&normPos&=&frame.interactionBox.normalizePoint(pos,&true);&&&&&&&&&&&//将宇宙飞船移动至标准化手指位置&&&&&&&&&&rocket.x&=&stageWidth&*&normPos[0];&&&&&&&&&&rocket.y&=&stageHeight&*&(1&-&normPos[1]);&&&&&&&&}&&&&&&&&&//&渲染场景&&&&&&&&render.render(stage);&&&&&&});&&&&&&&&
如大家所见，Leap Motion SDK让创建实时手势交互游戏变得相对简单了一些。利用代码示例中所涉及的开发技术，大家可以很轻松地创建出多种不同类型的游戏或者应用程序。如果大家拥有自己的Leap Motion控制器，不妨尝试利用沿X轴进行手指操控的方式开发&打砖块&或者&是男人就下一百层&之类的游戏。大家还可以通过多种方式对上述代码进行深入扩展，从而添加更多更为丰富的功能。举例来说，我们可以利用指向物的touchZone属性让宇宙飞船在识别到用户的指向划动操作时发射激光武器。
&手指？在向前行进时，我们不需要手指。&
我们在GitHub资源库中发布了本篇文章中所用到的全部代码内容，感兴趣的朋友可以进行查看。除此之外，作为奖励内容我们还利用Three.js制作了一份粗糙的WebGL示例，它能够显示出手指位置在三维空间中的追踪轨迹&&查看。
游戏中所使用的图像资源来自Daniel Cook发布的SpaceCute图像合集，大家可以进行下载。如果各位希望使用其它用于游戏原型设计的免费图形资源，也不妨看看Cook同志收集的其它好东西。背景图像来自OpenGameArt的宇宙飞行游戏入门素材，查看。
Leap Motion硬件也许仅仅算是迈向未来的第一步（但却绝对堪称是&人类的一大步&），很明显其实际表现与《少数派报告》等电影中展示的效果还存在着巨大的差距，不过它的出现已经标志着我们向手势驱动类计算系统吹响了进军的号角。由于引入了三维空间概念，这扇刚刚开启的大门完全有可能引领我们走入更为丰富也更为复杂的交互新时代&&这要比我们习以为常的平面触控机制更加激动人心。
这份教程当中涉及到了JavaScript使用场景，不过Leap Motion还提供面向更多其它不同编程环境的多种SDK。大家既可以轻松创建原生应用，也可以根据实际需要使用脚本化语言。
另外值得一提的是，除了本篇教程中所提到的功能之外、Leap Motion还提供更多有待发掘的珍贵资源。要详细了解Leap Motion SDK所支持的各项功能，我们强烈建议大家查看官方发布的说明文档。
请大家继续期待我们本系列专题中的下一篇文章，届时我们将向大家展示如何利用Pixi.js创建一款更为完整的游戏成品。我们将向其中添加更多游戏性功能&&包括更为深入的卷轴滚动周期以及游戏循环机制。此外，我们还会探讨如何利用新的HTML 5 Gamepad API让玩家能够通过传统的游戏主机手柄进行操作。
核子可乐译，点击。
【编辑推荐】
【责任编辑： TEL：（010）】
内容导航&第 1 页： &第 2 页：
关于&&&&的更多文章
iOS从最初的惊艳到后来的成熟，再到现在的转变，被誉为最佳移动
随着云计算、物联网、大数据、移动互联网的大发展，你应该知道这些。
上周雷军被董明珠当成一个手机贩子，360又抢了12306的
ApiDemo，该应用程序演示了很多API。这个示例应用程序
在iOS深层开发中我们大都会遇到诸如多媒体，传感器相
该书为C#经典名著！是Wrox红皮书中最畅销的品种之一。从第1版开始就名满天下；其第3版被评选为2005年最权威的十大IT图书之一；并
Windows Phone专家
Android开发专家
51CTO旗下网站}