如何利用leap motion sdk创建支持手势操控的Web游戏

Leap Motion 手势控制器开箱体验:略感挫折
腾讯科技 王钟婉发自硅谷 7月25日Leap Motion体感控制器是近期的热门科技产品,通过这款产品,使用者可以直接通过手或手指对进行隔空操纵,在Leap Motion支持下,非触屏的电脑产品也可以像平板电脑或一样进行正确的图片缩放、手写甚至游戏控制。目前我们已经第一手取得这款产品的媒体测试版本,在深进评测之前,先来谈谈Leap Motion给我们的第一印象。第一次看到Leap Motion的实机展示是在今年三月SXSW的展会上,当时完全被它的精确性所震动。体感控制器的概念并不新,从最早任天堂游戏机Wii和XBOX的Kinect开始,这个概念就已经逐渐进进家中客厅,微软也在今年的CES推出感知型电脑,让用户能够透过面部表情和手势动作控制电脑。Leap Motion之所以引起讨论,当然要回功于几点与其他体感控制器的最大不同之处。第一,价格:Leap Motion控制器在美国税前的零售价格为79.99美元,比起其他如Kinect或Wii等体感控制器要价数百美元,更具吸引力。当然,两者的功能并不相同,Kinect与Wii等体感控制器主要是游戏;而Leap Motion固然有游戏功能,但更多的是看重未来在包括绘图设计、教学甚至医疗等各领域的应用上。第二,精确度:Leap Motion最自豪的就是精确程度可以达到百分之一毫米的精确程度。第三,速度:Leap Motion的技术能快速处理收集到的资料,让用户感觉不到有任何延迟反应,同时可以在每秒撷取超过200个画面。第四,Leap Motion控制器上的互动区范围相当大,能够让用户的手与手臂自由活动,在控制器之上和左右150度角左右,都可以达到2英尺;前后120度角的深度也可达到2英尺。在初步了解Leap Motion与其他控制器的不同点后,接下来当然要实际把玩。首先一打开盒子,就可以看到如火柴盒大小的控制器:长10公分、宽4公分、高1.6公分。打开下层后就可以看到两条长度不同的USB缆线。将控制器连接到电脑的USB槽后,需要到Leap Motion网站上下载软件。之后用户需要登陆Leap Motion网站设立个人帐户,方便登进应用商店Airspace Store。之后就会进进示范互动直播,教用户如何使用控制器,包括控制器感应的范围、精密程度以及如何绘图等。正如该公司所宣称,Leap Motion最大的创新是软件,而不是硬件:控制器本身结构非常简单,玄色玻璃镜面下,只有红外线LED灯与两个摄像头;而用户在控制器上面所做出的任何手势,软件都可以精确地追踪手指的每个细微动作。当然现在Leap Motion还无法取代滑鼠、键盘或甚至触控屏幕等主要控制电脑的方式,但是当你开始使用新的Leap Motion控制器后,至少在某些情况下,你可以想像未来的不久,把这些东西完全抛开。用户使用Leap Motion控制器的主要方式是透过应用商店Airspace,在下载软件后就会自动建立一个桌面应用。Airspace包括示范视频直播以及应用商店的连结,其设计相当简洁,以游戏、教育、科学、、实验、创意工具等不同种别,用户也可以搜寻自己想要的应用。初期只有75个应用,有些免费,有些则要价99美分,均匀则在1.99美元到4.99美元之间,最贵的一款是99美元的MIDI混音应用。现在商店内的应用包括一些热门游戏像是”水果忍者”和”割绳索”,还有打鼓应用AirBeats,以及名为Cyber Science-Montion的头骨解剖应用,甚至还可以体验Google Earth等等。第一次尝试Leap Motion,你可以在电脑屏幕前控制三维的立体头骨、解剖田鸡,甚至玩热门游戏”割绳索”,完全不需要实际碰触到电脑或是其他任何设备。割绳索与Cyber Science-Motion大概是Leap Motion体验最顺畅的两个应用。割绳索这个游戏主要是切断连著糖果的绳索,把糖果送进绿色小怪兽的嘴里。经过几次的练习,很快就可以知道需要做出多大的动作才能切断绳索,特别对以前就在平板或手机上玩过此游戏的玩家,应该很快就能上手。另一款应用Cyber-Science-Motion的体验也相当有趣,一旦搞清楚如何操纵三维的立体头骨,就可以很轻松地从不同角度,缩小或放大,选择和移除特定部分头骨,包括每一颗牙齿都可拔除。在其他应用上,体验则让人感到非常挫折,成效也没有想像中的好。像是下载的绘图应用Painter Freestyle,要虚拟画笔的控制性极差,要换不同画笔,或是改变颜色都很困难。另外一款免费游戏Shimsham,则更是令人摸不著头绪。没有任何示范的情况下,完全靠玩家的直觉操控游戏,但偏偏所用的手势又不是马上就能领会,在努力玩了十分钟,还是搞不清楚游戏本质后,在满腔挫折下终于宣告放弃。即使体验顺畅,对于一般用户要用在什么地方,可能还是个疑问。可以想见的是对于部分像是绘图、塑造模型和虚拟解剖,甚至能让浏览网页更加轻易,但是否能表现的比滑鼠、键盘等工具更好或更简单,可能还需要一点时间。而且大家使用电脑的时间越来越长,在试用Leap Motion,手臂跟手掌悬空三小时的结果,就是隔天手臂与肩膀酸痛到不行,固然从正面来想可能有助于矫正姿势,但实在很难想像天天使用八小时的后果。完全靠手势操纵的Leap Motion,固然在家实际把玩的体验并不完美,但是这并不妨碍Leap Motion未来无穷的可能。之前采访Leap Motion CEO首席执行官 Michael Buckwald时,他向腾讯科技表示,固然现在控制器已经做到非常小,但未来的目标将把此技术和硬件嵌进电脑、平板电脑、智能手机,甚至汽车驾车面板中,而适用的范围也将不只是游戏,而是扩大至教学、医疗等用途。Leap Motion在公司网站上表示,已经收到来自全球150个国家数十万个预购订单,将会持续出货满足预购用户的需求,美国民众7月28日后将可在Best Buy买到。
由编辑,转载请注明出处! (
原标题: 电子 Leap Motion 手势控制器开箱体验:略感挫折
编辑: huaer &&
文章地址: /life/digi/0H.html
爱美丽编辑推荐:
爱美丽网内容精选
爱美丽专题热点
热点推荐HOT在 SXSW 上的 Leap Motion 带来游戏新操作
“西南偏南”(SXSW)是美国音乐、科技盛宴,上面充斥着新鲜事物,让人兴奋不已。被誉为“计算行业下一款颠覆性作品”的 Leap Motion,也在“西南偏南”中露脸,为 5 月份正式发售做好铺垫工作。
之前,Leap Motion 与极简任务管理应用 Clear 相结合,让人们在电脑前面也能使用手势来打开 Clear 上建立的待办列表,展示 Leap Motion 与第三方应用相结合后,拥有的巨大潜力。而在音乐节上,公司的创始人以及 CTO David Holz 则为
带来利用 Leap Motion 手势操作游戏的情景。
其中一个游戏 Demo 把场景放在了深海,深海里面数量庞大的鱼群,此时人的五个手指则扮演着海中的光源,引导鱼群游来游去。这个游戏 Demo 测试了 Leap Motion 多点手势的性能。
Holz 还带来了由 Double Fine 开发的 Dropchord,这是一款结合音乐要素的消除类游戏。它在一个圆圈中放上了一条可改变位置的横线,需要人们左右两只手的配合,改变横线在圆圈里的位置,按照游戏中的提示进行相应操作,才可得分。
在游戏实际操作中,左右手的位置将决定横线的位置,不但可以上下移动,还可以倾斜着来,还可以翻转。甚至可以用力一些,两只手猛然交错,然后猛地一收,横线就会不断的转圈。
除了游戏以外,Holz 还为 The Verge 演示另一个利用手势来操作 3D 模型的 Demo。在这个 Demo 中,我们的手指拿捏便可变 3D 模型的形状,而 Holz 将模型旋转起来之后,改变 3D 模型的形状时,带有随机性和任意性了。这个过程,就好像将黏土放在陶轮中央,紧接着用手为改变黏土的形状,最终得到一个陶器。
当然,我们也可以观察到,Leap Motion 监测的范围是它上方的一小块空间,如果脱离了这个空间,就监测不到信号,这要求我们长期悬空手臂,也许会让人感到疲劳。
但不管如何,Leap Motion 是取代鼠标的一个备选项,它的高精度以及立体手势操作,为电脑上的软件带来不同交互方式。
爱范儿副主编,创业生态负责人。于不可能处发现可能。
加载中......
在 SXSW 上的 Leap Motion 带来游戏新操作Leap Motion体感控制器跳票:推至7月底上市
Leap Motion可通过动作手势操控电脑
新浪科技讯 北京时间4月27日凌晨消息,体感控制器开发商Leap Motion今天宣布,原定于5月13号开始发货的Leap Motion体感控制产品,现推迟到7月22号发布。推迟原因是Leap Motion需要进行新一轮测试。
Leap Motion的CEO迈克尔-巴克沃德(Michael Buckwald)表示,新一轮测试将于6月第一周开始,届时测试将同时面向开发者和非开发者。他强调,本次推迟发布产品不是硬件方面的问题,因此不用担心已经生产的60万台产品,本轮测试重点在于提高用户体验。他还提出:&我们坚持的理念是:产品在达到预期标准之前,一定不会上市,而我们的这一标准是相当高的。&
Leap Motion着重声明了本次延期不会对其与惠普、华硕的合作关系产生影响。用巴克沃德的话说,&这将是Leap Motion第一次、也是唯一一次的延期。从现阶段看,7月22日这一发布日期仍是相当紧张。&(陈然)
Leap Motion演示视频:
官方微博/微信
每日头条、业界资讯、热点资讯、八卦爆料,全天跟踪微博播报。各种爆料、内幕、花边、资讯一网打尽。百万互联网粉丝互动参与,TechWeb官方微博期待您的关注。
↑扫描二维码
想在手机上看资讯资讯和科技八卦吗?想第一时间看独家爆料和深度报道吗?请关注TechWeb官方微信公众帐号:1.用手机扫左侧二维码;2.在添加朋友里,搜索关注TechWeb。
体感控制器
相关的资讯有:
体感控制器
相关的博文有:
其实就安卓手机而言,如今愈发明显的呈现出性能过剩的局面。单就性能来说,千元机与旗...
当我第一次得知要评测乐1的时候,其实我是拒绝的。对于一个靠在线视频起家,主攻智能...
iPhone 6S真的要使用双摄像头?台湾电子时报给出消息称,苹果打算采用Altek开发出的适...
每年6月的苹果全球开发者大会(以下简称“WWDC”),苹果都会向人们展示iPhone、iPad和M...
2011年底,在接到华为消费者BG总裁余承东做手机的邀请时,华为手机产品线总裁何刚的第...
大家只看到了那些成功人士的现在,却很少有人知道他们年少时期是怎么过来的。马云第一...
战舰少女围剿大作战活动即将到来!5月25日至5月27日期间,限时击沉100艘战巡,奖励全......
我叫MT2新版竞技场国家队英雄分析带给玩家,新版后沐丝崛起,搭配桶牛可以说是目前最......
刀塔传奇本月的签到英雄是兽王,大家拿到手之后想必对他与其他英雄的搭配还有一些纠结......
奇迹暖暖公测开启啦!新玩家们进入游戏首先要做的当然是先把剧情通一遍。下面蚕豆网小......
Copyright (C)
All rights reserved.
京公网安备号
请选择一张图片分享
要转发到新浪微博,请
要转发到QQ空间,请如何利用Leap Motion创建支持手势操控的Web游戏 - 推酷
如何利用Leap Motion创建支持手势操控的Web游戏
有了Leap Motion,大家可以跟游戏手柄说拜拜了。
现代智能手机凭借着以手势与触控为核心的新型用户界面为我们带来前所未有的使用体验。随着时间的不断推移,我们几乎可以肯定地认为,在计算的未来中触控技术将扮演愈发重要的关键性角色。不过话虽如此,一系列艰难挑战仍然横亘在开发者面前、使他们很难在台式设备上充分发挥触控机制的巨大优势。
深度相机与3D位置追踪器的出现隐隐给触控式互动操作的迅速普及指出了一条光明的发展道路。虽然目前的最新一代技术仍然远远无法与《少数派报告》中的展示效果相提并论,但其中蕴含的可观潜力却绝对不容置疑。
就在去年,我们曾经对Leap Motion控制器进行过一番评测——这款设备利用高精度动作捕捉与手指追踪技术成功在任何标准化台式机上实现了手势输入机制。作为一套经由标准USB端口连接的设备,Leap Motion控制器通过其内置摄像头与红外LED来捕捉用户手指与手部的细微活动。Leap Motion软件会对图像数据加以处理,并将这些信息翻译成手势以及触控事件。
Leap Motion提供一套指向性极广的SDK,旨在帮助开发人员更轻松地在自己的应用程序当中实现对该设备的支持。它支持跨越多种平台的一系列不同编程语言——除了原生桌面软件之外,Leap Motion还提供一套JavaScript库,从而通过构建Leap兼容性网站的方式将开发成果在Web浏览器上加以呈现。
Leap Motion SDK非常容易上手,掌握之后能为我们带来极为丰厚的回报。它以抽象化方式消除了控制器所固有的大部分复杂因素,通过高级别API实现了对手部及手指追踪数据的捕捉。在今天的文章中,我们将共同探讨如何构建起一款能够充分发挥Leap Motion追踪功能优势的前端Web应用程序。作为初始内容,我们先来说明如何在HTML Canvas元素上渲染手指定位点,而后再一步步讨论怎样利用Pixi.js图形库来配合Leap Motion控制机制开发出简单的2D游戏。
Leap Motion JavaScript库依赖于WebSockets将来自控制器的数据提交并显示在用户的Web浏览器之上。WebSockets标准的设计目标在于允许JavaScript代码运行在网页当中,从而确保网页与远程服务器之间始终保持有长效连接——这一特性通常被用于创建基于浏览器的聊天客户端以及其它一些实时类Web应用程序。
当用户部署好了自己的Leap Motion设备、并为其安装了附带的软件及驱动程序之后,其中作为内置软件组件之一的轻量级WebSocket服务器就会运行在用户计算机的后台进程当中。由Leap Motion控制器捕捉到的数据会被发往WebSocket服务器,这是为了能够让相关数据直接交由Web浏览器使用、而无需另行安装额外的浏览器插件。Leap Motion JavaScript库与本地WebSocket服务器相连,负责捕捉数据并利用部分简单API进行打包以保证其易于使用。
作为开发工作的第一步,让我们首先创建一个网页,并在其中载入Leap Motion JavaScript库、获取来自设备的数据并记录下浏览器调试控制台中的部分数据:
&/leap-0.4.2.js&
&text/javascript&
&&&&&Leap.loop(function(frame)&{&
&&&&&&&if&(frame.pointables.length&
&&&&&&&&&&console.log(frame.pointables);&
上述代码的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都被输出至控制台当中。如果大家检查这些被推送至控制台的指向物对象,就会发现其中有多项属性被用于描述显示信息——例如指向物的长度与宽度、指向物末端的空间坐标以及该指向物末端的移动速度等。
在火狐开发者控制台中查看指向物对象。
计算标准化手指位置
利用指向物数据,我们将建立一套简单的演示范例,用户可以利用它通过移动手指控制屏幕上某个元素的位置。第一步,我们需要获取指尖的具体位置。下面的示例代码为如何获取单个指向物的原始坐标:
Leap.loop(function(frame)&&
{&&&if&(frame.pointables.length&
&&&{&&&&&var&
.pointables[0].tipP
&&&&&console.log(&X:&&&+&position[0]&+&&&Y:&&&+&position[1]);&
在多数情况下,大家都会优先使用Leap Motion软件所提供的自动稳定功能,而不太可能直接使用原始tipPosition数据。Leap Motion控制器会以极高的精度对图像中的活动对象加以检测,并从中甄别出使用者手部几乎难以察觉的细微摇晃及活动。另一项名为stabilizedTipPosition的备选属性则允许我们收集同样的数据,但在结果中过滤掉上述细微活动。现在我们已经获得了用户手指的物理坐标,接下来要做的就是将其与浏览器窗口内的位置进行关联。
在Leap Motion的术语体系中,由控制器加以追踪的大型虚拟空间被称为互动框(interaction box)。帧对象的interactionBox属性当中包含多种方法与属性,它们负责提供与互动框及其维度相关的具体信息。它采用一种便捷的标准化方法,即将某个物理点的原始坐标换算成能够代表该点在互动框中相对位置的等效数值。
标准化定位机制非常实用,因为它能帮助我们获取手指的原始位置、并将其与应用程序窗口中的对应点加以映射。标准化坐标使用浮点数值格式,具体数值在0到1之间浮动。要想获取浏览器窗口中对应点的相对数值,大家只需将X与Y值同目标区域的高度与宽度相乘即可:
Leap.loop(function(frame)&{&
&&&if&(frame.pointables.length&
.pointables[0].stabilizedTipP
normalized
.interactionBox.normalizePoint(position);&&
&&&&&&&&&var&
.innerWidth&*&normalized[0];&
.innerHeight&*&(1&-&normalized[1]);
&&&&&&console.log(&X:&&&+&x&+&&&Y:&&&+&y);&
在屏幕上绘制手指位置
利用标准化定位机制,现在我们已经可以在网页上绘制手指的具体位置。为了简单起见,这篇文章将只向大家展示如何利用DOM元素实现这一目标。只需创建一个具备绝对位置的div,而后将其top与left属性分别设置为对应的X与Y坐标,我们就能将Leap Motion loop中的标准化函数用于定位:
&/leap-0.4.2.js&
&text/css&
&&&&&&&#position&{&
&&&&&&&&&width:&25&
&&&&&&&&&height:&25&
&&&&&&&&&position:&&
&&&&&&&&&background-color:&&
&position&
&text/javascript&
&&&&&Leap.loop(function(frame)&{&
&&&&&&&&&if&(frame.pointables.length&
&&&&&&&&&&var&
.pointables[0].stabilizedTipP&
&&&&&&&&&&&var&
normalized
.interactionBox.normalizePoint(position);&&
&&&&&&&&&&var&
.getElementById(&position&);&
&&&&&&&&&&&&
element.style.left
.innerWidth&*&normalized[0];&&
&&&&&&&&&&
element.style.top
.innerHeight&*&(1&-&normalized[1]);&
&&&&&&&&&}&
这样一来,当用户在Leap Motion控制器前方移动自己的手指时,屏幕上的div元素也将随之发生位移。在目前为止的示例中,我们只涉及单一手指的处理,也就是使用pointables数组中的第一个元素。在接下来的示例中,我们将逐步探寻数组中第一个元素的作用、从而使每根手指都成为可操作对象。这一次,我们将在HTML 5 Canvas上描绘手指位置、而不再使用DOM元素:
&/leap-0.4.2.js&
&text/javascript&
.getElementById(&canvas&);
.getContext(&2d&);
&&&&&&&&&&Leap.loop({frameEventName:&&animationFrame&},&function(frame)&{
&&&&&&&&&ctx.clearRect(0,&0,&ctx.canvas.width,&ctx.canvas.height);
&&&&&&&&&&frame.pointables.forEach(function(pointable)&{
&&&&&&&&&&&var&
.stabilizedTipP
&&&&&&&&&&&var&
normalized
.interactionBox.normalizePoint(position);
&&&&&&&&&&&&var&
.canvas.width&*&normalized[0];
&&&&&&&&&&&var&
.canvas.height&*&(1&-&normalized[1]);
&&&&&&&&&&&&ctx.beginPath();
&&&&&&&&&&&ctx.rect(x,&y,&20,&20);
&&&&&&&&&&&ctx.fill();
&&&&&&&&&});
在上面的示例中,我们利用forEach方法对pointable项目进行了遍历。它会对每一个标准化位置进行识别,而后将其作为矩形绘制在屏幕当中。此外,clearRect方法在处理每一帧图像时都会被调用一次,旨在确保前一帧所绘制的矩形切实得到清除。
上述示例当中还引入了另一项新功能,即frameEventName选项。在默认状态下,Leap.loop回调将被调用至每一个提取自Leap Motion控制器的帧数据。对frameEventName选项中的“animationFrame”值进行设置会改变这一行为机制,从而令Leap.loop与浏览器的绘制周期保持一致。它会利用浏览器的requestAnimationFrame API,从而确保该回调只在浏览器准备进行绘制时被调用。
除了手指位置,Leap Motion SDK还能够识别出其它几种手势动作,其中包括扫动与点触。Leap Motion帧对象当中包含一个手势属性,能够提取从帧数据中检测出的一系列手势信息。以下示例代码显示了如何对扫动手势进行迭代、对其起始与结束位置进行标准化处理并最终将结果绘制在Canvs当中:
.getElementById(&canvas&);&
.getContext(&2d&);&
&&&enableGestures:&true,&&&frameEventName:&&animationFrame&&};&
&&Leap.loop(options,&function(frame)&{&
&&&ctx.clearRect(0,&0,&ctx.canvas.width,&ctx.canvas.height);&
&&&&frame.gestures.forEach(function(gesture)&{&
&&&&&if&(gesture.type&!=&&swipe&)&&
.interactionBox.normalizePoint(gesture.startPosition);&
.interactionBox.normalizePoint(gesture.position);&
&&&&&&var&
.canvas.width&*&start[0];&
.canvas.width&*&(1&-&start[1]);&
&&&&&&var&
.canvas.width&*&end[0];&
.canvas.width&*&(1&-&end[1]);&
&&&&&&ctx.beginPath();&
&&&&&ctx.moveTo(startX,&startY);&
&&&&&ctx.lineTo(endX,&endY);&
&&&&&ctx.stroke();&
Leap Motion SDK在默认状态下不会显示手势。为了获取手势数据,我们必须将选项对象的enableGestures属性设为true,而后再将其传递至Leap.loop方法当中。如果该选项没有经过设置,那么frame.gestures数组将直接为空。
每一种手势都具备一项type属性,用于描述该手势的相关性质。在forEach loop当中,首先利用条件表达式来忽略不属于扫动的手势动作。接下来,利用interactionBox对手势的起始与结束位置进行标准化处理。最后,利用标准Canvas绘制API来描绘由起始位置到结束位置的线条。
在面对Leap Motion设备进行手部扫动操作时,大家应该能够在Canvas上看到自己的动作轨迹线条。手势检测在更为广义的互动操作之下起着非常关键的作用。举例来说,大家可以通过向左或者向右的扫动操作帮助用户导航至相册界面的上一个或者下一个显示条目当中。
为了找到更多明确的黑色方块,大家往往尽快得焦头烂额。
下页精彩内容继续
已发表评论数()
&&登&&&陆&&
已收藏到推刊!
请填写推刊名
描述不能大于100个字符!
权限设置: 公开
仅自己可见

我要回帖

更多关于 leap motion 开发 的文章

 

随机推荐