As a project developer, I want to be able to render the world to a canvas using a function

[ryangrahamnc]

The testbed is neat at all, but its only useful for proof of concepts. It also doesnt seem to be exposed anywhere. Which means anyone working on their own project will be unable to visualize their world unless they copypaste all their files into the testbed website.

What I'd prefer is a function to call that renders a world to canvas. (The original box2d.js has this, but that project is old and throws errors in modern environments. The dev also doesnt publish to npm despite having git updates)

I'd like something where I can run everything in a functional way in places that I control:

const initWorld = ()=>{ ... };
const tick = ()=>{
    handleInputs();
    world.step(time);
    renderWorld({ world, canvas });
};

I'm looking through the code, but it seems impossible to figure out how to get this working. I know the functionality is there given that the testbed works. But I dont understand why its not easily available.

I dont particularly care how the api looks. bounds, strokeColor, and strokeSize are good enough for me.
box2d.js has a class structure that probably works decently: https://github.com/kripken/box2d.js/#using-debug-draw

[Lusito]

Yes, I've thought about this too, back when I started this project. It wasn't easily possible then though. Can't remember the exact problems I faced. But I will take another look when I find some time.

[8Observer8]

These screenshots show how important it is to be able to draw colliders:

[Lusito]

I've just released @box2d/debug-draw, check the documentation here:
https://lusito.github.io/box2d.ts/docs/guide/debug-draw/

[8Observer8]

I installed 0.10.0:

But I have the error:

I do not have the debug-draw folder inside of @box2d:

[Lusito]

@8Observer8 It seems npm had some issue installing. Have you tried just running npm install again?

Edit: Nevermind, you installed version 0.10 of the core library, but you didn't install @box2d/debug-draw

Try running npm install @box2d/debug-draw

[Lusito]

Just FYI, anything with an @ in front is a scope (think of it like a company/project prefix). I.e. @box2d is not a package, but rather @box2d/core, @box2d/lights, @box2d/particles, @box2d/controllers and @box2d/debug-draw are all separate packages you need to install separately.

[8Observer8]

I thought it would be like in C++. But okay, it's better than nothing. Thank you.