移动端触摸控制

移动端触摸控制

未来的手游一定是 Web 的天下，许多开发者在游戏开发过程中首先选择移动端——在现代社会，这通常还涉及到触摸控制的实现。在本教程中，我们将看到在 HTML 游戏中实现移动控件是多么容易，并且可以在支持移动触摸的设备上尽情玩耍。

备注：游戏 Captain Rogers: Battle at Andromeda 是用 Phaser 构建的，控制管理也是基于 Phaser 的，但也可以用纯 JavaScript 完成。使用 Phaser 的好处是它提供了辅助变量和函数，可以让开发更简单、更快速，但选择哪种方法完全取决于你。

纯 JavaScript 方法

我们可以自己实现触摸事件——设置事件监听器，并分配相关的函数，非常简单直接：

const el = document.querySelector("canvas"); el.addEventListener("touchstart", handleStart); el.addEventListener("touchmove", handleMove); el.addEventListener("touchend", handleEnd); el.addEventListener("touchcancel", handleCancel);

这样，在移动设备上屏幕上触摸游戏的 <canvas> 将触发这些事件，因为我们就可以随意操控游戏（如：移动太空船）。事件如下所示：

备注：参考文章触摸事件提供了更多的示例和信息。

纯 JavaScript 示例

这个实现了移动端触摸的小型示例代码已经放到了 GitHub 上，我们下载这个示例就可以实现在移动端屏幕上移动飞船。

我们将两种事件：touchstart 和 touchmove 放到一个方法里处理。为什么呢？ touchHandler 方法定义的飞船位置变量适合下面两种情况下：当玩家触摸屏幕，但不移动它时（touchstart）和当手指在屏幕上开始移动时（touchmove）：

document.addEventListener("touchstart", touchHandler); document.addEventListener("touchmove", touchHandler);

touchHandler 函数的代码如下：

function touchHandler(e) { if (e.touches) { playerX = e.touches[0].pageX - canvas.offsetLeft - playerWidth / 2; playerY = e.touches[0].pageY - canvas.offsetTop - playerHeight / 2; output.textContent = `Touch:nx: ${playerX}, y: ${playerY}`; e.preventDefault(); } }

如果发生了触摸（touches 对象不是空的），那么我们就可以在该对象中获得所需的全部信息。我们可以获取第一次触摸（e.touches[0]，我们的示例不支持多点触控），提取 pageX 和 pageY 变量，并通过减去画布偏移（画布与屏幕边缘的距离）和玩家宽度和高度的一半来设置玩家在屏幕上的飞船位置。

要查看工作是否正常，我们可以使用 output 元素输出 x 和 y 位置。需要使用 preventDefault() 函数来防止浏览器移动，否则就会出现默认行为，画布会在页面上被拖动，从而显示浏览器滚动条，看起来乱糟糟的。

Phaser 中的触摸事件

我们不必自己做这件事；Phaser 等框架为我们提供了管理触摸事件的系统——请参阅管理触摸事件。

指针理论

指针 代表触摸屏上的一根手指。Phaser 默认启动两个指针，因此两个手指可以同时执行一个动作。Captain Rogers 是一款简单的游戏——只需用两根手指控制，左手指移动飞船，右手指控制飞船上的火炮。游戏中没有多点触控或手势，所有操作均由单个指针输入完成。

可以使用 this.game.input.addPointer 为游戏添加更多指针，最多可同时管理 10 个指针。最近使用的指针可在 this.game.input.activePointer 对象中找到，即屏幕上最近使用的手指。

如果需要访问特定指针，它们都可以在 this.game.input.pointer1、this.game.input.pointer2 等处使用。它们是动态分配的，所以如果你在屏幕上放了三个手指，pointer1、pointer2 和 pointer3 就会处于活动状态。例如，移除第二根手指不会影响其他两根手指，再次设置时将使用第一个可用属性，因此 pointer2 将再次被使用。

你可以通过 this.game.input.x 和 this.game.input.y 变量快速获取最近激活指针的坐标。

输入事件

