How to set up Box2D-WASM with importmap and Rollup for JavaScript

posted in My Instructions for beginners

Published April 05, 2024

Javascript Box2D physics2d

Playground: https://plnkr.co/edit/BGNYcIJRiJXpd9N4?preview

GitHub: https://github.com/8Observer8/how-to-set-up-box2dwasm-with-importmap-rollup-js

glMatrix is just a bonus:

index.html

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>How to set up Box2D-WASM with importmap and Rollup for JavaScript</title>
</head>

<body>

    <!-- Since import maps are not yet supported by all browsers, it is
        necessary to add the polyfill es-module-shims.js
        Source: https://threejs.org/docs/index.html#manual/en/introduction/Installation
    -->
    <script async src="https://unpkg.com/es-module-shims@1.9.0/dist/es-module-shims.js"></script>

    <script type="importmap">
        {
            "imports": {
                "box2d-wasm": "https://unpkg.com/box2d-wasm@7.0.0/dist/es/Box2D.js",
                "gl-matrix": "https://cdn.jsdelivr.net/npm/gl-matrix@3.4.3/+esm"
            }
        }
    </script>

    <script type="module" src="./js/index.js"></script>
</body>

</html>

init-box2d.js

import Box2DLib from "box2d-wasm";

export let box2d = null;

export function initBox2D() {
    return new Promise(resolve => {
        Box2DLib().then((re) => {
            box2d = re;
            resolve();
        });
    });
}

index.js

import { box2d, initBox2D } from "./init-box2d.js";
import { mat4, glMatrix } from "gl-matrix";

async function init() {
    await initBox2D();

    const {
        b2Vec2
    } = box2d;

    const vec = new b2Vec2(1, 2);
    console.log(`vec = (x: ${vec.x}, y: ${vec.y})`);

    const mat = mat4.create();
    console.log(mat);

    console.log(glMatrix.toRadian(45));
}

init();

Instructions for building and running the project in debug and release:

- Download and unzip this example: https://github.com/8Observer8/how-to-set-up-box2dwasm-with-importmap-rollup-js

- Go to the example folder in the console: `cd how-to-set-up-box2dwasm-with-importmap-rollup-js`

- Install these packages globally with the command:

> npm i -g http-server rollup uglify-js

- Add the Rollup bin folder to the Path. Type this command to know where npm was installed `npm config get prefix`. This command will show you the npm location. You will find the "node_modules" folder there. Go to the "rollup/bin" folder and copy this path, for example for me: `C:\Users\8Observer8\AppData\Roaming\npm\node_modules\rollup\dist\bin`. Add this folder to the path variable.

- Run http-server in the project directory:

> http-server -c-1

Note. The `-c-1` key allows you to disable caching.

- Start development mode with the following command:

> npm run dev

Note. Rollup will automatically keep track of saving changes to files and build a new index.js file ready for debugging. You can debug your project step by step in the browser by setting breakpoints.

- Go to the browser and type the address: localhost:8080/index.html

- Create a compressed file ready for publishing. Stop development mode, for example, with this command Ctrl + C in CMD, if it was launched before and enter the command:

> npm run release

Note. After this command, Rollup will create a compressed index.js file. Compression is done using the uglify-js package.

Previous Entry A few basic changes in PyQt6 and PySide6 regarding shader-based OpenGL graphics

Next Entry I have replaced Arcade Physics with Box2D-WASM in the “Making your first Phaser 3 game" tutorial

0 likes 4 comments