本文是Microsoft的Web开发系列的一部分。 感谢您支持使SitePoint成为可能的合作伙伴。
使用Canvas,WebGL和WebAudio之类的HTML5技术,Web游戏已经走了很长一段路。 现在可以在浏览器中生成高保真图形和声音。 但是,为了提供真正的游戏体验,您需要为游戏设计的输入设备。 Gamepad API是W3C的拟议标准,旨在提供跨浏览器的一致API。
Gamepad API允许用户将Xbox控制器等设备连接到计算机,并将其用于基于浏览器的体验! 如果您有游戏板,请尝试将其插入计算机,然后按一个按钮。 您会看到下面的Xbox控制器点亮,以反映您所做的每个动作!
本教程是Flight Arcade系列文章中的第三篇,旨在演示在Web平台以及新的Microsoft Edge浏览器和EdgeHTML呈现引擎中可能发生的情况 。 您可以在flightarcade.com上找到有关WebGL和Web API的前两篇文章,以及本文的交互式代码和示例。
灵活的API
Gamepad API经过精心设计,充分考虑了灵活性。 在基本级别上,它提供对按钮和轴的访问。 按钮值的范围是[0 .. 1]
,轴的范围是[-1 .. 1]
。 所有值都被标准化为这些范围,因此开发人员可以期望设备之间的行为一致。
Gamepad
对象提供有关所连接游戏板的制造商和型号的详细信息。 更有用的是一个mapping
属性,它描述游戏手柄的常规类型。 当前,唯一受支持的映射是standard
,它对应于许多流行的游戏机(如Xbox)使用的控制器布局。
标准控制器映射有两个摇杆,每个摇杆由2个轴( x
和y
)表示。 它还包括一个D-pad,4个游戏按钮,顶部按钮和触发器:在Gamepad API中均表示为按钮。
当前的Xbox控制器报告按钮状态为0(正常状态)或1(按下)。 但是,您可以想象将来的控制器可以报告每次按键所施加的力。
Xbox D-pad还会报告离散值( 0
或1
),但是控制杆在整个轴范围[-1 .. 1]
提供连续值。 这种额外的精度使在我们的“飞行街机”任务中驾驶飞机变得更加容易。
Px游戏手柄
Gamepad API提供的按钮和轴的排列具有前瞻性,是低级API的完美选择。 但是,编写游戏时,最好具有Xbox One控制器之类的标准游戏手柄的高级表示。 我们创建了一个名为PxGamepad的帮助程序类,该类将按钮和轴索引映射到Xbox控制器上标记的更熟悉的名称。
我们将逐步介绍该库的一些有趣部分,但是完整的源代码(MIT许可证)可以在这里找到: https : //github.com/thinkpixellab/PxGamepad
标准的Gamepad API将按钮状态作为按钮数组提供。 同样,此API的设计具有灵活性,允许具有不同按钮计数的控制器。 但是,在编写游戏时,编写和读取使用标准映射按钮名称的代码要容易得多。
例如,使用HTML5游戏手柄API,以下代码可检查当前是否按下了左触发器:
PxGamepad类包含一个update方法,该方法将收集所有标准映射按钮和轴的状态。 因此,确定是否按下leftTrigger
就像访问布尔属性一样简单:
标准Gamepad API中的轴也以数值数组形式提供。 例如,下面是获取左摇杆的标准化x和y值的代码:
D-pad是一种特殊情况,因为它由HTML5 Gamepad API(索引12、13、14和15)考虑了一组四个按钮。 但是,对于开发人员来说,常见的做法是允许dpad的使用方式与其中之一相同。 PxGamepad提供了D-pad的按钮信息,而且还合成了轴信息,就像D-pad是摇杆一样:
HTML5 Gamepad API的另一个限制是它不提供按钮级事件。 对于游戏开发人员来说,想激活一个按钮按下的事件是很常见的。 在飞行拱廊中,点火按钮和制动按钮就是很好的例子。 PxGamepad监视按钮状态,并允许呼叫者注册按钮释放的通知。
这是PxGamepad支持的命名按钮的完整列表:
- 一个
- b
- X
- ÿ
- leftTop
- rightTop
- leftTrigger
- rightTrigger
- 选择
- 开始
- leftStick
- 右棒
- dpadUp
- dpadDown
- dpadLeft
- dpad右
获取当前的游戏手柄
有两种方法可以检索游戏手柄对象。 Gamepad API将一个方法添加到名为getGamepads()
的导航器对象中,该方法返回所有已连接游戏板的数组。 每当连接或断开新游戏手柄时,也会触发新的gamepadconnected
和gamepaddisconnected
事件。 例如,以下是PxGamepad帮助程序存储最后连接的游戏板的方式:
这是使用navigator.getGamepads()
API检索第一个标准游戏手柄的助手:
PxGamepad帮助程序类设计用于简单的场景,其中单个用户正在使用标准映射的游戏手柄来玩游戏。 最新的浏览器(例如Microsoft Edge )完全支持W3C Gampepad API。 但是,某些其他浏览器的旧版本仅支持该新兴规范。 PxGamepad侦听gamepadconnected事件,并在需要时返回查询所有Gamepad的列表。
游戏手柄的未来
尽管PxGamepad专注于简单,最常见的场景,但Gamepad API完全能够支持多个玩家,每个玩家都有自己的游戏板。 PxGamepad的一项可能的改进可能是提供一种管理器样式的类,该类跟踪多个游戏板的连接并将它们映射到游戏中的多个玩家。 另一个可能是允许用户重新映射或自定义游戏手柄上的按钮功能。
我们还对Gamepad在非游戏场景中的潜力感到兴奋。 随着WebGL的兴起,我们在网络上看到了3D的各种创新用途。 那可能意味着探索山。 使用GlacierWorks进行3D 珠穆朗玛峰地区 。 或感谢CyArk努力以数字方式保存重要的世界遗迹和文物,从而查看大英博物馆的亚述收藏 。
在Flight Arcade的开发过程中,我们经常使用Blender和其他3D工具处理Babylon.JS的模型。 一些开发人员和美术师使用一种称为3D鼠标的设备来帮助操纵和导航3D模型。 这些设备跟踪单个旋钮在六个轴上的运动! 它们使操作模型变得非常容易和快捷。 除了游戏之外,它们还用于从工程到医学成像的各种有趣应用。 在为Flight Arcade添加游戏板支持时,我们惊讶地发现Gamepad API检测到我们的3D SpaceMouse并提供了所有六个轴的运动数据!
想象新的Gamepad API提供的所有可能性令人兴奋。 现在是尝试新的Gamepad API并为下一个游戏或应用程序增加精确度控制和很多乐趣的好时机!
使用JavaScript进行更多操作
微软在许多开源JavaScript主题上有很多免费的学习知识,我们的使命是利用Microsoft Edge创造更多的知识。 这里有一些要退房:
- Microsoft Edge Web Summit 2015 (使用新的浏览器,新的Web平台功能以及社区来宾演讲者的完整预期系列)
- // BUILD /和Windows 10的构建 (包括用于站点和应用程序的新JavaScript引擎)
- 在不中断网络的情况下推进JavaScript (Christian Heilmann最近的主题演讲)
- 托管的Web应用程序和Web平台创新 (深入研究诸如歧管JS之类的主题)
- 使您的HTML / JavaScript更快的实用性能提示 (从响应设计到休闲游戏到性能优化的7个系列文章)
- 现代Web平台JumpStart (HTML,CSS和JS的基础知识)
还有一些免费的入门工具: Visual Studio Code , Azure试用版和跨浏览器测试工具 -所有这些工具都可用于Mac,Linux或Windows。
本文是Microsoft的Web开发技术系列的一部分。 我们很高兴与您共享Microsoft Edge和新的EdgeHTML渲染引擎 。 获取免费的虚拟机或在Mac,iOS,Android或Windows设备@ modern.IE上进行远程测试。
From: https://www.sitepoint.com/a-true-gaming-experience-with-the-gamepad-api/