Collision handling in Phaser3 multiplayer server/client game

Question

I've a question about how to handle physics in Phaser3 multiplayer game.

I've a client where I'm loading my tilemap with layers.
I've a server where I'm handling all game physics.

I've the issue when I'm trying to work with collision because server's game.js script contains config where physics is:

const config = {
type: Phaser.HEADLESS,
parent: 'phaser-example',
width: 800,
height: 600,
autoFocus: false,
physics: {
    default: 'arcade',
    arcade: {
        debug: false,
        gravity: { y: 0 }
    }
},
scene: {
    preload: preload,
    create: create,
    update: update
}};
.........
function create() {

const self = this;
this.players = this.physics.add.group();

this.scores = {
    blue: 0,
    red: 0
};

this.star = this.physics.add.image(randomPosition(700), randomPosition(500), 'star');

this.physics.add.collider(this.players);.......

On the other hand, I've added tilemap on client side:

function preload() {
this.load.tilemapTiledJSON('map1', 'assets/maps/map1/level1.json');
this.load.image('background', 'assets/maps/map1/background.png');
this.load.image('tiles', 'assets/maps/map1/platformPack_tilesheet.png');

this.load.image('ship', 'assets/spaceShips_001.png');
this.load.image('otherPlayer', 'assets/enemyBlack5.png');
this.load.image('star', 'assets/star_gold.png');
}

function create() {

const backgroundImage = this.add.image(0, 0,'background').setOrigin(0, 0);
backgroundImage.setScale(2, 0.8);

const map = this.make.tilemap({key:'map1'});

const tileset = map.addTilesetImage('platformPack_tilesheet', 'tiles');

const platforms = map.createStaticLayer('Platforms', tileset, 0, 200);
map.setCollisionByExclusion(-1, true);............

The issue is that I don't know how to use

physics.add.collider(this.players, this.platforms);

to handle collision, because I don't have physics on client side. I will be grateful for any help with the code, or articles about physics in phaser multiplayer games or any idea how to implement it.

Thank you.

j4n7 j4n7 · Accepted Answer · 2021-11-01T11:35:43

Physics are handled serverside. You also need to load the Tiled files on the server and make the physics logic over there. This can give you a hint:

import path from 'path'

import { dirname } from 'path'
import { fileURLToPath } from 'url'
const __filename = fileURLToPath(import.meta.url)
const __dirname = dirname(__filename)

preload() {
   this.load.image('tiles', path.join(__dirname, '../../dist/assets/img/tilesets/tilesheet.png'))
   this.load.tilemapTiledJSON('map1', path.join(__dirname, '../../dist/assets/maps/map1.json'))
}

After that, handle the physics like you normally would. Try to find a game called too-many-cooks in github for an example.

Collision handling in Phaser3 multiplayer server/client game

1 Answers