Box2D bodies unexpected overlap

0 Votes
    999 Views

I’ve recently discovered PlanckJS, a 2D JavaScript physics engine, and I wanted to control the position of an object and make it interact with other physical bodies. Push them basically.

In fact, to navigate this object (let’s name it ‘player’) I just have a JSON with the x and y coordinates where this body have to be drawn.

So, I implemented a code that works in some cases, but in most of the cases the ‘player’ overlaps the other bodies. You can observe it in the image shown below.

enter image description here

var player = null;
planck.testbed('Collition', function(testbed) {
    var pl = planck, Vec2 = pl.Vec2, Math = pl.Math;
    var width = 16.00, height = 8.00;
    var BALL_R = 0.25;
    testbed.x = 0, testbed.y = 0;
    testbed.width = width * 1.2, testbed.height = height * 1.2;
    testbed.ratio = 100;
    var world = pl.World({});
    for(var i=0; i<6; i++){
        var bot=world.createDynamicBody({linearDamping:0.1,angularDamping:0.2});
        bot.setBullet(true);
        var pos_y = (i%2)? BALL_R : 2*BALL_R;
        bot.setPosition({x: (i*2), y: pos_y});
        bot.createFixture(pl.Circle(BALL_R), {friction: 0.1,restitution: 0.99,mass:1,userData:'bot'});
    }
   player = world.createDynamicBody({mass:0});
   player.setPosition({x: -width / 4, y: 0});
   player.createFixture(pl.Circle(BALL_R), {});

   world.on('post-solve', function(contact) {
        console.log('post-solve');
        var fA = contact.getFixtureA(), bA = fA.getBody();
        var fB = contact.getFixtureB(), bB = fB.getBody();
        var bot = fA.getUserData() == botFixDef.userData && bA || fB.getUserData() == botFixDef.userData && bB;
   });
   return world;
});
var stepsData=[{x:0,y:0},{x:0,y:0}];
client.on('objects-update', function(objects){
    stepsData.push({x: objects[0].x*2, y: objects[0].y})
    var transformX=objects[0].x*2 - stepsData[stepsData.length-2].x;
    var transformY=objects[0].y - stepsData[stepsData.length-2].y;

    console.log({x: objects[0].x*2, y: objects[0].y});
    player.setTransform(Vec2(transformX,transformY),1);
    player.setPosition({x: objects[0].x*2, y: objects[0].y});
});

Please signup or login to answer this question.