物理

这是 Gamedev Phaser 教程 的 16 个步骤中的第 5 步。为了在我们的游戏中实现对象之间的正确碰撞检测,我们需要引入物理引擎;本文将向您介绍 Phaser 中可用的物理引擎,并演示一个典型的简单设置。

添加物理

Phaser 内置了三种不同的物理引擎——Arcade Physics、Impact Physics 和 Matter.js Physics——还有第四种选择 Box2D,它是一个商业插件。对于我们这样的简单游戏,可以使用 Arcade Physics 引擎。我们不需要任何复杂的几何计算——毕竟,这只是一颗在墙壁和砖块之间反弹的球。

首先,让我们在游戏中配置 Arcade Physics 引擎。将 physics 属性添加到 config 对象中,如下所示:

js
const config = {
  // ...
  physics: {
    default: "arcade",
  },
};

接下来,我们需要为我们的球启用物理系统——Phaser 对象物理默认情况下是禁用的。在 create() 方法的底部添加以下行:

js
this.physics.add.existing(this.ball);

接下来,如果我们想在屏幕上移动我们的球,我们可以设置其 body 上的 velocity。再次将以下行添加到 create() 的底部:

js
this.ball.body.setVelocity(150, 150);

移除我们之前的 update 指令

请记住从 update() 方法中移除我们之前添加值的 xy 的旧方法,即将其恢复为空状态:

js
class ExampleScene extends Phaser.Scene {
  // ...
  update() {}
}

现在我们已经通过物理引擎正确处理了这个问题。

再次尝试重新加载 index.html。目前,物理引擎没有重力或摩擦力,因此球将以恒定速度沿给定方向运动。

物理的乐趣

您可以通过物理引擎做更多的事情,例如,在 create() 中添加 this.ball.body.gravity.y = 500;,这将设置球的垂直重力。尝试将速度更改为 this.ball.body.setVelocity(150, -150);,您会看到球向上发射,但随后由于重力将其拉向下方而下落。

这类功能只是冰山一角——有各种函数和变量可以帮助您操纵物理对象。请查看官方 物理文档,并参阅使用 Arcade 和 Matter.js 物理系统的大量 示例集合

Compare your code

这是您到目前为止应该看到的效果,实时运行。要查看其源代码,请单击“播放”按钮。

后续步骤

现在我们可以进入下一课,看看如何让球 反弹墙壁