Physics

Adding physics

Phaser is bundled with three different physics engines—Arcade Physics, Impact Physics, and Matter.js Physics—with the fourth option, Box2D, available as a commercial plugin. For simple games like ours, we can use the Arcade Physics engine. We don't need any heavy geometry calculations—after all, it's just a ball bouncing off walls and bricks.

First, let's configure the Arcade Physics engine in our game. Add the physics property to the config object, as shown below:

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

Next, we need to enable our ball for the physics system—Phaser object physics is not enabled by default. Add the following line at the bottom of the create() method:

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

Next, if we want to move our ball on the screen, we can set velocity on its body. Add the following line, again at the bottom of create():

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

Removing our previous update instructions

Remember to remove our old method of adding values to x and y from the update() method, i.e., restore it to the empty state:

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

We are now handling this properly, with a physics engine.

Try reloading index.html again. At the moment, the physics engine has no gravity or friction, so the ball will go in the given direction at a constant speed.

Fun with physics

You can do much more with physics, for example by adding this.ball.body.gravity.y = 500; inside create(), you will set the vertical gravity of the ball. Try changing the velocity to this.ball.body.setVelocity(150, -150);, and you will see the ball launched upwards, but then fall due to the effects of gravity pulling it down.

This kind of functionality is just the tip of the iceberg—there are various functions and variables that can help you manipulate the physics objects. Check out the official physics documentation and see the huge collection of examples using the Arcade and Matter.js physics systems.

Compare your code

Here's what you should have so far, running live. To view its source code, click the "Play" button.

<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/3.90.0/phaser.js"></script>

* {
  padding: 0;
  margin: 0;
}

class ExampleScene extends Phaser.Scene {
  ball;

  preload() {
    this.load.setBaseURL(
      "https://mdn.github.io/shared-assets/images/examples/2D_breakout_game_Phaser",
    );

    this.load.image("ball", "ball.png");
  }
  create() {
    this.ball = this.add.sprite(50, 50, "ball");
    this.physics.add.existing(this.ball);
    this.ball.body.setVelocity(150, 150);
  }
  update() {}
}

const config = {
  type: Phaser.CANVAS,
  width: 480,
  height: 320,
  scene: ExampleScene,
  scale: {
    mode: Phaser.Scale.FIT,
    autoCenter: Phaser.Scale.CENTER_BOTH,
  },
  backgroundColor: "#eeeeee",
  physics: {
    default: "arcade",
  },
};

const game = new Phaser.Game(config);

Next steps

Now we can move to the next lesson and see how to make the ball bounce off the walls.

• Previous
• Next