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

Question

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

50 views Asked by 8Observer8 At 19 January 2023 at 23:30

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/[email protected]/dist/es-module-shims.js"></script>

    <script type="importmap">
        {
            "imports": {
                "gl-matrix": "https://cdn.skypack.dev/[email protected]",
                "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);

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.

Original Q&A

There are 1 answers

**8Observer8** · Accepted Answer · 2023-01-20 10:57:19

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/[email protected]/dist/es-module-shims.js"></script>

    <script type="importmap">
        {
            "imports": {
                "gl-matrix": "https://cdn.skypack.dev/[email protected]",
                "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>

TechQA.

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

There are 1 answers

Related Questions in JAVASCRIPT

Related Questions in BOX2D

Related Questions in BOX2DWEB

Popular Questions

Popular Tags

Trending Questions