真正的游戏体验

Robby Ingebretsen

4.33/5 (3投票s)

2015年7月22日

CPOL

7分钟阅读

12784

本教程是关于“飞行街机”系列教程的第三篇，旨在展示 Web 平台以及新的 Microsoft Edge 浏览器和 EdgeHTML 渲染引擎所能实现的可能。

如今，借助 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）表示。它还包括一个方向键、4 个游戏按钮、顶部按钮和触发器：所有这些在 Gamepad API 中都表示为按钮。

当前的 Xbox 控制器将按钮状态报告为 0（正常状态）或 1（已按下）。但是，您可以想象未来的控制器可能会报告每次按钮按下的施力大小。

Xbox 的方向键也报告离散值（0 或 1），但摇杆在整个轴范围 [-1..1] 内提供连续值。这种额外的精度使得在我们的“飞行街机”任务中飞行飞机更加容易。

PxGamepad

Gamepad API 提供的按钮和轴数组具有前瞻性，并且非常适合作为底层 API。但是，在编写游戏时，拥有标准游戏手柄（如 Xbox One 控制器）的高级表示形式会更方便。我们创建了一个名为 PxGamepad 的辅助类，该类将按钮和轴索引映射到 Xbox 控制器上标记的更熟悉的名称。

我们将详细介绍该库的一些有趣部分，但完整的源代码（MIT 许可证）可在此处获取：https://github.com/thinkpixellab/PxGamepad

标准的 Gamepad API 以按钮数组的形式提供按钮状态。同样，此 API 的设计考虑了灵活性，允许控制器具有各种按钮数量。但是，在编写游戏时，使用标准映射的按钮名称编写和阅读代码会容易得多。

例如，使用 HTML5 Gamepad API，以下是检查左触发器当前是否按下的代码

PxGamepad 类包含一个 update 方法，该方法将收集所有标准映射按钮和轴的状态。因此，确定 leftTrigger 是否已按下就像访问布尔属性一样简单

标准 Gamepad API 中的轴也作为数值数组提供。例如，以下是获取左摇杆的标准化 x 和 y 值的代码

方向键是一个特殊情况，因为它在 HTML5 Gamepad API 中被视为一组四个按钮（索引 12、13、14 和 15）。但是，开发人员通常允许方向键以与摇杆相同的方式使用。PxGamepad 提供方向键的按钮信息，但它也合成轴信息，就像方向键是一个摇杆一样

HTML5 Gamepad API 的另一个限制是它不提供按钮级别的事件。游戏开发者通常希望为按钮按下激活单个事件。在“飞行街机”中，点火按钮和刹车按钮是很好的例子。PxGamepad 会监视按钮状态，并允许调用者注册按钮释放通知。

以下是 PxGamepad 支持的命名按钮的完整列表

a
b
x
是
左顶部
右顶部
左触发器
右触发器
select
start
左摇杆
右摇杆
上方向键
下方向键
左方向键
右方向键

获取当前游戏手柄

有两种方法可以检索游戏手柄对象。Gamepad API 向 navigator 对象添加了一个名为 getGamepads() 的方法，该方法返回所有已连接游戏手柄的数组。还有新的“gamepadconnected”和“gamepaddisconnected”事件，它们会在每次连接或断开新游戏手柄时触发。例如，PxGamepad 辅助类存储最后一个连接的游戏手柄的方法如下

这是使用 navigator.getGamepads() API 检索第一个标准游戏手柄的辅助方法

PxGamepad 辅助类专为单个用户使用标准映射游戏手柄玩游戏的简单场景而设计。最新的浏览器（如 Microsoft Edge）完全支持 W3C Gamepad API。但是，其他一些浏览器较旧的版本仅支持新兴规范的部分内容。PxGamepad 会监听 gamepadconnected 事件，并在需要时回退到查询所有游戏手柄的列表。

Gamepad 的未来

虽然 PxGamepad 专注于简单、最常见的场景，但 Gamepad API 完全能够支持多个玩家，每个玩家都有自己的游戏手柄。PxGamepad 的一个可能的改进是提供一个管理器类，该类跟踪多个游戏手柄的连接并将它们映射到游戏中的多个玩家。另一个可能是允许用户重新映射或自定义其游戏手柄上的按钮功能。

我们还对 Gamepad 在非游戏场景中的潜力感到兴奋。随着 WebGL 的兴起，我们看到了 Web 上各种创新的 3D 用例。这可能意味着使用 GlacierWorks 以 3D 方式探索珠穆朗玛峰地区。或者，多亏 CyArk 致力于对重要的世界遗址和文物进行数字化保护，才能查看大英博物馆的亚述文物收藏。

在开发“飞行街机”的过程中，我们经常使用 Blender 和其他 3D 工具来处理 Babylon.JS 的模型。一些开发人员和艺术家使用一种称为 3D 鼠标的设备来帮助操纵和导航 3D 模型。这些设备通过六个轴跟踪单个旋钮的移动！它们使得操纵模型变得非常容易和快捷。除了游戏之外，它们还用于各种有趣的应用程序，从工程到医学成像。在为“飞行街机”添加游戏手柄支持时，我们惊讶地发现 Gamepad API 检测到了我们的 3D SpaceMouse，并提供了所有六个轴的移动数据！

令人兴奋的是，可以想象新的 Gamepad API 提供的所有可能性。现在是时候尝试新的 Gamepad API，为您的下一个游戏或应用程序添加精确的控制和许多乐趣了！

真正的游戏体验

灵活的 API

PxGamepad

获取当前游戏手柄

Gamepad 的未来

更多关于 JavaScript 的实践