Member Avatar for McLaren

I found great tool to make shapes. But the example how to load the shape for javascript. He wrote

Note: the following code snippets are extracted from the loader-libgdx-demo project. They are written in Java, and target the LibGDX game framework. However, they should be easy to understand, and easy to port to any other language.

But I cannot find it easy at all :)

private void createBottle() {
    // 0. Create a loader for the file saved from the editor.
    BodyEditorLoader loader = new BodyEditorLoader(Gdx.files.internal("data/test.json"));

    // 1. Create a BodyDef, as usual.
    BodyDef bd = new BodyDef();
    bd.position.set(0, 0);
    bd.type = BodyType.DynamicBody;

    // 2. Create a FixtureDef, as usual.
    FixtureDef fd = new FixtureDef();
    fd.density = 1;
    fd.friction = 0.5f;
    fd.restitution = 0.3f;

    // 3. Create a Body, as usual.
    bottleModel = world.createBody(bd);

    // 4. Create the body fixture automatically by using the loader.
    loader.attachFixture(bottleModel, "test01", fd, BOTTLE_WIDTH);
}

So what to do with this line:

BodyEditorLoader loader = new BodyEditorLoader(Gdx.files.internal("data/test.json"));

BodyEditorLoader should be in jar file. But javascript cannot use this. Or I have to open jar file itselt and recode in javascritp?

Or maybe there exists something like this for javascritpt?

Edited by McLaren
  • 2 Contributors
  • 4 Replies
  • 230 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by McLaren

Dani AI

Generated

Short practical summary (for and ): the example line with BodyEditorLoader is a libGDX/Java helper — the editor’s JSON is the portable part. A common approach is to re-implement the loader behaviour in JavaScript: load the JSON, pick the rigid body by name, scale and offset the vertex coordinates using the body’s origin and the same “width/scale” the Java loader expects, then create polygon/circle fixtures in the chosen JS Box2D port. The original loader’s comments explain the normalization + scale workflow that must be replicated. (github.com)

Three practical options used in the wild:

  • Port the loader’s attach/scale logic to JS and drive Box2D-web / box2d.js or a modern equivalent.
  • Use a JS-native Box2D-like engine (Planck.js is a good, actively maintained choice) and create fixtures there from the JSON.
  • Skip this editor and use an editor that ships JS-friendly exporters/loaders (R.U.B.E. and other editors provide JS loaders). Community forks of the original editor can also help if the Java tool is preferred. (github.com)

Minimal implementation checklist + a tiny Planck.js illustration (assumes normalized polygons and a chosen scale):

  • fetch the JSON and find the named rigid body.
  • read origin and polygons (or circles), subtract origin, multiply by the same scale the Java loader would use (width in meters).
  • create fixtures from each polygon; if a polygon has more than Box2D’s allowed convex vertices or is concave, decompose into convex pieces first. Watch pixel-to-meter conversion and the engine’s Y-axis direction.
    Example (conceptual):
    fetch('data/test.json').then(r=>r.json()).then(data=>{
const model = data.rigidBodies.find(b=>b.name==='test01');
const scale = 3.0; // loader-scale in meters
const origin = model.origin || {x:0,y:0};
const body = world.createBody({type:'dynamic', position: planck.Vec2(0,0)});
model.polygons.forEach(poly=>{
  const verts = poly.map(p=>planck.Vec2((p.x-origin.x)*scale, (p.y-origin.y)*scale));
  body.createFixture(planck.Polygon(verts), {density:1,friction:0.5,restitution:0.3});
});
});

    Key constraint: Box2D polygon fixtures must be convex and are typically limited to 8 vertices — decompose larger or concave polygons into convex parts before creating fixtures. (box2d.org)

Short troubleshooting notes: if exported circles look offset, check whether the JSON circle center fields match the loader’s expectations (some forks add extra parameters). If the editor UI (Flash) was laggy, a Java-based jar or a modern in-browser editor can be faster depending on the machine. (github.com)

Recommended Answers

All 4 Replies

Member Avatar for McLaren

Found for flash:
http://www.brainblitz.org/BoxCAD/

and there are more links:

Since its for flahs, and javasctipt box2d is very similar to flash it should be good. I will try next time, its late now :)

Member Avatar for AleMonteiro

SPeed, it's seems to me that this is Java and not JavaScript.

Member Avatar for McLaren

Forgot to post a url of which I was talking about

SPeed, it's seems to me that this is Java and not JavaScript.

Yeah, but it generates JSON file, so it should be posible to get this json into javascript.

But anyway I will try another first which is for flash.

Member Avatar for McLaren

this flahs tool sucks - uses full CPU when moving mouse pointer. And exporting I think is only usfull that you can copy the coordinates. But I did not experiment much, because of annoing lag. The JAVA tool was much better for drawing those shapes.
Isn't there decent to to draw the shapes for javascript? Or convert from that JAVA json whihc it generates?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.