p2 draggability / mouse joints

[jason]

here's a question that is driving me nuts.  in phaser, it has a nice draggable option, for making sprites draggable by the mouse. however, if i enable the p2 physics engine on a sprite, then draggability no longer works.  i dont know why.  

 

also, on the p2 page (independent of phaser), it has automatic draggability on all their really great demos.  

 

http://schteppe.github.io/p2.js/demos/ragdoll.html

 

not only that, but it is actually better than just normal dragging.  it ties in with the physics, because you can actually 'throw' objects with the mouse.  in the source code on these examples, i can't see any reference to code that enables this.  and i can't make it work at all within phaser.

 

of note, i was able to do this with box2dweb via a 'mousejoint.'

[JP91]

you can use can use revolute constraints https://googledrive.com/host/0B2Br6oKX-RFNYkJ0YlVtTWJ1UGM/index.html

[schteppe]

Made a fiddle for ya, using Canvas and p2.js 0.5.0. http://jsfiddle.net/WZNfe/1/

 

(The original example is from here: https://github.com/schteppe/p2.js/blob/master/examples/canvas/mouseJoint.html)

 

It shows you how to set up a body for the mouse, check if the cursor is inside a body, and create a revolute constraint. I hope it's enough for you to get started

 

Stefan

[jason]

hey thanks for the responses.  i'm working through it but still having some problems.  stefan, your example is written in p2, and it is not completely clear to me how to translate it to phaser.  i'd be happy to learn p2 independently to ease this process, but i am not finding much independent p2 instructions, though the demos are quite cool.  i would love to see an actual phaser example of a this effect working on a p2 sprite.

 

thanks!

jason

[valueerror]

bitte sehr..  here you are!

 

create:  two bodies .. the (later) invisible mouse body that sticks to the active pointer and im my case.. the cow

cow= game.add.sprite(150, 150, 'cow',6);game.physics.p2.enable(cow,true);cow.body.setCircle(60);mouseBody = game.add.sprite(0, 0, '', 0);game.physics.p2.enable(mouseBody,true);mouseBody.body.setCircle(20);mouseCG = game.physics.p2.createCollisionGroup(); // just creating a group so the mousebody and the cow stop collidingmouseBody.body.setCollisionGroup(mouseCG);

update:   ( i decided to go with springs - more fun ^^)

mouseBody.body.x = game.input.x;mouseBody.body.y = game.input.y;if (game.input.activePointer.isDown){            if (checkHit() && constraintcount == 0){             //   mouseConstraint = game.physics.p2.createRevoluteConstraint(cow.body, [0,0],mouseBody, [0,0], 10000) ;                mouseConstraint = game.physics.p2.createSpring(cow.body, mouseBody, 11,20,1); //bodyA, bodyB, restLength, stiffness, damping, restLength, stiffness, damping, worldA, worldB, localA, localB                constraintcount = 1;            }        }        else{           if (constraintcount == 1){               springs = game.physics.p2.getSprings();               game.physics.p2.removeSpring(springs);               // game.physics.p2.removeConstraint(mouseConstraint);            }            constraintcount = 0;        }

somwhereelse:  ( this function may be rewritten .. depends on your case.. i have only two objects so i do not need to cycle through the whole array.. i just check i clicked on the cow)

function checkHit(){    if (game.physics.p2.hitTest({x: game.input.x, y: game.input.y}).length != 0){        var hitObjects = game.physics.p2.hitTest({x: game.input.x, y: game.input.y});        if ((hitObjects.length == 1 && hitObjects[0].parent.sprite.key =="cow") || (hitObjects.length == 2 && hitObjects[1].parent.sprite.key =="cow")){return true;}        else {return false; }    }}

[tidelake]

On 8/7/2014 at 9:02 AM, valueerror said:

bitte sehr..  here you are!

 

create:  two bodies .. the (later) invisible mouse body that sticks to the active pointer and im my case.. the cow

Hello, thank you for the code snippet, which helped me develop a working solution for my pinball flipper.  I'm including the code here in case others are looking for help.  I'm including valueerrors update() function first, because I had to revise it in order to release the constraint when the mouse/input isn't pressed/dragged...

function update() {
  input_body.body.x = game.input.x;
  input_body.body.y = game.input.y;

  if (game.input.activePointer.isDown) {
    if (constraint_count == 0) {
      input_constraint = game.physics.p2.createRevoluteConstraint(
        flipper.body, [0,0], input_body, [0,0], 1000
      );
      // mouseConstraint = game.physics.p2.createSpring(flipper.body, input_body, 11, 20, 1);
      constraint_count = 1;
    } else if (constraint_count == 1) {
      // springs = game.physics.p2.getSprings();
      // game.physics.p2.removeSpring(springs);
      game.physics.p2.removeConstraint(input_constraint);
      constraint_count = 0;
    }
  } else {
    if (constraint_count == 1) {
      game.physics.p2.removeConstraint(input_constraint);
    }
    constraint_count = 0;
  }
}

Here is more related code for other beginners like me, in case they need more help...  At this point I have a flipper with a revoluteConstraint, which can collide with either of two pinballs :-)

var game = new Phaser.Game(800, 300, Phaser.CANVAS, '',
      { preload: preload, create: create, update: update, render: render });

function preload() {
  game.load.image('flipper', 'assets/sprites/flipper.png');
  game.load.image('ball', 'assets/sprites/ball-transparent.png');

  //	Load our physics data exported from PhysicsEditor
  game.load.physics('physics_data', 'assets/physics/sprites.json');
}

var flipper, flipper_joint, flipper_constraint;
var cursors, input_body;
var constraint, input_constraint;
var constraint_count = 0;
var ball1, ball2;

function create() {
  game.stage.backgroundColor = "#f2f2f2";
  game.physics.startSystem(Phaser.Physics.P2JS);

  // Turn on impact events for the world,
  // without this we get no collision callbacks
  game.physics.p2.setImpactEvents(true);
  game.physics.p2.gravity.y = 0;

  cursors = game.input.keyboard.createCursorKeys();
  ball1 = game.add.sprite(500, 100,'ball');
  ball2 = game.add.sprite(600, 200,'ball');
  
  game.physics.p2.enable([ball1, ball2], false);
  ball1.body.setCircle(25);
  ball2.body.setCircle(25);

  // create joint for flipper
  flipper_joint = game.add.sprite(200, 150, '');
  game.physics.p2.enable(flipper_joint, true);
  flipper_joint.body.setCircle(25);

  flipper = game.add.sprite(200, 150, 'flipper');
  game.physics.p2.enable(flipper, true);
  flipper.body.clearShapes();
  flipper.body.loadPolygon('physics_data', 'flipper');

  //  So they don't collide with each other
  flipper_joint.body.clearCollision(true, true);

  flipper_constraint = game.physics.p2.createRevoluteConstraint(
    flipper_joint, [0,0], flipper, [-60,-30]
  );

  input_body = game.add.sprite(0, 0, '', 0);
  game.physics.p2.enable(input_body, true);
  input_body.body.setCircle(20);
  // just creating a group so the input and the flipper stop colliding
  input_body.body.setCollisionGroup(
    game.physics.p2.createCollisionGroup()
  );

}