Box2D bodies unexpected overlap

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});
});

0

Answers


Please signup or login to answer this question.

Signup for an account and start participating in our site today!




Social Signup

You can also login with your Facebook, Twitter or Linkedin account

Log in with Facebook