Phaser: Physics
This post is part of a Phaser series. Click here to see the first post of the series.
Phaser provides 3 different kinds of built-in physics engines:
- Arcade
- Matter.js
- Impact (Impact.js compatible)
Arcade is the simplest one, and the one I’ll describe right now.
Enable it by adding a physics
property to the Phaser.Game
initialization config object:
const config = {
//...
physics: {
default: 'arcade',
arcade: {
debug: false
}
}
}
You can add physics to a single GameObject, like this:
const dog = this.physics.add.sprite(20, 20, 'dog')
or you can create a physics group.
Groups are handy, because we can setup common rules for all the items in a group.
We have 2 kinds of groups: static groups, and dynamic groups. A static group include static bodies, and a dynamic group includes dynamic bodies.
Static bodies are element that never move. Like the ground in a platform game:
//in preload()
this.load.image('ground', 'assets/platform.png')
//in create()
const platforms = this.physics.add.staticGroup()
const ground = this.add.sprite(200, 200, 'ground')
platforms.add(ground)
Note: you can download the asset from https://github.com/photonstorm/phaser3-examples/tree/master/public/assets
A dynamic group includes elements that can move, and have a velocity and speed:
const dogs = this.physics.add.group()
You can add items to a group using items.add()
.
const dogs = this.physics.add.group()
const dog = this.add.sprite(20, 20, 'dog')
dogs.add(dog)
Groups also provide a handy create()
method which we can use to create GameObjects automatically:
platforms.create(200, 200, 'ground')
//instead of
const ground = this.add.sprite(200, 200, 'ground')
platforms.add(ground)
Once you have a physics object set up, you can start working on collisions.
→ I wrote 17 books to help you become a better developer, download them all at $0 cost by joining my newsletter
→ JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025