I have replaced Arcade Physics with @box2d/core in the examples of the "Making your first Phaser 3 game" tutorial

Showcase
1

I have replaced Arcade Physics with box2d/core in the examples of the Making your first Phaser 3 game tutorial:

GitHub repository with Rollup guide

Playground:

image

2

My current record is 490:

image

3

My dream is to make multiplayer games with server-side physics. I want to port the Part 10. Bouncing Bombs example to multiplayer. But the @box2d/core physics engine has this issue when you run it on the server side. It can be solved like this:

You should create a new file:

fix-performance.js

import { performance } from "perf_hooks";
global.performance = performance;

and import it:

app.js

import "./fix-performance.js";
import { b2World } from "@box2d/core";

const world = b2World.Create({ x: 0, y: 10 });
const gravity = world.GetGravity();
console.log(`gravity = (${gravity.x}, ${gravity.y})`);
// Output: gravity = (0, 10)

@box2d/core can be installed using NPM with the following command: npm i @box2d/core

app.js

import express from 'express';
import http from 'http';
import path from 'path';
import './fix-performance.js';
import { b2World } from '@box2d/core';

const world = b2World.Create({ x: 0, y: 10 });

const app = express();
app.use(express.static(path.join(process.cwd(), 'public')));

const httpServer = http.createServer(app);
const port = process.env.PORT || 3000;
httpServer.listen(port, () => {
    console.log(`Listening at port: ${port}`);
    const gravity = world.GetGravity();
    console.log(`gravity = (${gravity.x}, ${gravity.y})`);
});

Do not forget to add "type": "module" to the package.json:

{
  "name": "box2dcore-on-the-server-side-js",
  "version": "1.0.0",
  "description": "",
  "type": "module",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node src/server/app.js",
    "dev": "rollup -cwm",
    "del-index-map": "del /f /q /s .\\public\\js\\index.js.map",
    "bundle": "rollup -cm",
    "minify": "uglifyjs public/js/index.js -o public/js/index.js",
    "release": "npm run bundle && npm run minify && npm run del-index-map"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@box2d/core": "^0.10.0",
    "express": "^4.18.2",
    "ws": "^8.12.0"
  }
}
4

box2d/core has a huge disadvantage. The fact is that it is very hard to write a game with physics without drawing colliders. You will not be able to debug the correct placement of colliders and their sizes. box2d/core, like Box2D-WASM, have a b2Draw class for drawing colliders in debug mode, but box2d/core uses save()/restore() to rotate and position colliders, while Box2D-WASM provides collider vertex positions directly. Therefore, Box2D-WASM allows you to transfer the coordinates of collider vertices from the server to the client via websockets.

Demo on Glitch + source code: Box2D-WASM physics on the server side with Phaser 3 and JavaScript

box2dwasm-physics-on-the-server-side-with-phaser3-js

The server sends the positions of the collider vertices that Phaser draws:

image