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

8Observer8 · 2024-04-05T09:18:00Z

8Observer8
Apr 5, 2024

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 -->
    <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://cdn.jsdelivr.net/npm/box2d-wasm@7.0.0/dist/es/entry.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.

8Observer8 · 2024-04-05T10:12:27Z

8Observer8
Apr 5, 2024
Author

My simple examples with Box2D-WASM:

pure WebGL 1.0: Basic Examples of Using Box2D-WASM with pure WebGL 1.0 in JavaScript #63
Phaser 3: Basic Examples of Using Box2D-WASM with Phaser 3 in JavaScript #68
Pixi.js 7: Basic Examples of Using Box2D-WASM with Pixi.js in JavaScript #69
Melon.js: Basic Examples of Using Box2D-WASM with Melon.js in JavaScript #67
Three.js: Basic Examples of Using Box2D-WASM with Three.js in JavaScript #70

0 replies

8Observer8 · 2024-04-06T12:16:02Z

8Observer8
Apr 6, 2024
Author

I added this step:

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.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 2 comments

{{title}}

{{title}}

Select a reply

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

8Observer8 Apr 5, 2024

Replies: 2 comments

8Observer8 Apr 5, 2024 Author

8Observer8 Apr 6, 2024 Author

8Observer8
Apr 5, 2024

8Observer8
Apr 5, 2024
Author

8Observer8
Apr 6, 2024
Author