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

**URL:** <https://phaser.discourse.group/t/i-have-replaced-arcade-physics-with-box2d-core-in-the-examples-of-the-making-your-first-phaser-3-game-tutorial/14272>\
**Category:** Showcase\
**Created:** [April 27, 2024, 3:28pm UTC](https://phaser.discourse.group/t/i-have-replaced-arcade-physics-with-box2d-core-in-the-examples-of-the-making-your-first-phaser-3-game-tutorial/14272 "2024-04-27T15:28:52Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![8Observer8](https://avatars.discourse-cdn.com/v4/letter/8/bbe5ce/32.png) [@8Observer8](https://phaser.discourse.group/u/8Observer8)\
**Post date:** [April 27, 2024, 3:28pm UTC](https://phaser.discourse.group/t/i-have-replaced-arcade-physics-with-box2d-core-in-the-examples-of-the-making-your-first-phaser-3-game-tutorial/14272/1 "2024-04-27T15:28:52Z")

</div>

I have replaced Arcade Physics with [box2d/core](https://lusito.github.io/box2d.ts/) in the examples of the [Making your first Phaser 3 game](https://phaser.io/tutorials/making-your-first-phaser-3-game) tutorial:

[GitHub repository with Rollup guide](https://github.com/8Observer8/port-to-box2dcore-of-making-your-first-game-rollup-phaser3-js)

Playground:

- [Part 01: Introduction](https://plnkr.co/edit/YaAaamdKkjXGfNZw?preview)
- [Part 02. Loading assets](https://plnkr.co/edit/24VDdeuBKyzOZccr?preview)
- [Part 03. World Building](https://plnkr.co/edit/Qv1LTe3Pa5xAEgAG?preview)
- [Part 04. The Platforms (explanation)](https://plnkr.co/edit/tjKCiQjVWxWdWKss?preview)
- [Part 05. Ready Player One](https://plnkr.co/edit/YDd8P7u225nsjsRR?preview)
- [Part 06. Body velocity](https://plnkr.co/edit/pWG2rAffFQGt7uVy?preview)
- [Part 07. Controlling the player with the keyboard](https://plnkr.co/edit/SrMlC1Q7q2dmo6wZ?preview)
- [Part 08. Stardust](https://plnkr.co/edit/FkkU8JU8qEsByZPO?preview)
- [Part 09. A score to settle](https://plnkr.co/edit/WaQjQwQNvvl7Eihu?preview)
- [Part 10. Bouncing Bombs](https://plnkr.co/edit/cQRkyfh5RoMr7OVW?preview)

![image](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/b/bd2727557f80ac4cdb8208eb4bfe172aaa010a7b.png)

---

<div class="post-metadata">

**Author:** ![8Observer8](https://avatars.discourse-cdn.com/v4/letter/8/bbe5ce/32.png) [@8Observer8](https://phaser.discourse.group/u/8Observer8)\
**Post date:** [April 28, 2024, 1:42pm UTC](https://phaser.discourse.group/t/i-have-replaced-arcade-physics-with-box2d-core-in-the-examples-of-the-making-your-first-phaser-3-game-tutorial/14272/2 "2024-04-28T13:42:29Z")

</div>

My current record is 490:

![image](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/6/69b8df7e3478e990e971fa1686fc3cce5a8ad682.png)

---

<div class="post-metadata">

**Author:** ![8Observer8](https://avatars.discourse-cdn.com/v4/letter/8/bbe5ce/32.png) [@8Observer8](https://phaser.discourse.group/u/8Observer8)\
**Post date:** [April 28, 2024, 2:03pm UTC](https://phaser.discourse.group/t/i-have-replaced-arcade-physics-with-box2d-core-in-the-examples-of-the-making-your-first-phaser-3-game-tutorial/14272/3 "2024-04-28T14:03:34Z")

</div>

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](https://lusito.github.io/box2d.ts/) physics engine has [this issue](https://github.com/Lusito/box2d.ts/issues/39) when you run it on the server side. It can be solved like this:

You should create a new file:

fix-performance.js

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

```

and import it:

app.js

```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

```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`:

```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"
  }
}

```

---

<div class="post-metadata">

**Author:** ![8Observer8](https://avatars.discourse-cdn.com/v4/letter/8/bbe5ce/32.png) [@8Observer8](https://phaser.discourse.group/u/8Observer8)\
**Post date:** [May 9, 2024, 9:53pm UTC](https://phaser.discourse.group/t/i-have-replaced-arcade-physics-with-box2d-core-in-the-examples-of-the-making-your-first-phaser-3-game-tutorial/14272/4 "2024-05-09T21:53:52Z")

</div>

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](https://glitch.com/~box2dwasm-physics-on-the-server-side-with-phaser3-js)

![box2dwasm-physics-on-the-server-side-with-phaser3-js](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/7/731a3d01be585dfca23690e7bc83026e145cfeaf.gif)

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

![image](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/d/d40a0c40030b5366d5e07ba0ca529c3dba8e0730.png)