Basic Examples of Using box2d/core with Canvas API and JavaScript

[8Observer8]

Table of contents:

• How to set up @box2d/core for JavaScript using importmap
• Debug drawer of box2d/core colliders
• Click detection using QueryAABB
• Drag objects with mouse

[8Observer8]

Debug drawer of box2d/core colliders

This example uses the b2Draw class to draw colliders.

Playground: https://plnkr.co/edit/4QdnwIgKEtOiUHC0?preview

GitHub: https://github.com/8Observer8/debug-drawer-box2dcore-canvas2d-js

[8Observer8]

Click detection using QueryAABB

This example uses QueryAABB to detect a mouse click:

function getBodyCallback(fixture) {
    const userData = fixture.GetUserData();
    if (userData) {
        console.log(userData.name);
    }
}

canvas.onmousedown = (e) => {
    const mouseX = (e.clientX - canvas.offsetLeft) / pixelsPerMeter;
    const mouseY = (e.clientY - canvas.offsetTop) / pixelsPerMeter;

    const aabb = new b2AABB();
    aabb.lowerBound.Set(mouseX - 0.001, mouseY - 0.001);
    aabb.upperBound.Set(mouseX + 0.001, mouseY + 0.001);
    world.QueryAABB(aabb, getBodyCallback);
}

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

GitHub: https://github.com/8Observer8/click-detection-using-queryaabb-box2dcore-canvas2d-js

[8Observer8]

Drag objects with mouse

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

GitHub: https://github.com/8Observer8/drag-with-mouse-box2dcore-canvas2d-js