How to use @box2d/debug-draw #50

8Observer8 · 2024-06-10T19:11:39Z

8Observer8
Jun 10, 2024

Hello,

I add a rectangle collider to the world but it is very small. I have pixelPerMeter = 30 but @box2d/debug-draw@0.10.0 doesn't have pixelPerMeter, for example:

    DrawSolidPolygon(vertices, vertexCount, color) {
        this.ctx.beginPath();
        this.ctx.moveTo(vertices[0].x, vertices[0].y);
        for (let i = 1; i < vertexCount; i++) {
            this.ctx.lineTo(vertices[i].x, vertices[i].y);
        }
        this.ctx.closePath();
        this.ctx.fillStyle = DebugDraw.MakeStyleString(color, 0.5);
        this.ctx.fill();
        this.ctx.strokeStyle = DebugDraw.MakeStyleString(color, 1);
        this.ctx.stroke();
    }

Playground: https://plnkr.co/edit/gjwwZNskLkwL0LpY

<!DOCTYPE html>
 
<html>
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Set up @box2d/debug-draw as ES6-module in JavaScript</title>
</head>
 
<body>
    <canvas id="debug-canvas" width="350" height="350" style="border: 1px solid rgb(159, 133, 230);"></canvas>

    <script type="importmap">
        {
            "imports": {
                "@box2d/core": "https://cdn.jsdelivr.net/npm/@box2d/core@0.10.0/+esm",
                "@box2d/debug-draw": "https://cdn.jsdelivr.net/npm/@box2d/debug-draw@0.10.0/+esm"
            }
        }
    </script>
 
    <script type="module">
        import { b2BodyType, b2PolygonShape, b2World } from "@box2d/core";
        import { DrawShapes } from "@box2d/core";
        import { DebugDraw } from "@box2d/debug-draw";

        const world = b2World.Create({ x: 0, y: 10 });
        const pixelsPerMeter = 30;
        
        // Ground
        const groundShape = new b2PolygonShape();
        groundShape.SetAsBox(130 / pixelsPerMeter, 20 / pixelsPerMeter);
        const groundBody = world.CreateBody({
            type: b2BodyType.b2_staticBody,
            position: { x: 150 / pixelsPerMeter, y: 270 / pixelsPerMeter }
        });
        groundBody.CreateFixture({ shape: groundShape });

        const debugDraw = initDebugDraw();
        debugDraw.Prepare(0, 0, 10, false);
        DrawShapes(debugDraw, world);
        debugDraw.Finish();

        function initDebugDraw() {
            const canvas = document.querySelector("#debug-canvas");
            if (!canvas) throw new Error("Could not find debug canvas!");

            const ctx = canvas.getContext("2d");
            if (!ctx) throw new Error("Could not create 2d context for debug-draw");
            return new DebugDraw(ctx);
        }
    </script>
</body>
 
</html>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to use @box2d/debug-draw #50

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 0 comments

Select a reply

How to use @box2d/debug-draw #50

8Observer8 Jun 10, 2024

Replies: 0 comments

8Observer8
Jun 10, 2024