javascriptbox2dbox2dweb

Drawing collider boundaries (box2d-wasm). Error: Cannot construct a b2Draw, no constructor in IDL


I try to use the box2d-wasm package. I successfully run a program that prints a vector: https://plnkr.co/edit/6dTVT4HtFW4wf15H

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</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.3.6/dist/es-module-shims.js"></script>

    <script type="importmap">
        {
            "imports": {
                "gl-matrix": "https://cdn.skypack.dev/gl-matrix@3.4.3",
                "box2d": "https://8observer8.github.io/lib/box2d-wasm-2.4.1/box2d-wasm-2.4.1.min.js"
            }
        }
    </script>

    <script type="module">
        import Box2DLib from "box2d";
        let box2d;

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

        async function main() {
            await initBox2D();
            const vec = new box2d.b2Vec2(1, 2);
            console.log(`vec = ${vec.x}, ${vec.y}`);
        }

        main();
    </script>
</body>

</html>

I noticed that there is a b2Draw class:

console.log(box2d);

enter image description here

But how to use this constructor? I try to instantiate this class:

const debugDrawer = new box2d.b2Draw();

I have this error: cannot construct a b2Draw, no constructor in IDL.

I try to extend box2d.b2Draw like this:

        async function main() {
            await initBox2D();

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

            class DebugDrawer extends box2d.b2Draw {
            
            }

            const debugDrawer = new DebugDrawer();
        }

But I have the same error.


Solution

  • I found the solution in the official example: https://github.com/Birch-san/box2d-wasm/tree/master/demo/modern/public

    <!DOCTYPE html>
    
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Document</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.3.6/dist/es-module-shims.js"></script>
    
        <script type="importmap">
            {
                "imports": {
                    "gl-matrix": "https://cdn.skypack.dev/gl-matrix@3.4.3",
                    "box2d": "https://8observer8.github.io/lib/box2d-wasm-2.4.1/box2d-wasm-2.4.1.min.js"
                }
            }
        </script>
    
        <script type="module">
            import Box2DLib from "box2d";
            let box2d;
    
            function initBox2D() {
                return new Promise(resolve => {
                    Box2DLib().then((re) => {
                        box2d = re;
                        resolve();
                    });
                });
            }
    
            async function main() {
                await initBox2D();
    
                const {
                    b2Draw: { e_shapeBit },
                    b2Vec2,
                    JSDraw
                } = box2d;
    
                const vec = new b2Vec2(1, 2);
                console.log(`vec = ${vec.x}, ${vec.y}`);
    
                function makeDebugDrawer() {
                    const debugDrawer = Object.assign(new JSDraw(), {
                        DrawSegment(vert1_p, vert2_p, color_p) {},
                        DrawPolygon(vertices_p, vertexCount, color_p) {},
                        DrawSolidPolygon(vertices_p, vertexCount, color_p) {},
                        DrawCircle(center_p, radius, color_p) {},
                        DrawSolidCircle(center_p, radius, axis_p, color_p) {},
                        DrawTransform(transform_p) {},
                        DrawPoint(vertex_p, sizeMetres, color_p) {}
                    });
                    debugDrawer.SetFlags(e_shapeBit);
                    return debugDrawer;
                }
    
                const debudDrawer = makeDebugDrawer();
            }
    
            main();
        </script>
    </body>
    
    </html>