P2 physics Physics body overlap to another when dragged

[playh5]

Hi, I need help to resolve the overlapping of 2 physics object. So I have this ant that I want to drag then it must not overlap with the map(maze)

here's the example:

http://s3-ap-southeast-2.amazonaws.com/demos.wingaru.com.au/au.com.wingaru.honeyant_WK/index-dist.html#!/#%2F

Edit* as you can see the ant can overlap with the map. Try to use keyboard arrows and it will not. Only when the ant is dragged.

'use strict';

Game.GameArea = {
  player: null,
  maps: null,
  mouseBody:null,
  mouseConstraint: null,
  create: function () {
    this.game.physics.startSystem(Phaser.Physics.P2JS);

    var level1 = [
      ['layer6', 0, 0, 0],
      ['layer7', 393, 0, 0],
      ['layer8', 361, 239, 0],
      ['layer4', 0, 296, 0],
      ['layer3', 134, 242, 0],
      ['layer2', 296, 110, 0],
    ];

    var antCollisionGroup = this.game.physics.p2.createCollisionGroup();
    var mapCollisionGroup = this.game.physics.p2.createCollisionGroup();
    this.game.physics.p2.updateBoundsCollisionGroup();
    this.maps = [];
    for (var i = level1.length - 1; i >= 0; i--) {

      var xpos = level1[i][1];
      var ypos = level1[i][2]
      var map = this.game.add.sprite(xpos, ypos, level1[i][0]);
      this.game.physics.p2.enable(map);
      map.body.x += map.width / 2;
      map.body.y += map.height / 2;
      map.body.kinematic = true; //map is static
      map.body.clearShapes(); //Remove standard Bounding Box
      map.body.loadPolygon('collisions', level1[i][0]);
      this.maps.push(map);
    }
    //, , 
    /*Adding ant*/
    var antInfo = {
      xPos: 117,
      yPos: 163,
      rotation: 119.9998779296875
    }

    this.player = new ant(this.game, antInfo.xPos, antInfo.yPos, antInfo.rotation);

    for(var m = 0; m < this.maps.length; m++){
      var map = this.maps[m];
      //set collision group
      map.body.setCollisionGroup(mapCollisionGroup);
      //set collision
      map.body.collides([mapCollisionGroup, antCollisionGroup]);
    }
    this.player.ant.body.setCollisionGroup(antCollisionGroup);
    this.player.ant.body.collides([antCollisionGroup, mapCollisionGroup]);

    //ENABLE DRAG
    this.mouseBody = new p2.Body();
    this.game.physics.p2.world.addBody(this.mouseBody);
    this.game.input.onDown.add(this.click, this);
    this.game.input.onUp.add(this.release, this);
    this.game.input.addMoveCallback(this.move, this);
  },

  update: function () {
    this.player.update();
  },
  click: function (pointer) {
    var bodies = this.game.physics.p2.hitTest(pointer.position, [this.player.ant.body]);

    // p2 uses different coordinate system, so convert the pointer position to p2's coordinate system
    var physicsPos = [this.game.physics.p2.pxmi(pointer.position.x), this.game.physics.p2.pxmi(pointer.position.y)];

    if (bodies.length) {
      var clickedBody = bodies[0];

      var localPointInBody = [0, 0];
      // this function takes physicsPos and coverts it to the body's local coordinate system
      clickedBody.toLocalFrame(localPointInBody, physicsPos);

      // use a revoluteContraint to attach mouseBody to the clicked body
      this.mouseConstraint = this.game.physics.p2.createRevoluteConstraint(this.mouseBody, [0, 0], clickedBody, [this.game.physics.p2.mpxi(localPointInBody[0]), this.game.physics.p2.mpxi(localPointInBody[1])]);
    
    }
  },
  release: function () {
    this.game.physics.p2.removeConstraint(this.mouseConstraint);
  },
  move: function (pointer) {
    // p2 uses different coordinate system, so convert the pointer position to p2's coordinate system
    this.mouseBody.position[0] = this.game.physics.p2.pxmi(pointer.position.x);
    this.mouseBody.position[1] = this.game.physics.p2.pxmi(pointer.position.y);
  }
//game.physics.p2.world.solver.iterations
};

 

[samid737]

 

 

It looks like (not sure) you are adding velocity with the keyboard, but you are direcly manipulating position (bypassing physics) when using your mouse. Try setting velocity when using your mouse. You should be able to use the standard moveToPointer() function, which works for arcade physics and p2. But you pass the movement speed as a parameter using distanceBetween() the player and mousepointer. An example:

 

[playh5]

Works great. Thanks @samid737. Also I have found a solution that when the mouse pointer hits the map, will remove the mouse constraint.