不直接使用指针，也可以监听 this.game.input 事件，如 onDown、onUp、onTap 和 onHold：

this.game.input.onDown.add(itemTouched, this); function itemTouched(pointer) { // 做点什么 }

当触摸屏幕触发 onDown 事件时，itemTouched() 函数将被执行。pointer 变量将包含激活事件的指针信息。

这种方法使用的是一般可用的 this.game.input 对象，但也可以通过使用 onInputOver、onInputOut、onInputDown、onInputUp、onDragStart 或 onDragStop 来检测对任何游戏对象（如精灵或按钮）的操作：

this.button.events.onInputOver.add(itemTouched, this); function itemTouched(button, pointer) { // 做点什么 }

这样，就可以为游戏中的任何对象（如玩家的飞船）附加事件，并对用户执行的操作做出反应。

使用 Phaser 的另一个优势是，所创建的按钮可以接受任何类型的输入，无论是手机上的触摸还是桌面上的点击，框架都会在后台处理。

实现

要添加一个交互式对象来监听用户输入，最简单的方法就是创建一个按钮：

const buttonEnclave = this.add.button( 10, 10, "logo-enclave", this.clickEnclave, this, );

这个是在 MainMenu 状态下形成的——它将被放置在距离屏幕左上角 10 个像素的位置，使用 logo-enclave 图像，并在被触摸时执行 clickEnclave() 函数。这将在手机和台式机上运行。主菜单中有几个按钮，其中包括启动游戏的按钮。

在实际游戏中，与其创建更多的按钮并用它们覆盖狭小的手机屏幕，我们可以使用一些不同的方法：我们将创建隐形区域来响应给定的操作。从设计的角度来看，最好是让活动区域更大，而不要让按钮图像覆盖半个屏幕。例如，点击屏幕右侧将射击：

this.buttonShoot = this.add.button( this.world.width * 0.5, 0, "button-alpha", null, this, ); this.buttonShoot.onInputDown.add(this.goShootPressed, this); this.buttonShoot.onInputUp.add(this.goShootReleased, this);

上面的代码将使用覆盖屏幕右半部分的透明图像创建一个新按钮。如果想执行更复杂的操作，可以分别为 InputDown 和 InputUp 分配功能，在本游戏中，触摸屏幕右侧将向右发射子弹，这就是我们在本例中需要的全部功能。

玩家的移动可以通过创建四个方向键来实现，但我们可以利用触摸屏的优势，拖动玩家的飞船：

const player = this.game.add.sprite(30, 30, "ship"); player.inputEnabled = true; player.input.enableDrag(); player.events.onDragStart.add(onDragStart, this); player.events.onDragStop.add(onDragStop, this); function onDragStart(sprite, pointer) { // 拖动的时候完成一些事情 }

我们可以在拖动飞船的同时做一些事情，并在拖动停止时做出反应。如果启用了 Phaser 中的拖曳功能，它就会立即运行——不必手动设置精灵的位置，因此可以将 onDragStart() 函数留空，或放置一些调试输出来查看它是否正常工作。pointer 元素包含 x 和 y 变量，存储被拖动元素的当前位置。

专用插件

你还可以进一步使用专用插件，如 Virtual Joystick——这是一个付费的官方 Phaser 插件，但你也可以找到免费的开源替代品。Virtual Joystick 的初始化过程如下：

this.pad = this.game.plugins.add(Phaser.VirtualJoystick); this.stick = this.pad.addStick(30, 30, 80, "generic");

在 Game 状态的 create() 函数中，我们将创建一个虚拟垫和一个通用操纵杆，默认情况下有四个方向的虚拟按钮。它的位置距离屏幕顶部和左侧边缘各 30 像素，宽度为 80 像素。

在游戏过程中，可以在 update 函数中这样处理被按下的摇杆：

if (this.stick.isDown) { // 移动玩家 }

我们可以根据操纵杆的角度适当调整玩家的速度并移动他。

总结

这篇文章主要讲解如何在移动端实现触摸控制；下一篇文章我们将介绍怎样添加键盘和鼠标支持。